So schreiben Sie Hintergrundbilder der Navigation in eine CSS-Datei

Veröffentlichungsdatum: 19. April 2010
Änderungsdatum: 11. Januar 2012

navigation css hintergrundbild hintergrundgrafik background-image

Dieser Artikel beschreibt, wie Sie es einem Redakteur ermöglichen, Hintergrundbilder über die Pflege eines Navigationspunktes zu definieren, die dynamisch in eine CSS-Datei geschrieben werden.

Ein Redakteur pflegt Navigationspunkte mit Hintergrundbild und Hover-Hintergrundbild. Diese sollen nicht über Javascript gewechselt werden und auch nicht direkt in der Seite als Stylesheet-Formatdefinitionen eingebunden sein.

Nachfolgend wird beschrieben, wie Sie dies über das PHP-Framework umsetzen und so eine CSS-Datei generieren, falls der Benutzer angemeldet ist. Die generierte CSS-Datei wird im Head des Ausgabetemplates eingebunden.

Erweitern bzw. überarbeiten Sie die Pflegemaske für die Navigationsverwaltung (Navigationspunkte), damit Sie ein Hintergrundbild und das dazugehörige Mouseover-Hintergrundbild (Hover) bearbeiten können. Zusätzlich legen Sie ein Navigationstemplate an (z.B. CSS.wNavigation.php), das die dynamische CSS-Datei generiert.
Im Ausgabetemplate (z.B. standard.wDocument.php) fügen Sie innerhalb des Head-Bereiches den unten genannten Scriptcode ein, der dafür sorgt, dass bei einem angemeldeten Benutzer die CSS-Datei auf Basis der hinterlegten Hintergrundbilder dynamisch geschrieben wird.

Die Pfade und CSS-Klassen passen Sie Ihrem Projekt entsprechend an.

Beispiel: Auszug aus /deGlobal/wGlobal/layout/editor/navigation/attributes.wEditorNavpoint.php

<?php $version="1.0"; $encoding="UTF-8"; ?>
<?php exit; ?>
<wEditorNavpoint version="1.0" xmlns:de="de" xmlns:en="en" xmlns:wsl="http://weblication.de/5.0/wsl">
  ...
  <attribute name="img" editor="file" value="" caption="Hintergrundbild" editable="1"/>
  <attribute name="imgHover" editor="file" value="" caption="Hintergrundbild Hover" editable="1"/>
  ...
</wEditorNavpoint>

Beispiel: Auszug aus /deGlobal/wGlobal/layout/templates/navigations/CSS.wNavigation.php

<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:wsl="http://weblication.de/5.0/wsl" xmlns:wd="http://weblication.de/5.0/wd" xmlns:php="http://php.net/xsl" exclude-result-prefixes="wd wsl php" version="1.0">
  <xsl:output method="xml" indent="no" omit-xml-declaration="yes" encoding="UTF-8"/>
  <xsl:param name="wHostURL"/>
  <xsl:param name="wDocumentRoot"/>
  <xsl:param name="wDocumentPath"/>
  <xsl:param name="wDocumentDir"/>
  <xsl:param name="wDocumentQuery"/>
  <xsl:param name="wIsInEditor"/>
  <xsl:param name="wUsertype"/>
  <xsl:param name="wIsLoggedIn"/>
  <xsl:param name="wSessionLanguage"/>
  <xsl:param name="wUserLanguage"/>
  
  <xsl:template match="/wNavigation"> 

  <!-- Schleife über Navigationspunkte des ersten Levels -->
  <xsl:for-each select="navPoint">
    <xsl:if test="@img != ''">
/* Diese CSS-Datei wird dynamisch generiert! */
#navpoint_<xsl:value-of select="@id" />       {background-image:url(<xsl:value-of select="@img" />);}
#navpoint_<xsl:value-of select="@id" />:hover {background-image:url(<xsl:value-of select="@imgHover" />);}
    </xsl:if>
  </xsl:for-each>

  </xsl:template>

</xsl:stylesheet>

Beispiel: Auszug aus /deGlobal/wGlobal/layout/templates/navigations/main.wNavigation.php

...
<!--
  Das verwendete Navigationstemplate (z.B.: full.wNavigation.php oder main.wNavigation.php)
  muss für den A-Tag der entsprechenden Navigationspunkte und -Levels das id-Attribut definiert haben:
-->
...
  <a class="navLevel1OpenSelected" id="navpoint_{@id}" title="{@title}" href="...
...

Beispiel: Auszug aus /deGlobal/wGlobal/layout/templates/standard.wDocument.php

