0

I have created a custom template layout and it works fine, My page is named 2-col-custom.phtml I have written the following code in my layout page but it won't load.

 <page_two_col_custom>
         <reference name="head">
            <action method="addItem"><type>skin_css</type><stylesheet>css/col-custom.css</stylesheet></action>
            <action method="addItem"><type>skin_css</type><stylesheet>css/test.css</stylesheet></action>
        </reference>
    </page_two_col_custom>

How can I make catalog_category_default load a particular css with a custom template 2-col-custom.phtml and a copy of list.phtml with different layout ?

5
  • for loading css try reference name ="head"
    – Shrikant
    Commented Sep 19, 2016 at 11:13
  • @Shrikant yes, i updated but still not working.
    – localhost
    Commented Sep 19, 2016 at 11:14
  • You want to use diffrent phtml for category page? Commented Sep 21, 2016 at 15:49
  • @MurtuzaZabuawala yes and a different css, so i can style the list.phtml li in that css
    – localhost
    Commented Sep 21, 2016 at 15:57
  • @Nofel have you checked my answer? Commented Sep 22, 2016 at 3:30

5 Answers 5

2
+25

I'm not entirely sure what you're trying to do but I'm gonna try to enlight you as much as I can.

Step 1: Declaring a new page layout

To declare a new page layout like 1-column, 2columns-left etc... you need to create a small module:

app/etc/modules/Vendor_Module.xml

<?xml version="1.0"?>
<config>
  <modules>
    <Vendor_Module>
      <active>true</active>
      <codePool>local</codePool>
    </Vendor_Module>
  </modules>
</config>

app/code/local/Vendor/Module/etc/config.xml

<?xml version="1.0"?>
<config>
    <modules>
        <Vendor_Module>
            <version>0.0.1</version>
        </Vendor_Module>
    </modules>
    <global>
        <page>
            <layouts>
                <page_two_col_custom module="page" translate="label">
                    <label>Page Two Columns Custom</label>
                    <template>vendor/module/2-col-custom.phtml</template>
                    <layout_handle>page_two_col_custom</layout_handle>
                </page_two_col_custom >
            </layouts>
        </page>
    </global>
</config>

Then you can create app/design/frontend/<your_package>/<your_theme>/template/vendor/module/2-col-custom.phtml

According to what you pasted I assume that's what you did

Step 2: Changing the category page template

If you want to assign your new page layout to your category page you can add the following to your app/design/frontend/<your_package>/<your_theme>/layout/local.xml :

<catalog_category_default>
    <reference name="root">
        <action method="setTemplate">
            <template>vendor/module/2-col-custom.phtml</template>
        </action>
    </reference>
</catalog_category_default>

Step 3: Adding CSS to the category page

To add some CSS to the category page you can update the code I just pasted with the following:

<catalog_category_default>
    <reference name="head">
        <action method="addItem"><type>skin_css</type><name>css/col-custom.css</name></action>
        <action method="addItem"><type>skin_css</type><name>css/test.css</name></action>
    </reference>
    <reference name="root">
        <action method="setTemplate">
            <template>vendor/module/2-col-custom.phtml</template>
        </action>
    </reference>
</catalog_category_default>

You need to ensure that the CSS files are located in the following locations:

  • skin/frontend/<your_package>/<your_theme>/css/custom.css
  • skin/frontend/<your_package>/<your_theme>/css/test.css

Step 4: Create and use a page layout handle

If you want to create a layout handle for your new page layout and assign it to the catalog category page you can add the following to your local.xml:

<page_two_col_custom>
     <reference name="head">
        <action method="addItem"><type>skin_css</type><name>css/col-custom.css</name></action>
        <action method="addItem"><type>skin_css</type><name>css/test.css</name></action>
    </reference>
    <reference name="root">
        <action method="setTemplate">
            <template>vendor/module/2-col-custom.phtml</template>
        </action>
    </reference>
</page_two_col_custom>

Then do:

<catalog_category_default>
    <update handle="page_two_col_custom" />
</catalog_category_default>

Please note that the result you will get from this will be exactly the same as the procedure explained in Adding CSS to the category page .

Step 5: Changing the template of product list

If you want to change the template using your custom handle (previous step) you can update the handle like this:

