How to add class to sidebar div in Magento layout?

How do you add a class to a div in a Magento layout? I want to change it on only one of my pages. By default, I have:

<div class="col-left sidebar">

I want:

<div class="col-left sidebar my-class">

I can't change this in 2-columns-l开发者_运维百科eft because it will change on all pages of Magento. Is it possible?

---

If you just want to change one page, you could try copying the 2-columns-left template, renaming and editing it, then editing the page to use the new template.

1. Rename and edit the 2-columns-left.phtml file. This is found in /app/design/frontend/default/YOUR_THEME/template/page . At around line 50 you'll see the <div class="col-left sidebar"> line.

2. Edit the config.xml file so that the page uses the new template. Config.xml is in /app/code/core/Mage/Page/etc . About halfway down you'll see code referring to two_columns_left; copy this code, and edit it to point to the new page.

3. Finally, edit the page through the backend > CMS > Pages to use the new template. You can now add styles through the CSS in your theme.

More instructions here.

---

Method 1 - layout.xml :

a. For files you want to include on every page
For css or js files you want to add to every page, you edit the page.xml files located in your layout folder (app/design/frontend/default/your_theme/layout/page.xml). Within this file, at the top you will find the <default> area with the **<block name="root" … >**. This block has a child named head which contains the included css and js elements.

<block type="page/html_head" name="head" as="head">
<action method="addJs"><script>prototype/prototype.js</script></action>
<action method="addJs" ifconfig="dev/js/deprecation"><script>prototype/deprecation.js</script></action>
<action method="addJs"><script>prototype/validation.js</script></action>
<action method="addJs"><script>scriptaculous/builder.js</script></action>

...

</block> 

Here you can add your javascript and css. Note that any Js files you add are relative to the “js” folder in your root directory. The css files are included from the skin files of the current and default templates (skin/frontend/default/your_template(& default)/css).

b. Specific areas
If you want to include css or js on only certain areas (such as the checkout process or catalog pages), you can do that also. For instance, if you want it in a single product view (product view vs product list), you can open up catalog.xml, find <catalog_product_view> area (near line 168 in vs 1.2.1).  Add your code in there – notice that we are using the <reference> tag rather than <block> tags. We use the “reference” tag to reference other blocks that are in other areas of the template.

<reference name="head">
<action method="addJs"><script>varien/product.js</script></action>

<action method="addItem"><type>js_css</type><name>calendar/calendar-win2k-1.css</name><params/><!--<if/><condition>can_load_calendar_js</condition>--></action>
<action method="addItem"><type>js</type><name>calendar/calendar.js</name><!--<params/><if/><condition>can_load_calendar_js</condition>--></action>
<action method="addItem"><type>js</type><name>calendar/lang/calendar-en.js</name><!--<params/><if/><condition>can_load_calendar_js</condition>--></action>
<action method="addItem"><type>js</type><name>calendar/calendar-setup.js</name><!--<params/><if/><condition>can_load_calendar_js</condition>--></action>
</reference> 

The use of can also be used in your layout XML areas in the admin backend (CMS pages, category and product designs). This can accomplish the same thing, as well as adding or removing other blocks.

Method 2 - Block Code :

We can accomplish all of this in code as well. These functions are defined within Mage_Page_Block_Html_Head. So, we can use this code with in a block class (not a .phtml file!):

$headBlock = $this->getLayout()->getBlock('head');
$headBlock->addJs('somefolder/yay.js'); 

I suggest looking over the page.xml files as long as finding the removeItem syntax ($type, $name for the method, for the xml), which will be very handy for you for adding or removing assets as and when you need them!

<action method="removeItem"><type>js</type><name>calendar/calendar.js</name</action>
$this->getLayout->getBlock('head')->removeItem('js', 'calendar/calendar.js'); 

The article was published : http://www.exploremagento.com/magento/adding-and-remove-js-css.php