如何將類添加到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。