Formatierung der Druckansicht beeinflussen

11. Jul 2012

Die Ausgabe der Webseiten für die Druckvorschau können Sie über das Drucktemplate und die separate CSS-Datei beeinflussen.

Um Ihre Webseiten für den Ausdruck von Webseiten zu optimieren, passen SIe das verwendete Drucktemplate und die CSS-Datei an.

Fall: Projekt mit dunklem Hintergrund und weisser Schriftfarbe

Im Beispielfall nehmen wir folgendes an:

Ihr Projekt ist mit dunklem Hintergrund (Hintergrundbild oder Hintergrundfarbe) und weisser Schriftfarbe umgesetzt. Standardmässig wird die BASE so ausgeliefert, dass die CSS-Datei für die Druckansicht die Schriftfarbe nicht gesondert definiert und somit von der zentralen CSS-Datei (design.css) übernimmt.

Sie wollen nun den Ausdruck mit schwarzer Schriftfarbe auf weißem Hintergrund haben.

Lösung:
Definieren Sie über die print.css für das body-Tag (evtl. auch andere CSS-Klassen) eine schwarze Schriftfarbe (color:#000000). Die print.css wird im Drucktemplate (print.wDocument.php) nach der zentralen CSS-Datei (design.css) eingelesen und übersteuert somit die dort hinterlegte Schriftfarbe.

Beispiel: Inhalt des Ausgabetemplates /IhrGlobalesProjekt/wGlobal/layout/templates/print.wDocument.php

<?php $version="1.0"; $encoding="UTF-8"; ?>
<?php exit; ?>
<xsl:stylesheet xmlns="http://www.w3.org/1999/xhtml" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:xslIfIsInEditor="http://www.w3.org/1999/XSL/TransformIfIsInEditor" xmlns:wslPre="http://weblication.de/5.0/wsl" xmlns:wslPost="http://weblication.de/5.0/wsl" xmlns:wslEditorPre="http://weblication.de/5.0/wsl" 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="xslIfIsInEditor wd wslPre wsl php" version="1.0">
<!-- Source: base.standard, 001.000.498.000 (2012-07-09 10:58:27)-->
  <xsl:output method="xml" indent="yes" omit-xml-declaration="no" encoding="UTF-8"/>
                            
  <!-- System-Parameter einbinden-->
  <xsl:include href="$XSLTPRE[wDocumentRoot]/baseGlobal/wGlobal/layout/templates/misc/standard.wParams.php"/>
    
  <!-- Zentrale Funktionen, Templates und Skripte einbinden -->   
  <xsl:include href="$XSLTPRE[wDocumentRoot]/baseGlobal/wGlobal/layout/templates/misc/includes.global.php"/>  

  <!-- Objekte-Templates dynamisch einbinden -->   
  <wslPre:includeXsltObjectsProject project="/baseGlobal" useIndex="0"/>  
  
  <!-- Elemente-Templates dynamisch einbinden -->
  <wslPre:includeXsltItemsProject project="/baseGlobal" useIndex="0"/>
  
  <!-- Meta-Maske einbinden, falls die Seite im Editor aufgerufen wird -->
  <xslIfIsInEditor:include href="$XSLTPRE[wDocumentRoot]/baseGlobal/wGlobal/layout/templates/editmasks/standard.metadata.php"/>

  <!-- Definition der Darstellung -->
  <xsl:template match="/wd:document">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="{$wLanguageProject}" lang="{$wLanguageProject}">
      <head>             
        <meta name="Robots" content="noindex, nofollow"/>           
        <!-- HTML-Kopf -->
        <xsl:call-template name="htmlHeader"/>
        <link rel="stylesheet" type="text/css" href="/baseGlobal/wGlobal/layout/styles/print.css"/> 
        <meta name="Robots" content="noindex, nofollow"/>
      </head> 
      <body>      
        <!-- Hier wird die Maske zur Pflege der Metadaten eingebunden, falls man sich im Editor befindet -->
        <xsl:if test="$wIsInEditor = '1'">
          <xsl:call-template name="templateEditor"/>
        </xsl:if>

        <div id="blockMain">
          <div id="blockMainInner">
                  
            <div id="blockTop">           
                       
              <!-- Logo -->
              <xsl:call-template name="logo" wd:pathTemplate="misc/includes.global.php#logo"/>  
                  
              <button id="printButton" onclick="window.print()"><xsl:value-of select="php:functionString('wTexts::getText', 'print')" /></button>                 
                          
            </div>
            
  
            <div id="blockContent"><xsl:if test="wd:extension/wd:object/@type = 'start'"><xsl:attribute name="id">blockContentStart</xsl:attribute></xsl:if>
              <div id="blockContentInner">   
                <!-- Inhaltegruppe 1 (content1) des Objektes (der Seite)-->                       
                <xsl:call-template name="content1"/>         
                <div class="clearBoth"> </div>
              </div>
            </div>                      
          </div>
          
          <div class="clearBoth"> </div>                                   
          <div id="blockBottom">
            <div id="blockBottomInner">
                <!-- Globale Inhalte unten-->
                <xsl:call-template name="content5Global" wd:pathTemplate="misc/includes.global.php#content5Global"/>
            </div>
          </div>             
        </div>
      </body>
    </html>
  </xsl:template>

</xsl:stylesheet>

Beispiel: Inhalt der CSS-Datei /IhrGlobalesProjekt/wGlobal/layout/styles/print.css

/*
////////////////////////////////////////////////////////////////
//
// Styles für die Druckansicht
//
////////////////////////////////////////////////////////////////
*/

/* Formatierung von HTML-Elementen */

html                   {height:auto}
body                   {color:#000000;margin:0;padding:0;font-family:Arial, Sans-serif, Helvetica;font-size:12px;background:none}

#logo                  {left:0;top:0}
#printButton           {position:absolute;right:0;margin:0}

/* Beim Ausdruck wird der Button nicht angezeigt */
@media print{
  #printButton         {display:none}
}

/* Grundgerüst */
#blockMain             {margin:0 auto;margin-top:20px;margin-bottom:20px;width:520px;padding:0;background:none}
#blockMainInner        {margin:0;padding:0;background:none}

#navigationMeta        {display:none}
#navigationFullLayer   {display:none}
#navigationFull        {display:none}
#navigationSubLayer    {display:none}
#navigationSub         {display:none}
#searchBox             {display:none}
#languageSelector      {display:none}
#blockBefore           {display:none}
#blockLeft             {display:none}
#blockRight            {display:none}

#blockContentStart     {width:520px;margin:20px 20px 0 0;background:none}
#blockContent          {width:520px;margin:20px 20px 0 0;background:none}
#blockContentInner     {margin:0}

#blockBottom           {width:520px}                       
#blockBottomInner      {margin:0;text-align:right}

.elementLink .back     {display:none}
  
  

Weitere Anpassungen nehmen Sie entsprechend vor. So können Sie auch die HTML-Struktur über das Ausgabetemplate komplett anpassen.

Entwicklerbereich Weblication® CMS - © Scholl Communications AG