web-dev-qa-db-fra.com

Comment ajouter une classe CSS à <body> en fonction de la langue active

Je conçois un site multilingue sur lequel j'aimerais fonder certains de mes styles sur la langue active.

Pensez à quelque chose comme ça:

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"}

Est-ce que quelqu'un connaît une extension capable de faire cela (c'est-à-dire d'ajouter une classe à la balise en fonction de la langue active)?

extensions
8
smz

Il existe en fait une solution plus simple à votre problème. Tout modèle sain (y compris tous les modèles fournis avec le CMS Joomla) définira l'attribut lang sur l'élément HTML. Cela vous permet d'utiliser le pseudo-sélecteur CSS :lang().

Votre exemple ressemblerait à ceci:

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

Cela présente quelques avantages. Pour commencer, cela fonctionnera indépendamment de Template ou même avec des solutions autres que Joomla, comme cela se fait dans le navigateur.

En outre, cela fonctionnera bien avec les pièces incorporées dans d'autres langues, à condition que l'attribut lang soit correctement défini. Par exemple:

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

Enfin, Joomla ne fournit pas seulement la langue mais les paramètres régionaux. Ainsi, votre site utilisera peut-être en-GB, un autre en-US et le modèle le reflétera. Utiliser :lang(en) correspondra à l'un ou à l'autre, mais vous pouvez également utiliser :lang(en-US) pour ne cibler que l'anglais américain.

14
Rouven Weßling

Je voudrais juste modifier le fichier index.php de modèles et ajouter la classe directement là.

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

Attribuerait le langage actuel en tant que classe à la balise body.

5
Bakual

Une petite chose à ajouter en ce qui concerne la méthode de Rouven; la prise en charge du navigateur est meilleure pour les sélecteurs d’attributs que pour le pseudo-sélecteur de langue; vous pouvez donc envisager d’utiliser quelque chose comme ceci pour cibler vos styles:

[lang="en-GB"] .artist {…}
3
Seth Warburton

Dans le fichier index.php de votre modèle, vous pouvez remplacer la balise <body> Actuelle par la suivante:

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

Ceci produira comme exemple:

<body class="en-GB">
1
Lodder