it-swarm-es.tech

Cómo agregar una clase CSS a <body> dependiendo del lenguaje activo

Estoy diseñando un sitio multilingüe donde me gustaría basar algunos de mis estilos en el lenguaje activo.

Piensa algo como esto:

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

¿Alguien sabe de una extensión capaz de hacer esto (es decir, agregar una clase a la etiqueta dependiendo del idioma activo)?

8
smz

En realidad, hay una solución más fácil para su problema. Cualquier plantilla sensata (incluidas todas las plantillas que vienen con Joomla CMS) establecerá el atributo lang en el elemento HTML. Esto le permite utilizar el pseudo-selector CSS :lang().

Tu ejemplo se vería así:

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

Esto tiene un par de ventajas. Para empezar, funcionará independientemente de la Plantilla o incluso con soluciones distintas a Joomla, ya que todo se hace en el Navegador.

También funcionará bien con partes integradas en otros idiomas, siempre que el atributo lang esté configurado correctamente. Por ejemplo:

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

Por último, Joomla no solo muestra el idioma sino también la configuración regional. Por lo tanto, un sitio puede usar en-GB, otro en-US y la plantilla reflejará eso. El uso de :lang(en) coincidirá, pero también puede usar :lang(en-US) para apuntar solo al inglés americano.

14
Rouven Weßling

Simplemente modificaría el archivo de plantillas index.php y agregaría la clase directamente allí.

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

Asignaría el idioma actual como clase a la etiqueta del cuerpo.

5
Bakual

Una pequeña cosa para agregar con respecto al método de Rouven; la compatibilidad con el navegador es mejor para los selectores de atributos que para el pseudo selector de idioma, por lo que puede considerar usar algo como esto para orientar sus estilos:

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

En el index.php de su plantilla, puede reemplazar el actual <body> etiqueta con lo siguiente:

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

Esto generará lo siguiente como ejemplo:

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