1. For all pages
  2. For all CMS pages
  3. For certain CMS pages
  4. For all category pages
  5. For certain category pages
  6. For all product pages
  7. For certain product pages

if you haven’t already created a file “local.xml” in your custom theme’s layout folder, first create it and start the file with this below xml:


<?xml version="1.0″?>
   <layout>
   </layout>

1-Adding custom CSS / JavaScript for All Pages

1. Open up local.xml
2. Add this XML as a child element inside , and save

i). Put your css file in the skin css folder:


<default>
  <reference name="head">
    <action method="addItem">
      <type>skin_css</type>
      <name>css/mystyle.css</name>
      <params/>
    </action>
  </reference>
</default>

ii). Put your javascript file in the skin js folder:


<default>
  <reference name="head">
    <action method="addItem">
      <type>skin_js</type>
      <name>js/myJs.js</name>
      <params/>
    </action>
  </reference>
</default>

iii). Put your javascript file in the /js folder:


<default>
  <reference name="head">
    <action method="addJs"><script>your_Js.js</script></action>
  </reference>
</default>

2- Adding custom CSS / JavaScript for All CMS Pages

As you Add “custom CSS / Javascript to all pages”,

For All Cms Page instead of the tag , use:

3- Adding custom CSS / JavaScript for Certain CMS Pages

1. Login to the Admin Panel, navigate to CMS > Pages > Manage Content.
2. Click on the cms page you wish to apply custom CSS or JavaScript to.
3. Click on the “Design” tab
4. In the textarea labeled “Layout Update XML”, add as i mentioned above:

4- Adding custom CSS / JavaScript for All Category Pages

As you Add “custom CSS / Javascript to all pages”,

For All Cms Page instead of the tag , use:
and/or ,

5- Adding custom CSS / JavaScript to Certain Category Pages

1. In the Admin Panel, navigate to Catalog > Categories > Manage Categories
2. Click on the category you wish to add custom CSS or JavaScript to.
3. Click on the “Custom Design” tab
4. In the textarea labeled “Custom Layout Update”, add as i mentioned above:

6- Adding custom CSS / JavaScript to All Product Pages

As you Add “custom CSS / Javascript to all pages”,

For All Cms Page instead of the tag , use:

7- Adding custom CSS / JavaScript to Certain Product Pages

1. In the Admin Panel, navigate to Catalog > Products > Manage Products
2. Click on the product you wish to add custom CSS or JavaScript to.
3. Click on the “Design” tab
4. In the textarea labeled “Custom Layout Update”, add: mentioned above

 

 

Categories: Magento

0 Comments

Leave a Reply

Avatar placeholder

Your email address will not be published. Required fields are marked *