Für grafische Überschriften innerhalb der ganzen Website lohnt sich der Einsatz von automatischen Mechanismen namens «Dynamic Text Replacement».
Vorbereitung
Als Erstes wird ein geeignetes «DTR»-Script benötigt. Neben Flash- und Javascript-Lösungen gib es mittlerweile reine CSS/PHP-Scripte. Diese haben den Vorteil, dass sie keine Voraussetzungen an den Besucher der Website stellen. PCDTR ist hier das Script meiner Wahl.
Vorab ein kleiner Überblick, was damit alles verwirklicht werden kann:
- individuelle Schriftfamilie
- Schriftgrösse
- Schriftfarbe
- Hintergrundfarbe
- Hover-Zustand
- Textdekoration bei Links
- Text-Transformation
Der Ordner «dtr», welcher sich in der heruntergeladenen ZIP-Datei befindet, muss in der Sefrengo-Installation unter /cms/
hochgeladen werden. Dabei gilt es zu beachten, dass der Ordner cache
Schreibberechtigung besitzt. Natürlich steht es frei, den Ordner in ein beliebiges Verzeichnis zu kopieren. Im weiteren Verlauf dieser Anleitung wird jedoch davon ausgegangen, dass sich der Ordner unter /cms/
befindet.
Nun muss die Datei /cms/dtr/dtr.php
in Zeile 20 angepasst werden:
var $dtr_dir = "cms/dtr"; //relative to root dir
Soweit die Vorbereitung, alles Weitere nun im Sefrengo-Backend.
Template anpassen
Damit PCDTR innerhalb Sefrengo funktioniert, müssen am Layout einige Anpassungen vorgenommen werden.
Als erste Zeile (noch vor dem Doctype) muss folgende Zeile eingefügt werden:
<CMSPHP> include "cms/dtr/dtr.php"; </CMSPHP>
und als letzte Zeile (nach </html>)
</CMSPHP> ob_end_flush(); </CMSPHP>
Abschliessen muss noch die CSS-Datei referenziert werden:
<link rel="stylesheet" href="cms/dtr/headings.css" type="text/css" />
Jetzt fehlt nur noch der Feinschliff.
Schriftart anpassen
Damit die gewünschte Schrift verwenden werden kann, muss diese ins Verzeichnis /cms/dtr/
hochladen werden. Dabei muss es sich um eine Truetype oder Opentype-Schrift handeln. Zu beachten gilt, dass viele Gratisschriften von amerikanischen Websites keine Umlaute beinhalten. Als letztes wird in der Datei /cms/dtr/headings.css
noch Schriftart, Farbe und Grösse der Überschriften definiert:
h3 { font-family: OzHandicraft, Arial, Tahoma, sans-serif; font-size:25pt; color: #00427c; background:transparent; font-weight:normal; }
Achtung: Die Schriftfamilie muss mit dem Dateinamen der Schrift übereinstimmen. Ebenso wichtig ist es, die Schriftgrösse in Punkt zu Definieren.