So fügen Sie <body> abhängig von der aktiven Sprache eine CSS-Klasse hinzu

8

Ich entwerfe eine mehrsprachige Site, auf der ich einige meiner Stile auf die aktive Sprache stützen möchte.

Denken Sie so etwas:

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

Kennt jemand eine Erweiterung, die dazu in der Lage ist (dh je nach aktiver Sprache eine Klasse zum Tag hinzufügen)?

extensions smz
quelle
1
Nur ein kleiner Punkt; In diesem Beispiel ändern Sie den Inhalt und nicht den Stil basierend auf der Sprache. Sie können dies natürlich schon sehr einfach in Joomla tun, ohne dass Sie ein CSS benötigen.
Seth Warburton

Antworten:

14

Es gibt tatsächlich eine einfachere Lösung für Ihr Problem. Jede vernünftige Vorlage (einschließlich aller mit dem Joomla CMS gelieferten Vorlagen) legt das langAttribut für das HTML-Element fest. Auf diese Weise können Sie den CSS- :lang()Pseudo-Selektor verwenden.

Ihr Beispiel würde so aussehen:

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

Dies hat einige Vorteile. Für den Anfang funktioniert es unabhängig von der Vorlage oder sogar mit anderen Lösungen als Joomla, da alles im Browser erledigt wird.

Es funktioniert auch gut mit eingebetteten Teilen in anderen Sprachen, solange das langAttribut richtig eingestellt ist. Zum Beispiel:

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

Schließlich gibt Joomla nicht nur die Sprache, sondern auch das Gebietsschema aus. Ihre eine Site verwendet möglicherweise en-GB, eine andere en-US und die Vorlage spiegelt dies wider. Die Verwendung entspricht :lang(en)entweder, aber Sie können auch :lang(en-US)nur amerikanisches Englisch verwenden.

Rouven Weßling
quelle
Danke für deine Antwort Rouven: sehr interessant und ich werde auch damit experimentieren.
smz
Nun, Rouven, am Ende des Tages muss ich sagen, dass ich Ihre Methode übernommen habe: sehr elegant, nicht einmal die geringste Änderung an meiner Vorlage, und es öffnete mir die Augen für mehr Möglichkeiten, die ich jetzt nutzen möchte (mehrsprachige benutzerdefinierte HTML-Module) und Artikel ...). Nochmals vielen Dank und natürlich auch vielen Dank an @Bakual und Lodder!
smz
Genial. Glead zu hören, ich könnte etwas Inspiration anbieten.
Rouven Weßling
Dies ist eine brillante Antwort, ich hatte keine Ahnung!
Codinghands
5

Ich würde einfach die Vorlage index.php ändern und die Klasse direkt dort hinzufügen.

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

Würde dem Body-Tag die aktuelle Sprache als Klasse zuweisen.

Bakual
quelle
Genial: noch einfacher!
smz
Danke Bakual: Ich habe Ihren Code zu meiner Vorlage hinzugefügt und es funktioniert perfekt. Ich habe Ihre Antwort "akzeptiert".
smz
Ich möchte etwas Ähnliches tun, um den Alias ​​zur Körperklasse hinzuzufügen. Bei Aktualisierungen möchte ich die Vorlage jedoch nicht überschreiben. Ich habe darüber nachgedacht, ein System-Plugin zu erstellen. Gibt es jedoch eine Möglichkeit, diese Klasse hinzuzufügen, oder sollte ich nur JavaScript verwenden?
Eoin
3

Eine kleine Sache, die man in Bezug auf Rouvens Methode hinzufügen sollte; Die Browserunterstützung ist für Attributselektoren besser als für den Sprachpseudo-Selektor. Daher sollten Sie in Betracht ziehen, so etwas für Ihre Stile zu verwenden:

[lang="en-GB"] .artist {…}
Seth Warburton
quelle
Danke, @Seth! Ich werde Ihre Ziellösung ausprobieren. Wie wäre es mit beiden zielen? Wird die Lösung dadurch noch kompatibler?
smz
Das würde entweder Ihre Selektoren überqualifizieren oder unnötiges Aufblähen hinzufügen. Der kürzeste Selektor ist immer die beste Wahl, da er die Spezifität niedrig hält und Sie ihn bei Bedarf leicht überschreiben können. Je spezifischer Ihr Selektor ist, desto schwieriger ist es, ihn zu überschreiben. Deshalb sollten Sie niemals IDs in Ihrem CSS verwenden. Wenn Sie beide verwenden, erhalten Sie keine Browserkompatibilität mehr.
Seth Warburton
Hallo, @Seth! Ich habe Ihre Lösung ausprobiert, aber es scheint nicht zu funktionieren, zumindest mit meinem Joomla! Seite? ˅. Soweit ich weiß, liegt der einzige Hinweis auf die verwendete Sprache in der Direktive <html>, die lautet: <html xmlns = " w3.org/1999/xhtml " xml: lang = "it-it" lang = "it -it "> bei Italienisch oder <html xmlns =" w3.org/1999/xhtml "xml: lang =" en-gb "lang =" en-gb "> bei Englisch. Sollte dies für Ihre Targeting-Lösung ausreichen? Es scheint nicht so ...
smz
Ja, dieser Selektor zielt auf das HTML-Element basierend auf dem Attribut ab, das in diesem Fall die Sprache ist. Bei Attributen wird jedoch zwischen Groß- und Kleinschreibung unterschieden, sodass Sie Folgendes verwenden müssen: [lang = "en-gb"]
Seth Warburton
1

In der index.php Ihrer Vorlage können Sie das aktuelle <body>Tag durch Folgendes ersetzen :

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

Dies gibt Folgendes als Beispiel aus:

<body class="en-GB">
Lodder
quelle
Leider kann ich Sie nicht abstimmen, da ich nicht genug Ruf habe ... :-(
smz
1
Eigentlich ist @ Bakuals Antwort die bessere Methode. Es ist schneller und einfacher;)
Lodder
1
Ja, Sie müssen die Sprache nicht abrufen. Es ist bereits in der Vorlage verfügbar :)
Bakual
Sie können nicht abstimmen, aber Sie können einen Beitrag als Antwort auswählen :) Nehmen Sie sich so lange Zeit, wie Sie möchten (und wenn kein Beitrag Ihre Frage beantwortet - lassen Sie ihn einfach). Die besten Antworten werden schließlich die meisten Stimmen haben ... theoretisch!
TryHarder
@ Bakual - Dummer Fehler von mir. Grund dafür ist, dass ich gerade eine sprachbezogene Frage zu SO beantwortet habe, die nicht die Vorlage enthält lol
Lodder