Adding Extra Files to the Magnto Theme

We will add an extra CSS and JavaScript file to Magento theme. To do this, we have to work in the following two directories:

1) app/design/frontend/your_package/your_theme/layout

2) skin/frontend/your_package/your_theme/

The following steps are the normal procedure to add extra JavaScript or CSS files to your theme.

1. Copy the page.xml file to app/design/frontend/your_package/ your_theme/layout. The declarations of all the CSS and JavaScript files that need to be included are stored in the file app/design/frontend/ base/dedault/layout/page.xml


2. If you open the page.xml file 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/mytheme.css</stylesheet>
   </action>
   
   



3. The path we specify here is the path starting from our theme root folder, /skin/frontend/your_package/your_theme/. Magento will use the them fallback to find the file in the theme, package or base folder.

The addCss function is 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 js folder (folder in the theme folder) to the head of the page.


• addItem: This function will add a JS or CSS file to the header of the page. The function has two required parameters: the type and the filename. The type can have the following values:
  
  • skin_js: This is a JavaScript file in the js folder from the theme
  
  
  • js_css: This is a CSS file in the js folder
  
  
  • js: This is a JavaScript file in the js folder
  
  
  • css: This is a CSS file in the skin folder