CSS
Das Aussehen der von DynPG erzeugten Elemente (Hauptmenü, Artikel, Artikellisten, Gästebuch, ...) lässt sich mit Hilfe von CSS sehr flexibel gestalten, wenn man die richtigen Klassen und Ids kennt. In diesem Kapitel soll nun erklärt werden wie man das macht. Die wichtigsten (standardmäßig installierten) Plugins sollen hier Erwähnung finden.
Grundlegendes
Wie bereits erwähnt lässt sich vieles in DynPG mit Hilfe von CSS manipulieren und das Schöne ist, dass es bereits einige vorgefertigte CSS-Dateien gibt, die einem u.U. ein wenig Arbeit abnehmen. Um diese Dateien in seiner Website zu nutzen, muss man den Aufruf
<?php $DynPG->Write_CSS_JS_Header(); ?>
in den Kopf seiner Html-Datei einfügen. Wo genau er platziert werden muss, kann man hier sehr schön sehen. Damit werden bereits bestehende CSS-Dateien mit in die Website integriert. Hier eine Liste der vordefinierten Dateien:
- config_editor.css (für den Editor des Backends)
- config_forum.css (für das Forum-Plugin)
- config_general.css (allgemeine Einstellungen (Artikellisten, Gruppenlisten,...))
- config_votes.css (Vote-Plugin)
- style_counter.css (Counter-Plugin)
- tool.css (Backend)
Alle diese Dateien liegen im DynPG-Ordner im Unterverzeichnis "css/". Zudem gibt es die CSS-Dateien der installierten Plugins, z.B. das Hauptmenü. Somit gibt es also zwei Möglichkeiten CSS zu verwenden, 1. man editiert die bereits vorhandenen Dateien, die teilweise mit Kommentaren versehen sind, oder 2. man definiert sich eigene.
Ein erstes kleines Beispiel
Wie immer wollen wir mit etwas praktischem beginnen. Dazu werden wir die Schriftfarbe von einem Artikel manipulieren. Der Inhalt des Artikels den wir ausgeben, soll rot gefärbt werden. Der Code der CSS-Datei:
#dynpg_A_content { color: red; }
Mit der ID #dynpg_A_content können wir also ganz einfach auf die CSS-Eigenschaften des Artikelinhalts zugreifen. Eine Auflistung der CSS-IDs und -Klassen wird in den nächsten Kapiteln erfolgen. Wie die CSS-Datei eingebunden wird, sieht man in der index.php:
<?php require '../../../cms/getcontent.php'; $DynPG->SetParam_PathToRoot('../../../cms/'); ?> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-US" lang="en-US"> <head> <title>Einzelner Artikel</title> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> <?php $DynPG->Write_CSS_JS_Header(); ?> <!--Standard-Css von DynPG einbinden--> <link rel="stylesheet" type="text/css" href="style.css" /> <!--eigenes style.css einbinden--> </head> <body> <h1>Artikelansicht</h1> <?php $DynPG->SetParam_A_Anytime(true); //Artikel von Anfang an anzeigen $DynPG->SetParam_A_Article(11); //ArtikelNr. angeben $DynPG->Write_Article(); //Artikel mit der Nr. 11 ausgeben ?> </body> </html>
Und hier nochmal das vollständige und ausführbare Beispiel.
