Seite durchsuchen

Manchmal kann es gewünscht sein, innerhalb eines Templates seitenabhängiges CSS für gleichartige Selektoren zu verwenden. Das ist zum Beispiel auf der WEBXO-Seite der Fall, wo der oberste Seiten-Container auf der Startseite den gesamten Bildschirm ausfüllen soll, während für alle Unterseiten Abstände um ihn herum gewünscht waren, wie auf dem unteren Bild zu sehen.



Wir wollen also eigene, seitenabhängige CSS-Regeln für unsere einzelnen Joomla-Seiten definieren, um so eine seitenindividuelle Gestaltung zu erreichen. Dafür benötigt unser Body-Tag eine individuelle CSS-Klasse, über die wir unser Element ansprechen können, und zwar nur dann, wenn die Seitenklasse im Body-Tag vorhanden ist.
Joomla bietet über die Einstellungen der Menü-Einträge die Möglichkeit, Seitenklassen zu vergeben (unter Eintrag bearbeiten > Seitenanzeige > Seitenklasse), was aber nur die halb Miete ist, denn die Seitenklasse muss auch im Body-Tag stehen, um als globaler Selektor verwendet werden zu können. Standardmäßig schreibt Joomla diese Klasse aber in ein DIV-Tag nahe des Artikelbereichs der Seite, was nicht besonders hilfreich ist.
Um die Seitenklasse an das Body-Tag anhängen zu lassen, reicht aber eine einfache Modifikation der index.php im verwendeten Templates aus. Die folgende Lösung stammt aus dem Stackexchange-Forum (http://joomla.stackexchange.com/questions/5398/adding-custom-css-styling-on-some-of-my-pages/5399#5399) und bietet eine elegante Lösung des Problems.

Zunächst wird der folgende Code-Block vor die <!DOCTYPE HTML>-Deklaration der index.php des Templates gesetzt:

<?php
  $app = JFactory::getApplication();
  $menu = $app->getMenu()->getActive();
  $pageclass = '';

  if (is_object($menu))
    $pageclass = $menu->params->get('pageclass_sfx');
?>
Als nächstes suchen wir die Stelle der index.php, an der das Body-Tag geöffnet wird und erweitern es um den folgenden PHP-Code:

<?php echo $pageclass ? htmlspecialchars($pageclass) : 'default'; ?>
In unserem Fall hatte das öffnende Body-Tag in der index.php-Datei kein "Class"-Attribut, sodass wir das Tag folgendermaßen erweitert haben:

<body id="s5_body" class="<?php echo $pageclass ? htmlspecialchars($pageclass) : 'default'; ?>">
Voila, auf diese Weise erhält jede aufgerufene Seite als Klassenattribut die Seitenklasse, die wir in ihren Menüeinstellungen unter "Seitendarstellung" eingetragen haben, und Elemente können ab sofort seitenindividuell adressiert werden. Und alle Seiten, für die wir keine individuelle Seitenklasse eintragen, erhalten die CSS-Klasse "default" und können auf diese Weise ebenfalls gemeinsam angesprochen werden.

Natürlich kann das Code-Beispiel in der index-php, abhängig vom verwendeten Template, etwas anders ausfallen. Die grundlegende Methodik bleibt jedoch gleich und ist auch mit wenig Coding-Kenntnissen schnell umgesetzt. Wir freuen uns über Kommentare, Fragen und Anregungen im Kommentarbereich.

Viel Spaß beim Anpassen!