Diese Rubrik wurde im Oktober 2013 eingeführt.
Ausbauvorschläge werden gerne entgegengenommen.
Ausbauvorschläge werden gerne entgegengenommen.
Hauptkapitel Codeschnipsel
Webdesign Tools
mit XML-Sitemap-Generator
Codeschnipsel Startseite
Codeschnipsel Einführung
01 Zeichen und Symbole
02 Schrift-Formatierungen
03 Seitenelemente gestalten
04 Abstände aller Art
05 Positionierung Elemente
06 Links und Navigation
07 Linien, Rahmen und Farben
08 Bildergalerien und Bilder
21 Struktur HTML-Dokument
22 Meta-Elemente im head
41 Javascript und Effekte
46 Gadgets aller Art
51 Weblica-Interna
52 Weblica-Felder
53 Tipps zu Weblica
54 mehrsprachige Websites
71 Infoboxen
72 Player einbinden
73 Fehlerseite Statuscode 404
74 Emailadresse verschlüsseln
91 Serverkonfiguration htaccess
Einbau-Orte Codeschnipsel
Vorgehen beim Einbau
Anpassungen beim Einbau
Einbau-Beispiele
Informationsquellen
Inhaltsverzeichnis Codeschnipsel
zurück
mit XML-Sitemap-Generator
Codeschnipsel Startseite
Codeschnipsel Einführung
01 Zeichen und Symbole
02 Schrift-Formatierungen
03 Seitenelemente gestalten
04 Abstände aller Art
05 Positionierung Elemente
06 Links und Navigation
07 Linien, Rahmen und Farben
08 Bildergalerien und Bilder
21 Struktur HTML-Dokument
22 Meta-Elemente im head
41 Javascript und Effekte
46 Gadgets aller Art
51 Weblica-Interna
52 Weblica-Felder
53 Tipps zu Weblica
54 mehrsprachige Websites
71 Infoboxen
72 Player einbinden
73 Fehlerseite Statuscode 404
74 Emailadresse verschlüsseln
91 Serverkonfiguration htaccess
Einbau-Orte Codeschnipsel
Vorgehen beim Einbau
Anpassungen beim Einbau
Einbau-Beispiele
Informationsquellen
Inhaltsverzeichnis Codeschnipsel
zurück
Notationskonventionen
Code ist in in
Die Namen von Weblica- und Ressourcenfeldern beginnen mit dem $-Zeichen. Dieses ist hier so hervorgehoben: $. Beim Verwenden von Code müssen die Ressourcenfelder ersetzt werden.
Lucida Console schwarz oder in Courier schwarz notiert, anpassungsbedürftige Teile sind farbig.Die Namen von Weblica- und Ressourcenfeldern beginnen mit dem $-Zeichen. Dieses ist hier so hervorgehoben: $. Beim Verwenden von Code müssen die Ressourcenfelder ersetzt werden.
W3C-Konformität
Unser Code ist standardkonform:
Seite erstellt / geändert
e 25.10.13 / update
Codeschnipsel 53: Tipps zu Weblica
In der Rubrik "Tipps und Tricks zu Weblica" werden Codeschnipsel und Empfehlungen dokumentiert,
- die Weblica-spezifisch sind und in keine der anderen Rubriken passen,
- oder die möglicherweise keinen Bestand haben, weil ein Verhalten von Weblica in einer der nächsten Versionen geändert wird.
Die Rubrik wurde im Oktober 2013 eingeführt und wird nach und nach ausgebaut.
- 1 Im Aufmacher im letzten Eintrag den Abstand unten vergrössern
- 2 Die Spaltenbreiten im Box-Absatz anpassen
- 3 Das für eine Bildergalerie am besten passende Thumbnail-Format bestimmen
- 4 In der Lightbox-Bildergalerie mit der Tastatur navigieren
- 5 Bilder zuschneiden oder von Weblica automatisch skalieren lassen?
- 6 Die Descriptions (Seitenbeschreibungen) aller Seiten anzeigen
- 7 Bedingter Trennstrich in Description und RSS-Feed beissen sich
- 8 Nicht mehr editierbare Tabelle retten
- 9 Der Betreff im Email aus dem Weblica-Kontaktformular ist leer
- 10 Senderadresse im Kontaktformular
- 11 Text oder Bilder im Ticker-Stil (Ticker-Style)
- 12 Klappbare Absatztitel und Klapp-Symbole formatieren
- 13 Was tun, wenn Seitenelemente in Cyclern im Boxabsatz ruckeln?
- 14 Drucklayout im Design responsive_two anpassen
Im Aufmacher im letzten Eintrag den Abstand unten vergrössern
Im einspaltigen Aufmacher-Absatz fügt Weblica in allen Einträgen ausser dem letzten am Schluss eine Leerzeile ein. Das wird erst dann sichtbar, wenn man den Aufmacher mit einem farbigen Hintergrund versieht, wie z. B. in der Inhaltsübersicht der Hauptseite der Codeschnipsel.
Das sieht nicht gut aus, aber mit ein bisschen CSS kann man den Mangel korrigieren:
Mit der Pseudo-Klasse
Das sieht nicht gut aus, aber mit ein bisschen CSS kann man den Mangel korrigieren:
<style type="text/css">
/* Inhaltsübersichtstabelle formatieren =============== */
.teaserParagraph td {
margin-bottom: 0em !important;
padding: 0.6em 0.4em 0 0.5em !important;
border-top: 1px solid #FFFFFF;
border-bottom: 1px solid #D6D6D6; }
/* Abstand unten letztes Tabellenelement korrigieren == */
.teaserParagraph tbody > tr:last-child > td {
padding-bottom: 1.2em !important; }
</style>Mit der Pseudo-Klasse
:last-child (CSS3) kann man das letzte Element direkt ansprechen. Im Beispiel wird der untere Innenabstand nur des letzten Elements des Inhaltsverzeichnisses auf 1.2em vergrössert.Die Spaltenbreiten im Box-Absatz anpassen
Standardmässig sind die Spalten eines Boxabsatzes gleich breit. Das ist nicht immer erwünscht. Wie man die Spaltenbreiten im Boxabsatz anpasst, kann man beim Weblica-Team in der Entwicklerpost vom April 2014 abgucken:
zweispaltiger Boxabsatz mit unterschiedlichen Spaltenbreiten.
Die linke Spalte (ein Slider) ist 20 % breit, die rechte Spalte 78 %.
Die Breitenanpassungen für die beiden div-Ids der linken und der rechten Spalte werden so vorgenommen:
So einfach geht das. Einen Slider in die linke Spalte zu packen, ist eine geniale Idee.
Ergänzung:
Hat man mehrere Zeilen in einem Boxabsatz, muss man die Breitenkorrektur für jeden Absatz vornehmen. Wem das zu aufwendig ist, der kann auch die Spaltenbreiten im zweispaltigen Boxabsatz anpassen:
Nachteil: der Internet Explorer verstehts nicht.
zweispaltiger Boxabsatz mit unterschiedlichen Spaltenbreiten.
Die linke Spalte (ein Slider) ist 20 % breit, die rechte Spalte 78 %.
Die Breitenanpassungen für die beiden div-Ids der linken und der rechten Spalte werden so vorgenommen:
<style type="text/css">
#ca3183 { width: 20%; }
#ca3182 { width: 78%; }
</style>So einfach geht das. Einen Slider in die linke Spalte zu packen, ist eine geniale Idee.
Ergänzung:
Hat man mehrere Zeilen in einem Boxabsatz, muss man die Breitenkorrektur für jeden Absatz vornehmen. Wem das zu aufwendig ist, der kann auch die Spaltenbreiten im zweispaltigen Boxabsatz anpassen:
.boxParagraph .box-row-2 > .paragraphSd { width: 20%; }
.boxParagraph .box-row-2 > .paragraphSd:last-child { width: 78%; }Nachteil: der Internet Explorer verstehts nicht.
Das für eine Bildergalerie am besten passende Thumbnail-Format bestimmen
Seit Weblica Version 3.6 kann man für die Miniatur-Bilder (Thumbnails) einer Bildergalerie Anzeigeformat und -grösse aus verschiedenen Formaten auswählen.
Für das Format stehen die fünf Seitenverhältnisse 1:1, 4:3, 3:2, 3:4 und 2:3 zur Wahl.
Für Bildergalerien mit Bildern in gemischten Formaten (Querformat und Hochformat) wähle ich immer quadratische Vorschaubilder.
Für Bildergalerien mit Bildern mit einem einheitlichen Format (Querformat oder Hochformat) berechne ich das oder die Seitenverhältnisse und wähle anschliessend dasjenige Format für die Thumbnails, das dem tatsächlichen Seitenverhältnis am nächsten kommt. Die Mühe lohnt sich.
Für das Format stehen die fünf Seitenverhältnisse 1:1, 4:3, 3:2, 3:4 und 2:3 zur Wahl.
Für Bildergalerien mit Bildern in gemischten Formaten (Querformat und Hochformat) wähle ich immer quadratische Vorschaubilder.
Für Bildergalerien mit Bildern mit einem einheitlichen Format (Querformat oder Hochformat) berechne ich das oder die Seitenverhältnisse und wähle anschliessend dasjenige Format für die Thumbnails, das dem tatsächlichen Seitenverhältnis am nächsten kommt. Die Mühe lohnt sich.
In der Lightbox-Bildergalerie mit der Tastatur navigieren
In Weblica-Websites kann man in der Lightbox-Bildergalerie auch mit der Tastatur navigieren:
Pfeiltaste links = 1 Bild zurück
Pfeiltaste rechts = 1 Bild vor
Esc = Bildergalerie schliessen
Die Tastatur-Navigation ist dann besonders nützlich, wenn man seine Bilder mit transparenten Navigationspfeilen präsentiert (siehe Lightbox Bildergalerie: Navigationspfeile nur bei hover anzeigen).
Pfeiltaste links = 1 Bild zurück
Pfeiltaste rechts = 1 Bild vor
Esc = Bildergalerie schliessen
Die Tastatur-Navigation ist dann besonders nützlich, wenn man seine Bilder mit transparenten Navigationspfeilen präsentiert (siehe Lightbox Bildergalerie: Navigationspfeile nur bei hover anzeigen).
Bilder zuschneiden oder von Weblica automatisch skalieren lassen?
Seit Weblica Version 3.6 werden Bilder bei Bedarf von Weblica automatisch skaliert.
Das automatische Skalieren hat viele Vorteile - aber ggf. auch Nachteile.
In der Testrubrik Skalierung Bilder ab Weblica 3.6 habe ich das Verhalten von Weblica getestet.
Die Schlussfolgerungen sind im Kapitel Konklusion dieser Testrubrik dokumentiert.
Der Vorteil des manuellen Zuschneidens eines (übergrossen) Bildes vor dem Einfügen in die Weblica-Dateiablage ist, dass das Bild in der tatsächlich benötigten (kleineren) Grösse verwendet wird. Dadurch wird die Ladezeit der Seite verkürzt.
Das automatische Skalieren hat viele Vorteile - aber ggf. auch Nachteile.
In der Testrubrik Skalierung Bilder ab Weblica 3.6 habe ich das Verhalten von Weblica getestet.
Die Schlussfolgerungen sind im Kapitel Konklusion dieser Testrubrik dokumentiert.
Der Vorteil des manuellen Zuschneidens eines (übergrossen) Bildes vor dem Einfügen in die Weblica-Dateiablage ist, dass das Bild in der tatsächlich benötigten (kleineren) Grösse verwendet wird. Dadurch wird die Ladezeit der Seite verkürzt.
Die Descriptions (Seitenbeschreibungen) aller Seiten anzeigen
Gibt man in den Seiteneigenschaften, Register Zusammenfassung, Rubrik Seitenbeschreibung, in "Kurztext Seitenbeschreibung" keinen Text ein, so generiert Weblica automatisch anhand des Seitentextes die Seitenbeschreibung. Diese Seitenbeschreibung wird in das Metaelement (den Meta-Tag) Description übernommen. Dabei kann es vorkommen, dass der letzte übernommene Satz abgeschnitten wird.
(Siehe auch Metadaten, die von Weblica generiert werden).
Die Description ist ein wesentliches Seitenelement, siehe Description: Kurzbeschreibung des Seiteninhalts.
Der Inhalt der Descriptions wird z. B. im Aufmacher - und in den Suchergebnissen angezeigt. Die letztere Funktion kann man sich zunutze machen, um die Descriptions aller Seiten anzuzeigen:
Will man wissen, welchen Inhalt die Seitenbeschreibungen haben, so kann man sich dafür der Weblica-Suchfunktion bedienen:
Ich gebe in der Suchfunktion "d*" und / oder (in einer 2. und / oder 3. Suche), "a*" bzw. "e*" (ohne Anführungszeichen) ein. Die Wahrscheinlichkeit, dass für d*, a* oder e* alle Seiten angezeigt werden, ist sehr gross. In den Suchergebnissen sieht man für jede Seite unter dem Browsertitel den Inhalt der Description. Hat man selber keine Seitenbeschreibungen erfasst, so sieht man den Salat - und wird motiviert, sinnvolle Seitenbeschreibungen selbst zu erfassen. En Guete!
Einzige Einschränkung bei diesem Verfahren: Seiten, die nicht in die Websuche eingeschlossen sind (Option in den Seiteneigenschaften), werden eben auch nicht angezeigt. Damit kann man leben.
Anmerkung: Wer auch noch die Längen der Descriptions berechnet haben will und die Descriptions aller Seiten sehen will, kann unsere Webanalyse-Datenbank benutzen. Kurze Mitteilung genügt.
(Siehe auch Metadaten, die von Weblica generiert werden).
Die Description ist ein wesentliches Seitenelement, siehe Description: Kurzbeschreibung des Seiteninhalts.
Der Inhalt der Descriptions wird z. B. im Aufmacher - und in den Suchergebnissen angezeigt. Die letztere Funktion kann man sich zunutze machen, um die Descriptions aller Seiten anzuzeigen:
Will man wissen, welchen Inhalt die Seitenbeschreibungen haben, so kann man sich dafür der Weblica-Suchfunktion bedienen:
Ich gebe in der Suchfunktion "d*" und / oder (in einer 2. und / oder 3. Suche), "a*" bzw. "e*" (ohne Anführungszeichen) ein. Die Wahrscheinlichkeit, dass für d*, a* oder e* alle Seiten angezeigt werden, ist sehr gross. In den Suchergebnissen sieht man für jede Seite unter dem Browsertitel den Inhalt der Description. Hat man selber keine Seitenbeschreibungen erfasst, so sieht man den Salat - und wird motiviert, sinnvolle Seitenbeschreibungen selbst zu erfassen. En Guete!
Einzige Einschränkung bei diesem Verfahren: Seiten, die nicht in die Websuche eingeschlossen sind (Option in den Seiteneigenschaften), werden eben auch nicht angezeigt. Damit kann man leben.
Anmerkung: Wer auch noch die Längen der Descriptions berechnet haben will und die Descriptions aller Seiten sehen will, kann unsere Webanalyse-Datenbank benutzen. Kurze Mitteilung genügt.
Bedingter Trennstrich in Description und RSS-Feed beissen sich
Um im Aufmacher-Absatz (z. B. in der linken Seitenspalte) die angezeigten Descriptions mit Zeilenumbrüchen zu versehen, kann man sich des bedingten Trennstrichs
Stellt man den Aufmacher auch als RSS-Feed bereit, kann man eine böse Überraschung erleben: der RSS-Feed funktioniert nicht. Ursache ist der bedingte Trennstrich in der Description.
Deshalb: wenn ein Aufmacher als RSS-Feed bereitgestellt wird, keine bedingten Zeilenumbrüche in den Descriptions verwenden.
­ in der Description bedienen.Stellt man den Aufmacher auch als RSS-Feed bereit, kann man eine böse Überraschung erleben: der RSS-Feed funktioniert nicht. Ursache ist der bedingte Trennstrich in der Description.
Deshalb: wenn ein Aufmacher als RSS-Feed bereitgestellt wird, keine bedingten Zeilenumbrüche in den Descriptions verwenden.
Nicht mehr editierbare Tabelle retten
Manchmal lässt sich eine sehr weitgehend individuell formatierte Tabelle nicht mehr umformatieren. Z. B. sind die Zellenränder oder die Hintergrundfarbe der Zellen in der Tabellenbearbeitung nicht mehr zugänglich.
Lösung (nach vielem Probieren entdeckt): Cursor in erste Tabellenzelle setzen, "Tabelle einfügen" im Menü (Alt+t) wählen, "freie Tabelle" klicken → und alle Tabelleneigenschaften sind wieder editierbar.
Lösung (nach vielem Probieren entdeckt): Cursor in erste Tabellenzelle setzen, "Tabelle einfügen" im Menü (Alt+t) wählen, "freie Tabelle" klicken → und alle Tabelleneigenschaften sind wieder editierbar.
Der Betreff im Email aus dem Weblica-Kontaktformular ist leer
Ist der Betreff im Email aus dem Kontaktformular leer (bzw. lautet der Betreff "Kein Titel"), so hat man vergessen, dem Absatz fürs Kontaktformular einen Absatz-Titel zu verpassen.
So einfach funktioniert Weblica ...
So einfach funktioniert Weblica ...
Senderadresse im Kontaktformular
Empfehlung, aus gegebenem Anlass:
Wir geben als Senderadresse in den Kontaktformularen nie eine existierende Emailadresse an, sondern z. B. noreply@mydomain.ch.
Wir senden auch immer automatisch eine Kopie der Nachricht an den Absender, das ist benutzer- und besucherfreundlich.
Der Vorteil der nicht existierenden Senderadresse ist, dass ein allfälliger Spammer mit der Kopie der Nachricht nichts anfangen kann - er sieht nur seine eigene Adresse. Das hat das Weblica-Team sehr schlau gemacht.
Nachahmung empfohlen.
Wir geben als Senderadresse in den Kontaktformularen nie eine existierende Emailadresse an, sondern z. B. noreply@mydomain.ch.
Wir senden auch immer automatisch eine Kopie der Nachricht an den Absender, das ist benutzer- und besucherfreundlich.
Der Vorteil der nicht existierenden Senderadresse ist, dass ein allfälliger Spammer mit der Kopie der Nachricht nichts anfangen kann - er sieht nur seine eigene Adresse. Das hat das Weblica-Team sehr schlau gemacht.
Nachahmung empfohlen.
Text oder Bilder im Ticker-Stil (Ticker-Style)
Manchmal möchte man eine Textzeile als Lauftext (Text im Ticker-Stil) herausstellen. Oder auch wenige Bilder im Tickerstil darstellen.
Für Text kann man das
In Weblica sind all diese Mittel nicht nötig - denn der Weblica-Cycler leistet das auch.
Mit den beiden Eigenschaften Anzeigedauer und Effektdauer des Cyclers erzielt man dadurch eine Anzeige im Tickerstil, dass man Anzeigedauer << Effektdauer setzt.
Beispiele: Cycler: Textanzeige wie im Ticker und Folgeabsätze.
Für Text kann man das
marquee-Element verwenden. Nachteil: das marquee-Element ist nicht valide. Oder man greift zu Javascript und / oder jQuery.In Weblica sind all diese Mittel nicht nötig - denn der Weblica-Cycler leistet das auch.
Mit den beiden Eigenschaften Anzeigedauer und Effektdauer des Cyclers erzielt man dadurch eine Anzeige im Tickerstil, dass man Anzeigedauer << Effektdauer setzt.
Beispiele: Cycler: Textanzeige wie im Ticker und Folgeabsätze.
Klappbare Absatztitel und Klapp-Symbole formatieren
Siehe
Ein- und ausklappbare Absätze (mit collapse und collapsed title)
Abstände für klappbare Absätze mit Ein- und Ausklappsymbol anpassen
Ändern der Farbe des Ein- und Ausklappsymbols für Absätze.
Zusammenfassung CSS-Anpassungen (Auszüge aus CSS, Originalwerte):
Anpassungen je nach Formatierung der Absatzüberschriften.
Ein- und ausklappbare Absätze (mit collapse und collapsed title)
Abstände für klappbare Absätze mit Ein- und Ausklappsymbol anpassen
Ändern der Farbe des Ein- und Ausklappsymbols für Absätze.
Zusammenfassung CSS-Anpassungen (Auszüge aus CSS, Originalwerte):
.collapse-title, .collapsed-title {
padding-left: 18px; /* linker Innenabstand Titel */
}
.collapse-title span {
border-top-color: inherit; /* Farbe Klappsymbol */
left: 2px; /* Abstand Klappsymbol links */
top: 0.5em; /* Abstand Klappsymbol oben */
}
.collapsed-title span {
border-left-color: inherit; /* Farbe Klappsymbol */
left: 4px; /* Abstand Klappsymbol links */
top: 0.5em; /* Abstand Klappsymbol oben */
}Anpassungen je nach Formatierung der Absatzüberschriften.
Was tun, wenn Seitenelemente in Cyclern im Boxabsatz ruckeln?
Die Webcam-Seite enthält Bilder in Cyclern, die ihrerseits in einem Box-Absatz enthalten sind. Nach der Erweiterung der Formatierung der Bilderabsätze ruckelte die Anzeige im Browser nach Abschluss des Seitenaufbaus: die Boxabsatz-Elemente sprangen um wenige Pixel nach links.
Ursache waren Innenabstände links und rechts. Diese führten zu überbreiten divs.
Empfehlung:
Ruckelt die Anzeige von Seitenelementen in Cyclern in einem Boxabsatz, müssen die Breiten der div-Elemente, beginnend beim cyclerParagraph bis zum innersten Element, kontrolliert werden. Gibt es ein Element, das breiter als seine Vorgänger und seine Nachfolger ist, so ist dessen Breite zu korrigieren.
Im Falle der Webcam-Bilder mussten nur die Innenabstände links und rechts auf Null gesetzt werden (diese waren wegen der zentrierten Darstellung sowieso überflüssig).
Ursache waren Innenabstände links und rechts. Diese führten zu überbreiten divs.
Empfehlung:
Ruckelt die Anzeige von Seitenelementen in Cyclern in einem Boxabsatz, müssen die Breiten der div-Elemente, beginnend beim cyclerParagraph bis zum innersten Element, kontrolliert werden. Gibt es ein Element, das breiter als seine Vorgänger und seine Nachfolger ist, so ist dessen Breite zu korrigieren.
Im Falle der Webcam-Bilder mussten nur die Innenabstände links und rechts auf Null gesetzt werden (diese waren wegen der zentrierten Darstellung sowieso überflüssig).
Drucklayout im Design responsive_two anpassen
Im Design responsive_two überlagert im Druck das Navigationsmenü den Seitentext. Lösungsversuche mit dem globalen Druck-CSS (print.css) sind insofern gescheitert, als bei Anwendung des Druck-CSS lange Seiten im Firefox und im Internet Explorer abgeschnitten wurden.
Nach längerem Experimentieren haben wir schliesslich die Lösung gefunden, den Druck-Layout mit der @media-Regel anzupassen.
Der CSS-Code mit der @media-Regel wird in der Startseite in den Seiten-Eigenschaften im Register HTML/CSS in der Rubrik HTML-Head eingefügt und auf alle untergeordneten Seiten vererbt (dazu auf den untergeordneten Seiten in Rubrik HTML-Head den Schalter "Inhalt von übergeordneter Seite übernehmen" aktivieren).
Hier nun der CSS-Code, mit dem
- Navigationsmenü, Breadcrumb und Shortcuts ausgeblendet werden
- das Kopfbild auf 100 Prozent skaliert wird (nur so funktioniert die Druckausgabe in FF und IE)
- Schrift und Schriftfarbe angepasst werden
- Überschriften für den Druck formatiert werden
- die Fusszeile mit Abständen, einer Trennlinie und abweichender Schriftfarbe versehen werden:
Bitte beachten: Der CSS-Code funktioniert nur dann, wenn das globale print.css leer ist (keinen Code enthält). Das globale print.css erreicht man via Weblica-Menü "Projekt"
Menüpunkt "CSS" Register "Druck".
Weitere Individualisierungen sind selbstverständlich möglich.
Wer die linke oder rechte Seitenspalte verwendet und diese im Druck ebenfalls ausblenden will, muss nach #menu noch die Div-Ids #leftContent bzw. #rightContent einfügen.
Wer das Kopfbild im Druck nicht anzeigen will, fügt am gleichen Ort noch #headerPic ein.
Wer in der Druckausgabe eine andere Schrift verwenden will, passt die font-family (Schriftart) an. Mehr dazu in Kurze Einführung in die Eigenschaften von Schriften und Texten.
Die (abweichenden) Schriftfarben für h1, h2, h3 und die Fusszeile können bei Bedarf geändert oder die color-Vorgaben ganz gelöscht werden.
Hinweis: Diese Druck-Layout-Anpassung funktioniert auch im Weblica-Design responsive_one.
Nach längerem Experimentieren haben wir schliesslich die Lösung gefunden, den Druck-Layout mit der @media-Regel anzupassen.
Der CSS-Code mit der @media-Regel wird in der Startseite in den Seiten-Eigenschaften im Register HTML/CSS in der Rubrik HTML-Head eingefügt und auf alle untergeordneten Seiten vererbt (dazu auf den untergeordneten Seiten in Rubrik HTML-Head den Schalter "Inhalt von übergeordneter Seite übernehmen" aktivieren).
Hier nun der CSS-Code, mit dem
- Navigationsmenü, Breadcrumb und Shortcuts ausgeblendet werden
- das Kopfbild auf 100 Prozent skaliert wird (nur so funktioniert die Druckausgabe in FF und IE)
- Schrift und Schriftfarbe angepasst werden
- Überschriften für den Druck formatiert werden
- die Fusszeile mit Abständen, einer Trennlinie und abweichender Schriftfarbe versehen werden:
<style type="text/css">
@media print {
#menu
, #breadcrumb
, #shortcuts
{ display: none; }
#headerPic img { width: 100%; height: 100%; }
#main { font-family: "Times New Roman", Arial, Helvetica, sans-serif ;
color: #222222;
overflow:auto; }
h1 { font-size: 1.4em;
border-bottom: 2px solid #888888;
color: #4a5d6d; }
h2, h3 { font-size: 1.2em;
border-bottom: 2px solid #888888;
color: #4a5d6d; }
.footer { margin-top: 2em;
padding-top: 0.5em;
border-top: 2px solid #888888;
color: #4a5d6d; }
}
</style>Bitte beachten: Der CSS-Code funktioniert nur dann, wenn das globale print.css leer ist (keinen Code enthält). Das globale print.css erreicht man via Weblica-Menü "Projekt"
Menüpunkt "CSS" Register "Druck".Weitere Individualisierungen sind selbstverständlich möglich.
Wer die linke oder rechte Seitenspalte verwendet und diese im Druck ebenfalls ausblenden will, muss nach #menu noch die Div-Ids #leftContent bzw. #rightContent einfügen.
Wer das Kopfbild im Druck nicht anzeigen will, fügt am gleichen Ort noch #headerPic ein.
Wer in der Druckausgabe eine andere Schrift verwenden will, passt die font-family (Schriftart) an. Mehr dazu in Kurze Einführung in die Eigenschaften von Schriften und Texten.
Die (abweichenden) Schriftfarben für h1, h2, h3 und die Fusszeile können bei Bedarf geändert oder die color-Vorgaben ganz gelöscht werden.
Hinweis: Diese Druck-Layout-Anpassung funktioniert auch im Weblica-Design responsive_one.
