Adding Site-wide Custom CSS

Question

I'm quite new to Magento (ver 1.9.1.0). I'm trying to add my own CSS that should apply to all pages.

I can't seem to make it work just by adding it on /app/design/frontend/base/default/layout/page.xml

Using the following:

<block type="page/html_head" name="head" as="head">
    <action method="addItem">
        <type>skin_css</type>
        <name>css/custom-style.css</name>
    </action>
</block>

My CSS is located at /skin/frontend/base/default/css.

I've seen some posts suggesting that I should add it into layout.xml but I can't see it anywhere on /app/design/frontend/base/default/layout/

Am I doing something wrong? Or is there any other way to do this without using Layout XML Update from the Admin Panel?

Answer 1

Open or create the layout file:

app/design/frontend/base/default/layout/local.xml

Then add your directive like this (example for empty file):

<?xml version="1.0"?>
<layout version="0.1.0">
    <default>
        <reference name="head">
            <action method="addItem">
                <type>skin_css</type>
                <name>css/custom-style.css</name>
            </action>
        </reference>
    </default>
</layout>

As alternative variant, you can modify the page.xml file (if it exists in your theme):

app/design/frontend/base/default/layout/page.xml

<default translate="label" module="page">
    <label>All Pages</label>
    <block type="page/html" name="root" output="toHtml" template="page/3columns.phtml">
        <block type="page/html_head" name="head" as="head">
            <action method="addItem">
                <type>skin_css</type>
                <name>css/custom-style.css</name>
            </action>
            ...
         </block>
     </block>
     ....
</default>

Answer 2

Just to create new file named new.css and add your theme folder given path below

skin\frontend\theme\default\css

link this css over here

app\design\frontend\theme\default\layout\page.xml

<block type="page/html_head" name="head" as="head">
    <action method="addItem"><type>skin_css</type><name>css/new.css</name></action>
</block>