Adding a Style Sheet to only One Store View on Magento

Sometimes you may want to add a style sheet to only one of your store views, so it affects only this view, and not any other of your views. For instance: you have 2 languages in your site, and for each language you have its own view. One of the languages in your site requires special style rules, for instance – you want to change the directionality to rtl for this language (Hebrew or Arabic). For that you will want to add a special style sheet with some rtl rules.

  • Creat your css file, for instance: rtl.css, and store it under skin/frontend/my_theme_package/my_language_view/css
  • Open the page.xml file under app/design/frontend/my_theme_package/default/layout.xml and save it by the same name under app/design/frontend/my_theme_package/my_language_view/
  • Inside the file locate the block that starts with the line (it should be the first child of the main default block, right at the beginning of the file) :
    <block type="page/html_head" name="head" as="head">
    there, locate the line:
    <action method="addCss"><stylesheet>css/styles.css</stylesheet></action>
  • Right underneath it, add the line:
    <action method="addCss"><stylesheet>css/rtl.css</stylesheet></action> where rtl.css is the actual name of your new css file. Make sure that you add the line after the styles.css line, and not before, so that the special css rules override the theme’s standard rules.
  • On your store front end, select the view that you want the special styles to apply to, and refresh the page. Make sure that all cache settings in the admin area system => manage cache settings are turned off. Looking at the page source, you should be able to see a new line within the page head, with a call to your new css file.

I have went through your tutorial and it did not work, duplicating files is not a good practice, no need to do all of that, just add the following in your layout file (page.xml for example) as custom layout handle:

Arabic

1
STORE_ar
css/arabic.css

this will load arabic.css just for ar store view, and that’s it 🙂

I don’t understand how to use the custom layout handle to add a single css to different store views. Anyone mind to elaborate a little bit?