it-swarm.dev

Come aggiungere una classe CSS a <body> a seconda della lingua attiva

Sto progettando un sito multilingue in cui vorrei basare alcuni dei miei stili sulla lingua attiva.

Pensa a qualcosa del genere:

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

Qualcuno sa di un'estensione in grado di fare questo (cioè aggiungere una classe al tag a seconda della lingua attiva)?

8
smz

In realtà c'è una soluzione più semplice al tuo problema. Qualsiasi modello sano (compresi tutti i modelli forniti con Joomla CMS) imposterà l'attributo lang sull'elemento HTML. Ciò consente di utilizzare lo pseudo-selettore CSS :lang().

Il tuo esempio sarebbe simile al seguente:

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

Questo ha un paio di vantaggi. Per i principianti, funzionerà indipendentemente da Template o anche con soluzioni diverse da Joomla come è tutto fatto nel Browser.

Funzionerà bene anche con parti incorporate in altre lingue, purché l'attributo lang sia impostato correttamente. Per esempio:

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

Infine, Joomla non produce solo la lingua ma anche le impostazioni locali. Quindi il tuo sito potrebbe usare en-GB, un altro en-US e il modello lo rifletterà. L'uso di :lang(en) corrisponderà a entrambi, ma potresti anche utilizzare :lang(en-US) per indirizzare solo l'inglese americano.

14
Rouven Weßling

Vorrei solo modificare il file index.php dei modelli e aggiungere la classe direttamente lì.

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

Assegnerebbe la lingua corrente come classe al tag body.

5
Bakual

Una piccola cosa da aggiungere riguardo al metodo di Rouven; il supporto del browser è migliore per i selettori di attributi rispetto allo pseudo-selettore della lingua, quindi potresti prendere in considerazione l'uso di qualcosa del genere per indirizzare i tuoi stili:

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

Nell'indice.php del tuo modello, puoi sostituire l'attuale <body> tag con il seguente:

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

Questo mostrerà il seguente esempio:

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