====== Grafische Überschriften ======

Für grafische Überschriften innerhalb der ganzen Website lohnt sich der Einsatz von automatischen Mechanismen namens «Dynamic Text Replacement». Diese nehmen uns viel Arbeit ab. Ich erkläre Ihnen in einem kleinen Beispiel, Schritt für Schritt, wie Sie ohne grossen Aufwand eigene Schriften für Ihre Überschriften verwenden können.

==== Vorbereitung ====

Als Erstes benötigen Sie ein geeignetes «DTR»-Script. 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. Besorgen Sie sich als erstes das Script [[http://www.joaomak.net/util/dtr/|PCDTR]].

Vorab ein kleiner Überblick, was Sie damit alles verwirklichen können:

  * individuelle Schriftfamilie
  * Schriftgrösse
  * Schriftfarbe
  * Hintergrundfarbe
  * Hover-Zustand
  * Textdekoration bei Links
  * Text-Transformation

Laden Sie den Ordner «dtr», welcher sich in der heruntergeladenen ZIP-Datei befindet, in Ihre Sefrengo-Installation unter ''/cms/'' hoch. Achten Sie darauf, dass der Ordner ''cache'' Schreibberechtigung besitzt. Natürlich steht es Ihnen frei, den Ordner in das von Ihnen gewünschte Verzeichnis zu kopieren. Im weiteren Verlauf dieser Anleitung wird jedoch davon ausgegangen, dass sich der Ordner unter ''/cms/'' befindet.

Nun öffnen Sie die Datei ''/cms/dtr/dtr.php'' und passen noch Zeile 20 wie folgt an:

<code php>var $dtr_dir = "cms/dtr"; //relative to root dir </code>
Soweit die Vorbereitung, begeben Sie sich in Ihr Sefrengo-Backend.

==== Template anpassen ====

Damit [[http://www.joaomak.net/util/dtr/|PCDTR]] innerhalb Sefrengo funktioniert, müssen noch einige Anpassungen am Layout vorgenommen werden. Editieren Sie unter Design → Layouts das gewünschte Layout.

Fügen Sie als erste Zeile (noch vor dem Doctype) folgende Zeile ein:

<code php><CMSPHP> include "cms/dtr/dtr.php";</CMSPHP></code>
und als letzte Zeile (nach </html>)

<code php><CMSPHP> ob_end_flush(); </CMSPHP></code>
Fügen Sie nun noch die CSS-Datei

<code php><link rel="stylesheet" href="cms/dtr/headings.css" type="text/css" /></code>
im ''head'' des Layouts ein. Jetzt fehlt nur noch der Feinschliff.
==== Schriftart anpassen ====

Damit Sie nun noch die gewünschte Schrift verwenden können, müssen Sie diese ins Verzeichnis ''/cms/dtr/'' hochladen. Dabei muss es sich um eine Truetype oder Opentype-Schrift handeln. Beachten Sie, dass viele Gratisschriften von amerikanischen Websites keine Umlaute beinhalten. Als letztes Definieren Sie in der Datei ''/cms/dtr/headings.css'' noch Schriftart, Farbe und Grösse der Überschriften:

<code css>
h3 {
	font-family: OzHandicraft, Arial, Tahoma, sans-serif;
	font-size:25pt;
	color: #00427c;
	background:transparent;
	font-weight:normal;
}
</code>

Beachten Sie, dass die Schriftfamilie mit dem Dateinamen der Schrift übereinstimmen muss. Ebenso wichtig ist es, die Schriftgrösse in Punkt zu Definieren.

<note autor>
  * [[profil>16|Andi Portmann]]
</note>