Automatismus für grafische Überschriften

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.

Geschrieben von

Als typografischer Gestalter in der eigenen Grafikagentur erzähle ich aus meinem Agenturleben. Neue Apps welche mir den Alltag erleichtern können schaue ich mir immer wieder gerne an. Zur Entspannung geniesse ich die Zeit mit meinem Big Green Egg® und erzähle dazu gerne Grillgeschichten hier oder in der Community Green Grillers.

Kommentar verfassen

Close

Entdecke mehr von aportmann

Jetzt abonnieren, um weiterzulesen und auf das gesamte Archiv zuzugreifen.

Weiterlesen