wake-up-neo.net

Como adicionar uma classe CSS a <body>, dependendo do idioma ativo

Estou criando um site multilíngue, onde gostaria de basear alguns dos meus estilos no idioma ativo.

Pense algo como isto:

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

Alguém sabe de uma extensão capaz de fazer isso (por exemplo, adicionar uma classe à tag, dependendo do idioma ativo)?

extensions
8
smz

Na verdade, existe uma solução mais fácil para o seu problema. Qualquer modelo sensato (incluindo todos os modelos que acompanham o Joomla CMS) definirá o atributo lang no elemento HTML. Isso permite que você use o pseudo-seletor CSS :lang().

Seu exemplo seria assim:

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

Isso tem algumas vantagens. Para iniciantes, ele funcionará independentemente do modelo ou mesmo com outras soluções além do Joomla, como é feito no navegador.

Também funcionará bem com partes incorporadas em outros idiomas, desde que o atributo lang esteja definido corretamente. Por exemplo:

<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 fim, o Joomla não apenas produz o idioma, mas o local. Portanto, seu site pode usar en-GB, outro en-US e o modelo refletirá isso. Usar :lang(en) corresponderá a ambos, mas você também pode usar :lang(en-US) para segmentar apenas o inglês americano.

14
Rouven Weßling

Gostaria apenas de modificar o arquivo index.php de modelos e adicionar a classe diretamente lá.

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

Atribuiria o idioma atual como classe à tag body.

5
Bakual

Uma pequena coisa a acrescentar em relação ao método de Rouven; o suporte ao navegador é melhor para seletores de atributos do que para o pseudo-seletor de idioma; portanto, você pode considerar usar algo parecido com isto para direcionar seus estilos:

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

No index.php do seu modelo, você pode substituir o atual <body> marque com o seguinte:

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

Isso produzirá o seguinte como exemplo:

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