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)?

  • 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. Commented May 6, 2014 at 7:51

4 Answers 4


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

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.

  • Thanks for your answer Rouven: very interesting and I'll experiment with this too.
    – smz
    Commented May 4, 2014 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
    Commented May 4, 2014 at 21:00
  • Awesome. Glead to hear I could offer some inspiration. Commented May 5, 2014 at 0:16
  • This is a brilliant answer, I had no idea! Commented May 7, 2014 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.

  • Awesome: even easier!
    – smz
    Commented May 4, 2014 at 13:41
  • Thanks Bakual: I added your code to my template and it perfectly works. I "accepted" your answer.
    – smz
    Commented May 4, 2014 at 13:51
  • I'm looking to do something similar to add the alias to the body class. But I don't want to override the template in case of updates. I was thinking about creating a system plugin, but is there a way to add this class, or should I just use JavaScript?
    – Eoin
    Commented Jan 2, 2019 at 17:45

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 {…}
  • Thanks, @Seth! I will try your targetting solution. How about targetting with both? Will this make the solution even more compatible?
    – smz
    Commented May 10, 2014 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. Commented May 11, 2014 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
    Commented May 11, 2014 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"] Commented May 12, 2014 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">
  • Unhapply I can't vote you up as I don't have enough reputation... :-(
    – smz
    Commented May 4, 2014 at 13:37
  • 1
    Actually @Bakual's answer is the better method. It's quicker and easier ;)
    – Lodder
    Commented May 4, 2014 at 13:38
  • 1
    Yep, no need to fetch the language. It's already available in the template :)
    – Bakual
    Commented May 4, 2014 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!
    – TryHarder
    Commented May 4, 2014 at 13:40
  • @Bakual - Silly mistake of mine. Reason being I've just answered a language related question on SO which doesn't involve the template lol
    – Lodder
    Commented May 4, 2014 at 13:42

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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