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

8

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

extensions smz
fuente
1
Solo un pequeño punto; En este ejemplo, está modificando el contenido, no el estilo, según el idioma. Ya puedes hacer esto muy fácilmente dentro de Joomla, por supuesto, sin necesidad de ningún CSS.
Seth Warburton,

Respuestas:

14

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 langatributo en el elemento HTML. Esto le permite utilizar el :lang()pseudo-selector CSS .

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 incrustadas en otros idiomas, siempre que el langatributo 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 :lang(en)coincidirá con cualquiera de los dos, pero también puede usarlo :lang(en-US)para apuntar solo al inglés americano.

Rouven Weßling
fuente
Gracias por tu respuesta Rouven: muy interesante y experimentaré con esto también.
smz
Bueno, Rouven, al final del día, debo decir que adopté tu método: muy elegante, ni siquiera la más mínima modificación a mi plantilla y me abrió los ojos sobre más posibilidades que ahora estoy tratando de aprovechar (módulos HTML personalizados multilingües y artículos ...). Gracias de nuevo y muchas gracias a @Bakual y Lodder también, por supuesto.
smz
Increíble. Glead para escuchar que podría ofrecer algo de inspiración.
Rouven Weßling
Esta es una respuesta brillante, ¡no tenía idea!
codinghands
5

Simplemente modificaría el archivo index.php de plantillas 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.

Bakual
fuente
Impresionante: ¡aún más fácil!
smz
Gracias Bakual: agregué tu código a mi plantilla y funciona perfectamente. "Acepté" tu respuesta.
smz
Estoy buscando hacer algo similar para agregar el alias a la clase de cuerpo. Pero no quiero anular la plantilla en caso de actualizaciones. Estaba pensando en crear un complemento del sistema, pero ¿hay alguna manera de agregar esta clase, o debería usar JavaScript?
Eoin
3

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 {…}
Seth Warburton
fuente
Gracias, @Seth! Probaré su solución de orientación. ¿Qué tal apuntar con ambos? ¿Esto hará que la solución sea aún más compatible?
smz
Eso sobrecalificaría a sus selectores o agregaría hinchazón innecesaria. El selector más corto siempre es la mejor opción, ya que mantiene baja la especificidad, lo que le permite anularla fácilmente si lo necesita. Cuanto más específico sea su selector, más difícil será anularlo, por lo que nunca debe usar ID en su CSS. Usar ambos no le daría más compatibilidad con el navegador.
Seth Warburton
Hola, @Seth! Probé tu solución pero no parece funcionar, al menos con mi Joomla! sitio. Hasta donde entiendo, la única indicación sobre el lenguaje en uso reside en la directiva <html> que dice: <html xmlns = " w3.org/1999/xhtml " xml: lang = "it-it" lang = "it -it "> en caso de italiano o <html xmlns =" w3.org/1999/xhtml "xml: lang =" en-gb "lang =" en-gb "> en caso de inglés. ¿Debería ser esto suficiente para su solución de orientación? Parece que no ...
smz
Sí, este selector se dirige al elemento html basado en el atributo, que en este caso es el idioma. Sin embargo, los atributos distinguen entre mayúsculas y minúsculas, por lo que debe usar: [lang = "en-gb"]
Seth Warburton
1

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

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

Esto generará lo siguiente como ejemplo:

<body class="en-GB">
Lodder
fuente
Descontento No puedo votar porque no tengo suficiente reputación ... :-(
smz
1
En realidad, la respuesta de @ Bakual es el mejor método. Es más rápido y más fácil;)
Lodder
1
Sí, no es necesario buscar el idioma. Ya está disponible en la plantilla :)
Bakual
No puede votar, pero puede elegir una publicación como respuesta :) Tómese el tiempo que desee (y si ninguna publicación responde a su pregunta, simplemente déjelo). Las mejores respuestas eventualmente tendrán más votos ... ¡en teoría!
TryHarder
@Bakual - Error tonto mío. La razón es que he acaba de responder una pregunta relacionada con el lenguaje de SO que no implica la plantilla lol
Lodder