如何将类添加到Magento布局中的侧栏div？

Question

如何添加一个类到Magento布局的div？我只想在我的一页上更改它。默认情况下，我有：

<div class="col-left sidebar"> 

我想：

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

在2列左我不能改变这一点，因为它会在Magento的所有页面更改。可能吗？

Answer 1

方法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> 

在这里，您可以将您的JavaScript和CSS。请注意，您添加的任何Js文件都与您的根目录中的“js”文件夹相关。 css文件包含在当前和默认模板（skin/frontend/default/your_template（默认值为&）/ 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> 

使用还可以用于管理后台（CMS页面，类别和产品设计）中的布局XML区域。这可以完成同样的事情，以及添加或删除其他块。

方法2 - 分组码：

我们可以做到这一切的代码。这些函数在Mage_Page_Block_Html_Head中定义。所以，我们可以在一个块类中使用此代码（不是一个.phtml文件！）：

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

只要我建议找过page.xml文件，找到的removeItem语法（$型，$名称对于这个方法，对于xml）来说，这对于你在需要的时候添加或者删除资源非常方便！

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

文章发表：http://www.exploremagento.com/magento/adding-and-remove-js-css.php

Answer 2

如果你只是想改变一个页面，你可以尝试复制2列左模板，重命名和编辑它，然后在编辑页面使用新的模板。

1. 重命名并编辑2-columns-left.phtml文件。这可以在/ app/design/frontend/default/YOUR_THEME/template/page中找到。在第50行左右，您会看到<div class="col-left sidebar">行。

2. 编辑config.xml文件，以便页面使用新模板。 Config.xml位于/ app/code/core/Mage/Page/etc中。大约一半你会看到代码指向two_columns_left;复制此代码，并将其编辑为指向新页面。

3. 最后，通过后台> CMS>页面编辑页面以使用新模板。您现在可以通过主题中的CSS添加样式。

More instructions here。