如何在Magento布局中添加类到侧边栏div?

时间:2011-03-01 08:27:42

标签: magento

如何在Magento布局中为div添加类?我只想在我的一个页面上更改它。默认情况下,我有:

<div class="col-left sidebar">

我想:

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

我无法在2栏左侧更改此内容,因为它会在Magento的所有页面上发生变化。有可能吗?

2 个答案:

答案 0 :(得分: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. 最后,通过后端编辑页面&gt; CMS&gt;要使用新模板的页面。您现在可以通过主题中的CSS添加样式。

  4. More instructions here

答案 1 :(得分: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(&amp; 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> 

也可以在管理后端(CMS页面,类别和产品设计)的布局XML区域中使用。这可以完成同样的事情,以及添加或删除其他块。

方法2 - 广告代码:

我们也可以在代码中完成所有这些。这些函数在Mage_Page_Block_Html_Head中定义。因此,我们可以在块类(而不是.phtml文件!)中使用此代码:

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

我建议查看page.xml文件,只要找到removeItem语法($ type,$ name for the method,for 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