Adding custom css-files to theme (page.xml) - custom css-files for single storeviews

Question

Question #1: For some reason, I can't seem to get my custom CSS file to be implemented into the theme. I've basically done this with the page.xml:

Before:

<action method="addItem"><type>skin_css</type><name>css/styles-ie.css</name><params/><if>lt IE 9</if></action>
<action method="addItem"><type>skin_css</type><name>css/styles-iefont.css</name><params/><if>gt IE 6</if></action>
<action method="addCss"><stylesheet>css/widgets.css</stylesheet></action>
<action method="addCss"><stylesheet>css/print.css</stylesheet><params>media="print"</params></action>
<action method="addItem"><type>js</type><name>lib/ds-sleight.js</name><params/><if>lt IE 7</if></action>
<action method="addItem"><type>skin_js</type><name>js/ie6.js</name><params/><if>lt IE 7</if></action>

After: (added inbetween)

<action method="addCss"><stylesheet>css/widgets.css</stylesheet></action>
<action method="addCss"><stylesheet>css/print.css</stylesheet><params>media="print"</params></action>

<action method="addCss"><stylesheet>css/hafner.css</stylesheet><params>media="screen"</params></action>
<action method="addItem"><type>skin_css</type><name>css/hafner.css</name></action>

<action method="addItem"><type>js</type><name>lib/ds-sleight.js</name><params/><if>lt IE 7</if></action>
<action method="addItem"><type>skin_js</type><name>js/ie6.js</name><params/><if>lt IE 7</if></action>

Am I missing something?

The code is in <block type="page/html_header" name="header" as="header">

Question #2: (the relevant one)

How to add custom CSS-files for single storeviews?

Answered by Jonathan Hussey (see below)

edit02: it seems I don't get it quite just yet.

</default>

<!-- CUSTOM -->
<STORE_hafner_de>
    <reference name="header">
        <action method="addCss"><stylesheet>css/hafner.css</stylesheet><params>media="screen"</params></action>
    </reference>
</STORE_hafner_de>

that </default> is just to show that <default> is closed

Answer 1

Use the STORE layout handle:

<?xml version="1.0"?>
<layout version="0.1.0">
    <STORE_en>
        <reference name="content">
            ...
        </reference>
    </STORE_en>
</layout>

Where en is the code of the store in question. This will add the layout changes to all pages for that store in the same way as the <default> layout handle does for all pages of all stores. By default there is no way to use the STORE layout handle and only have layout changes for certain pages in that store.

FYI, next time just create a new question rather than completely changing an existing one so the comments don't make any sense - SE is a resource for people to refer to in the future as well as a way for you to have your questions answered.

Answer 2

Recently, I was trying to modify some color of a premium theme and saving it doesn't take any effect.

I tried to put into local.xml and page.xml without any success. Finally I figured out that this theme uses LESS. So I looked for LESS folders and edited my-theme.less (also my-theme.css into css folder). Then I refreshed cache and the change took effect.

This is how my parent's tree theme looks like:

skin
|
| ---- mypackage
    |
    |---- default
        |
        |---- less
        |   |
        |   |---- my-theme.less
        |---- css
        |   |
        |   |---- my-theme.css
        |---- images
        |
        |---- js

Hope this works for you.