|
Erläuterungen zur VorlagendateiEinfügen der einzelnen SeitenelementeDie In die einzelnen Tabellenfelder werden die Seitenelemente des CMS durch Aufruf der entsprechenden Benutzerfunktionen ausgegeben. <td width="100%" valign="top"> <!-- Page-Content --> <?php yap_renderContent(); ?> </td> Die Benutzerfunktion 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 SeitenelementeDie ausgegebenen Seitenelemente sind CSS-formatierter HTML-Code. <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. #yap_content_div{ background-color: white; padding: 1em; } Geben Sie als neue Hintergrundfarbe den Farbwert #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{ 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 { 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 "
[ Seite drucken ]
[
nach oben ]
|
Zuletzt bearbeitet am 2008-06-08 21:17 von StefanSorg.
Ausgegeben in 0.0119 sec |