Take the 2-minute tour ×
Joomla Stack Exchange is a question and answer site for Joomla! administrators, users, developers and designers. It's 100% free, no registration required.

I'm designing a multilingual site where I would like to base some of my styles on the active language.

Think something like this:

body.en-uk li.artist:before {content:"Artist: "}
body.it-it li.artist:before {content:"Artista: "}
body.de-de li.artist:before {content:"Künstler"}

Does anybody know of an extension capable of doing this (ie. adding a class to the tag depending on the active language)?

share|improve this question
1  
Just one small point; in this example you are modifying the content, not the style, based upon the language. You can already do this very easily within Joomla of course, no need for any css at all. –  Seth Warburton May 6 at 7:51

4 Answers 4

up vote 10 down vote accepted

There's actually an easier solution to your problem. Any sane template (including all templates that come with the Joomla CMS) will set the lang attribute on the HTML element. This enables you to use the CSS :lang() pseudo-selector.

You're example would look like this:

li.artist:lang(en):before {content:"Artist: "}
li.artist:lang(it):before {content:"Artista: "}
li.artist:lang(de):before {content:"Künstler"}

This has a couple of advantages. For starters, it will work regardless of Template or even with solutions other than Joomla as it's all done in the Browser.

Also it will work fine with embedded parts in other languages, as long as the lang attribute is set correctly. For example:

<html lang="en">
  <head>
    <style>
     blockquote:lang(de) { color: red; }
     blockquote:lang(en) { color: red; }
    </style>
  </head>
  <body>
    <p>A famous German quote is:</p>
    <blockquote lang="de">
      <p>Den Wald vor lauter Bäumen nicht sehen</p>
    </blockquote>
    <p>A famous English quote is:</p>
    <blockquote>
      <p>Listen to many, speak to a few.</p>
    </blockquote>
  <body>
</html>

Lastly, Joomla doesn't just output the language but the locale. So your one site might use en-GB, another en-US and the template will reflect that. Using :lang(en) will match either, but you could also use :lang(en-US) to only target American English.

share|improve this answer
    
Thanks for your answer Rouven: very interesting and I'll experiment with this too. –  smz May 4 at 14:08
    
Well, Rouven, at the end of the day I must say that I adopted your method: very elegant, not even the slightest modification to my template and it opened my eyes on more possibilities I'm now trying to leverage (multilingual custom HTML modules and articles...). Thanks again and many thanks to @Bakual and Lodder too, of course! –  smz May 4 at 21:00
    
Awesome. Glead to hear I could offer some inspiration. –  Rouven Weßling May 5 at 0:16
    
This is a brilliant answer, I had no idea! –  codinghands May 7 at 6:07

I would just modify the templates index.php file and add the class directly there.

<body class="<?php echo $this->language; ?>">

Would assign the current language as class to the body tag.

share|improve this answer
    
Awesome: even easier! –  smz May 4 at 13:41
    
Thanks Bakual: I added your code to my template and it perfectly works. I "accepted" your answer. –  smz May 4 at 13:51

One small thing to add with regard to Rouven's method; browser support is better for attribute selectors than it is for the language pseudo selector, so you might want to consider using something like this to target your styles:

[lang="en-GB"] .artist {…}
share|improve this answer
    
Thanks, @Seth! I will try your targetting solution. How about targetting with both? Will this make the solution even more compatible? –  smz May 10 at 13:19
    
That would either over-qualify your selectors or add unnecessary bloat. The shortest selector is always the best choice as it keeps specificity low, allowing you to override it easily if you need to. The more specific your selector, the harder it is to override, which is why you should never use IDs in your css. Using both wouldn't give you any more browser compatibility. –  Seth Warburton May 11 at 14:42
    
Hello, @Seth! I tried your solution but it doesn't seems to work, at least with my Joomla! site. As far as I understand the the only indication about the language in use lies in the <html> directive that reads:<html xmlns="w3.org/1999/xhtml"; xml:lang="it-it" lang="it-it" > in case of Italian or <html xmlns="w3.org/1999/xhtml"; xml:lang="en-gb" lang="en-gb" > in case of English. Should this be enough for your targeting solution? It doesn't seems so... –  smz May 11 at 21:21
    
Yes, this selector targets the html element based on attribute, which in this case is the language. However, attributes are case sensitive so you need to use: [lang="en-gb"] –  Seth Warburton May 12 at 8:19

In the index.php of your template, you could replace the current <body> tag with the following:

<?php $lang = JFactory::getLanguage(); ?>
<body class="<?php echo $lang->getTag(); ?>">

This will output the following as example:

<body class="en-GB">
share|improve this answer
    
Fantastic! Thanks! :-) –  smz May 4 at 13:36
    
Unhapply I can't vote you up as I don't have enough reputation... :-( –  smz May 4 at 13:37
    
Actually @Bakual's answer is the better method. It's quicker and easier ;) –  Lodder May 4 at 13:38
    
Yep, no need to fetch the language. It's already available in the template :) –  Bakual May 4 at 13:39
    
You can't vote up, but you can choose a post as the answer :) Take as long as you like to choose (and if no post answers your question-just leave it). The best answers will eventually have the most votes....in theory! –  moomoochoo May 4 at 13:40

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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