willboudle · February 11, 2014 19:10
diff --git a/CSS TO HEADER b/CSS TO HEADER
 1. How to add a Magento CSS file to frontend

 1.1. Create (Copy) a CSS file (or a CSS folder) in folder skin/frontend/default/default/css/ or skin/frontend/base/default/css/
 Example: skin/frontend/default/default/css/magestore/mycss.css
 Or: skin/frontend/default/default/css/mycustom.css
 Or: skin/frontend/base/default/css/mycustom.css.
 1.2. Add a CSS file from layout file
 In the following examples, system firstly finds the declared magento CSS  file in folder skin/frontend/default/default/css. If it can’t find in this folder, system automatically finds in folder skin/frontend/base/default/css. If the system fails to find in both above folders, it will report error or skip.

 For comprehensive system (always add when layout files have not been loaded)

 <layout version="0.1.0">
 <default>
 <reference name="head">
 <action method="addCss">
 <stylesheet>css/mycustom.css </stylesheet>
 <params>media="all"</params>
 </action>
 <action method="addCss">
 <stylesheet>css/magestore/mycss.css
 </stylesheet>
 </action>
 </reference>
 </default>
 </layout>
 The following code block will add the following files respectively:
 skin/frontend/base/default/css/mycustom.css and
 skin/frontend/base/default/css/magestore/mycss.css to
 <head></head> when this module is loaded.

 For each site (only add when this action/page is loaded)

 <layout version="0.1.0">
 
 <lesson15_index_index>
 <reference name="head">
 <action method="addCss">
 <stylesheet>css/mycustom.css </stylesheet>
 <params>media="all"</params>
 </action>
 </lesson15_index_index>
 </layout>
 The above code block will add file mycustom.css to index action, controller index of module lesson 15.

 Besides method=’addCSS’, we can use other methods to add CSS from outside CSS library as follows:

 <?xml version="1.0"?>
 <layout version="0.1.0">
 <default>
 <reference name="head">
 <block type="core/text" name="addjquery">
 <action method="setText">
 <text>
 <![CDATA[<link href="http://yourhostcss/js/calendar/calendar-win2k-1.css" type="text/css" rel="stylesheet"> ]]>
 </text>
 </action>
 </block>
 </reference>
 </default>
 </layout>
 2. How to add a Magento Javascript file to frontend
 2.1 Add a Javascript file in Javascript folder


 <?xml version="1.0"?>
 <layout version="0.1.0">
 <lesson15_index_test>
 <reference name="head">
 <action method="addJs">
 <script>yourscript.js</script>
 </action>
 </reference>
 </lesson15_index_test >
 
 <lesson15_index_view>
 <reference name="head">
 <action method="addJs">
 <script>yourscript2.js</script>
 </action>
 </reference>
 </lesson15_index_view >
 </layout>
 The above code block will add JS in file js/yourscript.js to <head></head> when action test of module lesson 15 is loaded, and add JS in file js/yourscript2.js to <head></head> when action view of module lesson 15 is loaded.

 2.2. Add a Javascript file in skin folder

 <?xml version="1.0"?>
 <layout version="0.1.0">
 <lesson15_index_test>
 <reference name="head">
 <action method="addItem">
 <type>skin_js</type>
 <name>path/newfile.js</name>
 </action>
 </reference>
 </lesson15_index_test >
 </layout>


 The above code block will add JS in file skin/frontend/base/default/path/newfile.js to <head></head> when action test of module lesson 15 is loaded.

 2.3. Add a Javascript file from an outside library

 <?xml version="1.0"?>
 <layout version="0.1.0">
 <default>
 <reference name="head">
 <block type="core/text" name="addjquery">
 <action method="setText">
 <text>
 <![CDATA[<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
 <script type="text/javascript">jQuery.noConflict();</script>]]>
 </text>
 </action>
 </block>
 </reference>
 </default>
 </layout>
No results found