Seitenklasse auch im <body> verwenden

  • Hallo zusammen,


    manchmal möchte man bei bestimmten Menüpunkten auch für die ganze Seite (also dem <body>) stylische Anpassungen machen. Im Protostar (Joomla's Standard-Frontend-Template) wird zwar im <body> die Menüpunkt-ID als Klasse hinterlegt (itemid-xxx), ich halte das jedoch für recht unflexibel.


    Stellen wir uns mal vor, wir wollen für drei Menüpunkte den kompletten Seitenhintergrund anpassen, dann müssten wir unsere CSS für alle body.itemid-xxx schreiben. Grundsätzlich noch kein Problem. Jetzt ändern wir unsere Meinung und wollen einen Menüpunkt nicht mehr, dafür aber zwei weitere. Wir müssen unsere CSS erneut anpassen, wie lästig ;)


    Meine Idee ist es die Seitenklasse dafür zu benutzen, um solche CSS-Anweisungen nur einmal zu schreiben und mit dieser Klasse dann mehrfach, ohne weitere Anpassungen, verwenden zu können.


    Jetzt wird es Technisch:


    Der folgende Code dient nur dazu die Seitenklasse auszulesen und in eine Variable zu packen, die wir dann dem <body> als Klasse mitgeben können. In welcher Datei dies am besten geschieht, hängt vom Template (Framework) ab welches verwendet wird (und das sind Einige). Deshalb gehe ich nur auf Joomla's mitgelieferte Templates ein.


    Jetzt erstmal der Code:

    PHP
    <?php...// Als erstes holen wir uns eine Instanz der Application, muss nur einmal im Dokument gemacht werden$app = JFactory::getApplication();// Als nächstes holen wir uns vom aktuellen Menüpunkt die Seitenklasse und legen Sie in einer Variable ab$pageclass_sfx = $app->getParams()->get('pageclass_sfx', '');


    Die Variable $pageclass_sfx beinhaltet jetzt unsere Seitenklasse. Je nach Templateaufbau ist das Attribut class bereits im <body> vorhanden oder nicht.


    Im Protostar wird das Attribut class bereits im <body> verwendet, hier reicht es wenn wir uns einfach dranhängen und wie folgt ergänzen (templates/protostar/index.php:(

    PHP
    ...<body class="site <?php echo $option   . ' view-' . $view   . ($layout ? ' layout-' . $layout : ' no-layout')   . ($task ? ' task-' . $task : ' no-task')   . ($itemid ? ' itemid-' . $itemid : '')   . ($params->get('fluidContainer') ? ' fluid' : '')   . ($this->direction === 'rtl' ? ' rtl' : '')   . (!empty($pageclass_sfx) ? ' ' . $pageclass_sfx : '');?>">...


    Im Beez-Template wird das Attribute class noch nicht im <body> verwendet, hier sieht der Code wie folgt aus (templates/beez3/index.php:(

    PHP
    ...
    <body id="shadow"<?php echo (!empty($pageclass_sfx) ? ' class="' . $pageclass_sfx . '"': ''); ?>>
    ...


    An dieser Stelle sollte vielleicht noch erwähnt werden:
    Nicht mit den Original-Templates arbeiten, besser eine Kopie erstellen und damit arbeiten (siehe z.Bsp. Joomlaeigene Templates anpassen/ändern (z.B. Protostar, Beez3). Vorher eine Template-Kopie anlegen!)


    Jetzt können wir in unserer CSS-Datei die Seitenklasse verwenden body.seitenklasse { .... } und unserer Gestaltung freien Lauf lassen :)


    Über Feedback würde ich mich sehr freuen, und jetzt viel Spass mit euren neuen Möglichkeiten
    Gruß Guido