Magento 1.9 : Add custom css file to head

Question

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...

Answer 1

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>

Answer 2

To add CSS file follow the below steps:

Open File
app\design\frontend\rwd\default\layout\page.xml
Add the below tag for css:
<action method="addCss"><stylesheet>css/[filename].css</stylesheet></action>

Just below the last method=”addCss” add the above line.
Now open,
skin\frontend\rwd\default\css\[filename].css

Start writing your css code in this file.

To add JS file follow the below steps.

Open File
app\design\frontend\rwd\default\layout\page.xml
Add the below tag
<action method="addItem"><type>skin_js</type><name>js/[filename].js</name></action>

Just below the js include tags similar to the above line.
Now open,
skin\frontend\rwd\default\js\[filename].js

Start writing your js code in this file.

For Magento 2 please refers to this link.