Magento 1.9 – Add Custom CSS File to Head

cssmagento-1.9

I need to add a custom CSS file to Magento that then is used site-wide. I know you have to add this to a local.xml file, however, the stylesheet I add is just not loaded.

Anyone that can help?

Here is what I've added to my local.xml file:

<?xml version="1.0">
<layout>
    <default>
        <reference name="head">
            <action method="addCss”><type>skin_css</type><file>css/javcustom.css</file></action>
        </reference>
    </default>
</layout>

I know there are a lot of topics on this here, but I've tried all of them and I just can't get it to work…

Best Answer

There are two way to add css to head one is using function addCss and another is addItem. You have mix-up two format. Your format is wrong.

try this

<action method="addCss">
    <stylesheet>css/javcustom.css</stylesheet>
</action>

instead of

<action method="addCss">
    <type>skin_css</type>
    <file>css/javcustom.css</file>
</action>

or try this

<action method="addItem">
    <type>skin_css</type>
    <name>css/javcustom.css</name>
</action>

Related Solutions

Magento – way to load an external CSS file in local.xml

As @Philwinkle said, you can modify the code from the post he previously posted.

<default>
    <reference name="head">
        <block type="core/text" name="your_external_csv">
            <action method="setText">
                <text><![CDATA[<link rel="stylesheet" type="text/css" href="http://path.com/to/stylesheet.css">]]>
                </text>
            </action>
        </block>
    </reference>
</default>

It's important to understand what Magento is actually doing here so you understand how to modify it. A new block is created using the Mage_Core_Block_Text class. This class only has 4 methods: to get, add and set text and a _toHtml method that automatically outputs the text when the block is echoed in a phtml file.

In the block you've created just now you're using the <action> tag with attribute method, setText to imply that Magento should create the block and then call the following method or function of this block with, in this case, as argument your external CSS tag. So It doesn't really matter what you give as argument, it will always be outputted in the phtml.

Magento – Assigning a custom CSS-file to a store

I fixed it myself. Thanks again, Johnathan Hussey, for the answer.

I had to enter the code like this:

<STORE_hafner_de>
        <reference name="head">
            <action method="addCss"><stylesheet>css/hafner.css</stylesheet><params>media="screen"</params></action>
        </reference>
</STORE_hafner_de>

Apparently there's some trouble when selecting a single block per <block>, but calling the block's name as reference works.

Best Answer

Related Solutions

Magento – way to load an external CSS file in local.xml

Magento – Assigning a custom CSS-file to a store

Related Topic