How to Add CSS to Custom Page Layout in Magento 1.8

csslayoutmagento-1.8

I want to include a specific CSS file on a custom page layout I created


I already created a custom page layout (it is a duplicate of two_columns_left) using : App/Code/Core/Mage/Page/etc/config.xml

<layouts>
    [all normal layouts]
    <my_custom_page module="page" translate="label">
        <label>Custom Page</label>
        <template>page/custom-page.phtml</template>
        <layout_handle>page_my_custom_page</layout_handle>
    </my_custom_page>
</layouts>

I created a custom css file to include beside css/custom.css named css/mycustom.css


I added just after

<default>
    ...
</default>

to App/Design/Fronted/[theme]/[design]/Layout/local.xml

<page_my_custom_page>
    <reference name="head">
        <action method="addCss"><stylesheet>css/mycustom.css</stylesheet></action>
    </reference>
</page_my_custom_page>

But the css file wont show up in page generation. Any idea of what couldn't work properly?

Thanks!

Best Answer

It will be issue in translate="label" syntax

<page_my_custom_page translate="label">
        <label>All One-Column Layout Pages</label>
        <reference name="root">
            <action method="setTemplate"><template>page/custom-page.phtml</template></action>
            <!-- Mark root page block that template is applied -->
            <action method="setIsHandle"><applied>1</applied></action>
        </reference>
 <reference name="head">
                           <action method="addCss"><stylesheet>css/mycustom.css</stylesheet></action>

        </reference>
    </page_my_custom_page>

Also , check file paths...

More details you check ,please the link--

Also the blog file easylife_layout.xml

please change here-

<?xml version="1.0"?>
<layout>
    <my_custom_page translate="label">
        <label>Custom layout</label>
        <reference name="root">
            <action method="setTemplate"><templatepage/custom-page.phtml</template></action>
            <action method="setIsHandle"><applied>1</applied></action>
        </reference>
        <reference name="head">
                           <action method="addCss"><stylesheet>css/mycustom.css</stylesheet></action>

        </reference>
    </my_custom_page>
</layout>