How to do it…
In the following steps, we will see how we can add extra files to a theme:
2. We need to add something. So we need to copy this file with the same folder structure to our theme folder. Copy the file to app/design/frontend/packt/default/layout/page.xml.
3. Add the CSS declaration
4. If you open the page.xmlfile and look in the <default>tag, you will see a lot of lines with “addCss”. We need to add the following line in that section:<action method=”addCss”><stylesheet>css/packt.css</stylesheet></action>
The path we specify here is the path starting from our theme root folder, so it is css/packt.css. Magento will use the theme fallback to find the file in the theme, package, or basefolder.
5. Don’t forget to create the CSS file. Create the packt.cssfile in the skin/frontend/packt/default/css/folder.
6. Clear the Magento cache.
When you change something in the XML files, you will always have to clear the cache to see the effect of your changes. It is also possible to disable the cache. The purpose is that you don’t have to clear the cache many times as the page loads are slower.
7. Reload the frontend and look at the HTML source. Your file should be added.
How it works…
The addCssfunctionis one of the functions in the head block of Magento. This block will generate the HTML head section of a page.
The following functions are useful when working with extra CSS and JS files:
addJs: This function will add a JS file from the jsfolder (folder in the root directory) to the head of the page.
addItem: This is a function that will add a JS or CSS file to the head of the page. The function has two required parameters: the type and the file name.
- The type can have the following values:
- js_css: This is a CSS file in the jsfolder
- css: This is a CSS file in the skinfolder
- rss: This creates a <link>HTML tag with an attribute type=”application/rss+xml”
The addItemfunction hasthree other optional parametersto customize the output of the tag in the headtag.
- It always contains the right absolute URL to the file (it contains the right domain
- It uses the theme fallback system
Thank you for reading our posts, you can read all the series at: Magento theme tutorial channel
Ready to foster your knowledge with MAGENTO 2 BASIC GUIDE