0

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.

  • Can't you use a modern browser element inspector? – Adam Moss Nov 12 '13 at 12:42
  • Or, just apply border property for all elements that available in a css. border: 1px solid red; This way, you can see which property comes from. – Oğuz Çelikdemir Nov 12 '13 at 13:35
2

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.

RA banner

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.

enter image description here

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

enter image description here

| improve this answer | |
  • 1
    You are so down-to-earth. Didn't think of that! – Fabian Blechschmidt Nov 13 '13 at 11:40
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 :)

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.