Erläuterungen zur Vorlagendatei

Einfügen der einzelnen Seitenelemente

Die Support/Integrators/Integration/TemplateExamples/TemplateFileOne Vorlagendatei gibt ein einfaches Tabellenlayout für die auszugebende Seite vor.

In die einzelnen Tabellenfelder werden die Seitenelemente des CMS durch Aufruf der entsprechenden Benutzerfunktionen ausgegeben.
Der HTML-Codeabschnitt für den Contentbereich (zeigt die hinterlegten Seiteninhalte oder Systemseiten, z.B. Benutzeranmeldungs-Formular) findet sich in den Zeilen 51-54 des Quelltextes:

 <td width="100%" valign="top">
        <!-- Page-Content -->
        <?php yap_renderContent(); ?>
 </td>

Die Benutzerfunktion yap_renderContent() innerhalb des <?php ?>-Blocks gibt an dieser Stelle den Seiteninhalt aus. Der "Einbau" aller anderen Seitenelemente in die HTML-Ausgabe wird ähnlich vorgenommen.

Die Vorlagendatei legt also den Ort der einzelnen Seitenelemente auf der Ausgabeseite fest. Doch wie wird das Aussehen der einzelnen Elemente gestaltet?

Gestaltung der einzelnen Seitenelemente

Die ausgegebenen Seitenelemente sind CSS-formatierter HTML-Code.
Die verwendete Vorlagendatei includiert im head-Bereich der Seite eine CSS-Datei mit den CSS-Formatierungsangaben. Über die Angaben in dieser Datei wird die optische Gestaltung der einzelnen Seitenelemente festgelegt.

<link href="css/template_example.css"
      rel="stylesheet" type="text/css">

Um die Änderung an der Gestaltung vorzunehmen, müssen Sie diese Datei bearbeiten.

Welches ausgegebene Seitenelement welches CSS-ID-Attribut nutzt, steht in der Beschreibung der zum Seitenelement zugehörenden Benutzerfunktion.
Die Ausgabe des Seitencontent-Bereichs ist in einen <div>-Block gefasst, welcher die CSS-id #yap_content_div trägt.
Öfnnen Sie die Datei css/template_example.css zur Bearbeitung.
Um die Hintergrundfarbe und Schriftart des Content-Bereichs auf der Seite zu ändern, editieren Sie an folgende Stelle in der CSS-Datei:

#yap_content_div{
	background-color: white;
	padding: 1em;
}

Geben Sie als neue Hintergrundfarbe den Farbwert #EEE an.

#yap_content_div{
	background-color: #EEE;
	font-family:Georgia, "Times New Roman", Times, serif;
	font-size: 90%;
	padding: 1em;
}

Speichern Sie die Änderungen in die Datei auf dem Server und aktualisieren die Ansicht der Webseite im Browser. Die Änderungen sollten nun sichtbar sein.


Genau wie im obigen Beispiel gezeigt, können Sie alle Seitenelemente neu "stylen". Zu jedem Seitenelement existiert ein entsprechender CSS-Eintrag.


Noch ein Beispiel:

Um das Aussehen des Menüs zu ändern, bearbeiten wir den zugehörigen "#yap_nav_div"-Eintrag in der CSS-Datei:

#yap_nav_div{
	padding: 0.4em;
	margin-right:0.7em;
	margin-bottom:0.7em;
	background-color: white;
}

Ändern Sie diesen zu:

#yap_nav_div{
	padding: 0.4em;
	margin-right:0.7em;
	margin-bottom:0.7em;
	font-family:Georgia, "Times New Roman", Times, serif;
}

Das Menü erscheint jetzt in einer anderen Schriftart und ohne eigene Hintergrundfarbe. Um die Felder der einzelnen Menüpunkte neu einzufärben ändern Sie die Einstellungen der CSS-ID "#yap_nav_div li a":

#yap_nav_div li a {
	display: block;
	padding: 0.1em 0.7em;
	font-weight: bold;
	text-decoration: none;
	color: #068;
	background-color: #EEE;
	border: solid #DDD 1px;
}

Ändern zu:

#yap_nav_div li a {
	display: block;
	padding: 0.1em 0.7em;
	font-weight: bold;
	text-decoration: none;
	color: #068;
	background-color: white;
	font-family:Georgia, "Times New Roman", Times, serif;
	border: solid #DDD 1px;
}

Alle Einstellungen des Navigarionsmenüs werden in den Untergruppen der "#yap_nav_div li a"-CSS-ID getroffen.

[ Seite drucken ] [ nach oben ]
Zuletzt bearbeitet am 2008-06-08 21:17 von StefanSorg.
Ausgegeben in 0.0119 sec