<head>
...
  <xsl:if test="$wIsLoggedIn">
    <wsl:php>         
      $navCSSStr = wNavigation::createNavigationHTML('/de/wGlobal/content/navigations/standard.wNavigation.php', '/deGlobal/wGlobal/layout/templates/navigations/CSS.wNavigation.php', 'sitemap');
      wReadWrite::writeFile($_SERVER['DOCUMENT_ROOT'].'/deGlobal/wGlobal/layout/styles/navIcons.css', $navCSSStr);
    </wsl:php>
  </xsl:if>
  <link rel="stylesheet" type="text/css" href="/deGlobal/wGlobal/layout/styles/navIcons.css"/>
...
</head>
PHP-Framework-Funktion: wReadWrite::writeFile
FAQs are only visible for Weblication ai search and editors!
Wie lassen sich Hintergrundbilder der Navigation ohne JavaScript in CSS abbilden?
Über eine dynamisch generierte CSS-Datei: Die im Redaktionssystem gepflegten Navigationspunkte erhalten Hintergrundbild und Hover-Hintergrundbild, und anhand dieser Daten wird per PHP eine CSS-Datei erzeugt. Diese wird dann im Head des Ausgabetemplates eingebunden. So erfolgt der Wechsel (Hover) über CSS statt per JavaScript.
Welche Erweiterungen müssen an der Pflegemaske für Navigationspunkte vorgenommen werden?
Die Pflegemaske (Navigationsverwaltung) muss um zwei Felder erweitert bzw. überarbeitet werden, damit Redakteure bearbeiten können: 1) ein Hintergrundbild und 2) das dazugehörige Mouseover-/Hover-Hintergrundbild (img und imgHover).
Wie wird ein Navigationstemplate angelegt, das die dynamische CSS-Datei generiert?
Legen Sie ein Navigationstemplate (z.B. CSS.wNavigation.php wie im Beispiel) an, das die CSS-Regeln aus den gepflegten Attributen erzeugt. Es erstellt u.a. Regeln für den Normalzustand und den :hover-Zustand, basierend auf img und imgHover.
Wofür steht der XSL/PHP-Template-Ansatz im Beispiel CSS.wNavigation.php?
Im Beispiel wird ein Template verwendet, das über die Navigationspunkte iteriert und bei gesetztem Hintergrundbild CSS-Regeln ausgibt. Dabei wird für jeden Navigationspunkt eine CSS-Definition erzeugt, die das passende Bild für background-image setzt und für :hover das Hover-Bild verwendet.
Warum muss das Navigationstemplate dem A-Tag der Navigationspunkte ein id-Attribut geben?
Damit die generierte CSS-Datei die richtigen Elemente selektieren kann. Im Beispiel muss das Template für den <a>-Tag das id-Attribut definieren, etwa id="navpoint_{@id}". Die CSS-Regeln beziehen sich dann auf diese id (z.B. #navpoint_<id> und #navpoint_<id>:hover).
Wann wird die CSS-Datei generiert und eingebunden?
Die CSS-Datei wird nur generiert, wenn der Benutzer angemeldet ist (im Beispiel: <xsl:if test="$wIsLoggedIn">). Anschließend wird die erzeugte Datei im Head des Ausgabetemplates als Stylesheet geladen.
Wie kann die CSS-Datei im Ausgabetemplate (z.B. standard.wDocument.php) dynamisch geschrieben werden?
Innerhalb des Head-Bereichs fügen Sie einen Scriptcode ein, der bei eingeloggten Benutzern eine CSS-Datei generiert und schreibt (im Beispiel mit wNavigation::createNavigationHTML und wReadWrite::writeFile). Danach wird die Datei per <link rel="stylesheet" ...> eingebunden.
Was müssen Sie beim Übernehmen der Beispiele anpassen?
Passen Sie insbesondere die Pfade und CSS-Klassen bzw. Selektoren an Ihr Projekt an. Außerdem müssen Dateinamen/Template-Pfade (z.B. Navigationstemplate und CSS-Template) sowie der Zielpfad der generierten CSS-Datei korrekt gesetzt werden.
Wie sehen die erzeugten CSS-Regeln für Hintergrundbild und Hover typischerweise aus?
Für jeden Navigationspunkt mit gesetztem img werden zwei Regeln erzeugt: 1) eine Regel für den normalen Zustand mit background-image:url(img) und 2) eine Regel für den Hover-Zustand mit background-image:url(imgHover) im :hover-Selektor. Im Beispiel geschieht dies über #navpoint_{id} und #navpoint_{id}:hover.