Ein schlankes Print-CSS
weblica verwendet per Vorgabe das Print-CSS des im Projekt gesetzten Designs. Dieses Print-CSS verändern das Layout einer Seite teilweise deutlich. Wenn Ihnen das nicht gefällt, verwenden Sie einfach Ihr eigenes Print-CSS. Damit Sie hierbei nicht einen enormen Aufwand treiben müssen, wirken Ihre CSS-Anweisungen für das Print-CSS auf der Basis des Haupt-CSS des verwendeten Designs. So bleibt das Layout für den Ausdruck grundsätzlich erhalten und Sie können z.B. gezielt Elemente ausschalten.
Den dazu nötigen Code hinterlegen Sie im CSS-Code für Ihr Projekt, siehe hierzu:
Eigenen CSS-Code für ein Projekt hinterlegen.
Nachstehend finden Sie ein paar Beispiele für Ihr eigenes Print-CSS.
Eine Seite unverändert ausdrucken
Um eine Seite so auszudrucken, wie sie auf dem Schirm erscheint, reicht es, auf der Registerkarte eine Kommentare-Zeile zu schreiben. Beachten Sie hierbei, dass die Browser Hintergrund-Bilder von sich aus nicht ausdrucken - das spart Tinte und verbessert die Lesbarkeit. Nachstehend ein Beispiel:
/* Drucken wie auf dem Bildschirm */
Die Navigation ausblenden
Um die Navigation im Ausdruck zu verbergen, deaktivieren Sie die Anzeige des entsprechenden Elements:
#mainNav, #horizontalNav, #verticalNav {
display: none;
}
Den Breadcrumb "Sie sind hier" ausblenden
Auch den Breadcrumb können Sie auf die gleiche Art und Weise ausschalten:
#breadcrumb {
display: none;
}
Suchfeld und Schnellzugriffe ausblenden
Analog gehen Sie für die Schnellzugriffe und das Suchfeld vor:
#shortcuts, #searchBar, #search, #miscellaneous {
display: none;
}
Die linke und / oder rechte Spalte ausblenden
Es wird Sie nicht überraschen, dass Sie die linke und rechte Spalte im Ausdruck auf die gleiche Art und Weise ausschalten können:
#leftContent, #rightContent {
display: none;
}
Wenn Sie die linke und rechte Spalte ausschalten, möchten Sie wahrscheinlich, dass der Hauptinhalt den dadurch vorhandenen Platz auch nutzt. Also setzen wir für den Hauptinhalt eine entsprechende Anweisung:
#centerContent {
width: 98%;
margin: 0;
}
Zusammengeasst sieht das Print-CSS dann so aus:
#mainNav, #horizontalNav, #verticalNav, #breadcrumb,
#shortcuts, #searchBar, #search,
#miscellaneous, #leftContent, #rightContent {
display: none;
}
#centerContent {
width: 98%;
margin: 0;
}