Dynamische Body CSS Klassen

Mit den dynamischen Body CSS Klassen haben Sie die Möglichkeit für spezifische Seiten eine individuelle CSS Deklaration zuzuweisen.

Ist Startseite Klasse hinzufügen

Wenn aktiviert, wird die CSS-Klasse is-homepage in dem <body> Tag hinzugefügt, wenn die aktuell aktive Seite die Startseite ist.

CSS-Beispiel: body.is-homepage { background: orange; }

Itemid Klassen hinzufügen (Menüpunkt-Id)

Wenn aktiviert, werden CSS-Klassen itemid-xx (aktueller Menüpunkt) und parent-itemid-xx (übergeordnete Menüpunkte) werden in den <body> Tag hinzugefügt. Die Itemid ist in Joomla! die ID eines Menüeintrags.

CSS-Beispiel: body.item-21 #main { border-color: #000; }

Komponenten relevante Klassen hinzufügen

Wenn aktiviert, werden CSS-Klassen der aktuellen Komponenten Aktionen in dem <body> Tag hinzugefügt, wie z.B. task, view, id, etc. Sehen Sie hierzu in den Quelltext um die Klassennamen herauszufinden, da jede Komponente individuell ist. Die Klasse option-com_[komponentenname] wird immer hinzugefügt sobald diese aktiv ist.

CSS-Beispiel: body.com_content-view-article p { color: #777; padding: 0.4em; }

Kategorie Klassen hinzufügen

Wenn aktiviert, werden CSS-Klassen der aktuellen Kategorie (category-xx) und deren übergeordneten Kategorien (parent-category-xx) in den <body> Tag hinzugefügt.

CSS-Beispiel: body.category-20 { background: purple; }

Browser Klasse hinzufügen

Wenn aktiviert, wird eine CSS-Klasse mit der Browser Engine (browser-xx) in den <body> Tag hinzugefügt.

Hinweis: Funktioniert nicht wenn das System Cache Plugin von Joomla! aktiviert ist! Es wird dann nur die Klasse eingefügt die zuerst im Cache gespeichert wurde.

CSS-Beispiel: body.browser-mozilla50 div { /* irgendein Bugfix */ }

Betriebsystem Klasse hinzufügen

Wenn aktiviert, wird eine CSS-Klasse mit der Betriebsystem Plattform (platform-xx) in den <body> Tag hinzugefügt.

Hinweis: Funktioniert nicht wenn das System Cache Plugin von Joomla! aktiviert ist! Es wird dann nur die Klasse eingefügt die zuerst im Cache gespeichert wurde.

CSS-Beispiel: body.platform-win a { /* irgendein Fix */ }


Extra Tipp: Menüpunkt Seitenklasse (Pageclass) Suffix

Wenn Sie bei einem Menüpunkt eine oder mehrere Seitenklassen eingeben, fügt JYAML automatisch die CSS-Klasse mit der Syntax page-sfx-[class] in den <body> Tag ein. So können Sie für spezielle Menüpunkte über die Seitenklassen das ganze HTML-Dokument ansprechen.