<page_two_col_custom>
     <reference name="head">
        <action method="addItem"><type>skin_css</type><name>css/col-custom.css</name></action>
        <action method="addItem"><type>skin_css</type><name>css/test.css</name></action>
    </reference>
    <reference name="root">
        <action method="setTemplate">
            <template>vendor/module/2-col-custom.phtml</template>
        </action>
    </reference>
    <reference name="product_list">
        <action method="setTemplate">
            <template>path/to/list/template.phtml</template>
        </action>
    </reference>
</page_two_col_custom>

You need to ensure that your new list template is located under app/design/frontend/<your_package>/<your_theme>/template/path/to/list/template.phtml

Side note

The code I provided only works for non layered category. If you wanted to do it for layered category instead, you'll have to replace catalog_category_default with catalog_category_layered. If you want to do it for both, just create the node twice.

7
  • @Rapael Great explanation, my question would be now, will declaring this new layout and new list.phtml , will it affect other` category_category_*` pages? As per my need is change li for new template, so i can load my custom styles i.e 2 products each page. If that template is not selected, category_catalog_* should load normally.
    – localhost
    Commented Sep 22, 2016 at 9:45
  • @Nofel I don't understand what you're saying. Do you want that to work only for one category that's what you say ? Commented Sep 22, 2016 at 9:55
  • I want that template(custom-list.phtml) and that css (my-custom.css) to kick in only when that layout is selected from admin dropdown. I think your code is good.
    – localhost
    Commented Sep 22, 2016 at 10:01
  • @Nofel yes in that case don't add the layout handle to catalog_category_default in Step 4 Commented Sep 22, 2016 at 10:03
  • with <template> what if it based under template\page\template.phtml How can we use that path
    – localhost
    Commented Sep 22, 2016 at 11:20
1

Check if BLOCK_HTML cache enabled.

There is a cache problem when you update a certain page with custom layout.

Magento caches the layout from other pages and loses your update.

If this is your problem you have to set an action with empty cache lifetime.

0

Which version of Magento do you use? If you check 'View page source' - is the link to the css there? Is the path correct? Did you create col-custom.css file?

Check the syntax - it should be like that:

<action method="addItem"><type>skin_css</type><name>css/styles-ie.css</name></action>
1
  • no, i don't see any line code in source.
    – localhost
    Commented Sep 19, 2016 at 12:09
0

You need to define that custom layout in page.xml Please check below code:

<page_one_column translate="label">
        <label>All One-Column Layout Pages</label>
        <reference name="root">
            <action method="setTemplate"><template>page/1column.phtml</template></action>
            <!-- Mark root page block that template is applied -->
            <action method="setIsHandle"><applied>1</applied></action>
            <action method="setLayoutCode"><name>one_column</name></action>
        </reference>
    </page_one_column>

Please let me knw still its not working from your end.

10
  • it didn't. I have updated my question code also.
    – localhost
    Commented Sep 20, 2016 at 10:25
  • did you check that your custom layout working via template layout .phtml file?
    – Nits
    Commented Sep 20, 2016 at 10:58
  • @Nita . yes it does and so does css if i take it out the <page> block but i don't need it on every page.
    – localhost
    Commented Sep 20, 2016 at 11:00
  • Its Nits not nita, Did you check that css display in page view source? and plz try below code: <action method="addCss”><type>skin_css</type><file>css/javcustom.css</file></action>
    – Nits
    Commented Sep 20, 2016 at 13:36
  • i updated my question with new code. Have a look. Your last comment code work but not under the handles of my new layout.
    – localhost
    Commented Sep 21, 2016 at 8:43
0

copy default list.phtml file and create new phtml with new name and youy path and follow below steps.

As far as I know what you have to do is following, put below code in your local.xml or any custom layout xml file. try and let me know

<catalog_category_default>
    <reference name="head">
        <action method="addItem"><type>skin_css</type><stylesheet>css/col-custom.css</stylesheet></action>
        <action method="addItem"><type>skin_css</type><stylesheet>css/test.css</stylesheet></action>
    </reference>
    <reference name="catalog/product_list">
        <action method="setTemplate"><template>yourTemplatePath/yourTemplateList.phtml</template></action>
    </reference>
</catalog_category_default>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.