Declare different CSS background-images for different locales

If you would like to use language specific layout (e.g. background-images) in your applications stylesheets you can achieve this easily by using the lang attribute in your views (ERB):

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<%= I18n.locale || 'en' %>" lang="<%= I18n.locale || 'en'%>">
...
</html>

or in HAML:

%html :xmlns => "http://www.w3.org/1999/xhtml", :"xml:lang" => I18n.locale || 'en', :lang => I18n.locale || 'en'

Then, in your stylesheet you can for example declare different background-images for all the languages and elements that are involved.

html[lang='en']
  #header
    background-image: url(images/header_en.png)
      
html[lang='de']
  #header
    background-image: url(images/header_de.png)

Last edit

2012-04-10

Keywords

haml, sass, rails

License

Source code in this card is licensed under the MIT License.

Posted to makandra dev (2011-11-11 13:42)