How can I know which .css file is used for a certain template?

Question

How can I get to know which styling file is used for a certain template. Because for the billing/shipping checkout templates, there is one css file used. But when I want to modify the template for the customer address page (when in the customer account - modifying the address), apparently the classes that I have in that css don't apply. And I want to know which css is used, for example to write in the log the path to the certain styling file, so I know where to modify my design.

Answer 1

Since Fabian already talked about layout handles, I thought I might offer a different potential answer. In just about any browser these days (my screenshots will use Chrome), take a look at the web inspector.

Say we want to give this text box a red border. Silly, I know. I'll be using the Royal Academy Shop website for these images, but yours will do fine too.

Well, if I right click on it and select "Inspect Element", I'll bring up the inspector, looking at that box. Take a look at the right hand side, under the styles tab, you'll see a list of all CSS rules, as well as the lines and files in which they are applied. Rules that are overridden are crossed out. You'll probably find your border rule in there.

Simply look for where border is actually defined, and replace it in that file.

Answer 2

You don't know which CSS file is used.

Layout handles and layout xml files

Magento works with so-called 'layout handles' which group actions in the layout. Every page includes a few of them, just have a look into app/design/frontend/base/default/layout, there are lots of xml files with the layout handles as node names in the first child nodes:

• default
• checkout_onepage_index
• checkout_onepage_review
• catalogsearch_term_popular

etc. Those handles group actions, like adding css and js files:

<catalogsearch_advanced_index translate="label">
    <reference name="head">
        <action method="addItem"><type>js_css</type><name>calendar/calendar-win2k-1.css</name><params/><!--<if/><condition>can_load_calendar_js</condition>--></action>
        <action method="addItem"><type>js</type><name>calendar/calendar.js</name><!--<params/><if/><condition>can_load_calendar_js</condition>--></action>
        <action method="addItem"><type>js</type><name>calendar/calendar-setup.js</name><!--<params/><if/><condition>can_load_calendar_js</condition>--></action>
    </reference>
</catalogsearch_advanced_index>

Depending on the page you are viewing, the different controller and blocks add these handles and in the end, the page is built on them.

Answer

So to answer your question you have to check, which layout handles are included and what css files they include.

And don't forget to check whether the fils are merged or not :)