Joomla Stack Exchange is a question and answer site for Joomla! administrators, users, developers and designers. It only takes a minute to sign up.
Sign up to join this community
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)?
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.
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.
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 {…}
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">
