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