CSS: Unterschied zwischen den Versionen
(Artikel überarbeitet und CSS-Referenz ausgelagert) |
K |
||
| Zeile 1: | Zeile 1: | ||
[[Category:Integration in eine Webseite]] | [[Category:Integration in eine Webseite]] | ||
| + | {{Einführungsartikel}} | ||
| + | |||
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 ebenfalls Erwähnung finden. | 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 ebenfalls Erwähnung finden. | ||
Version vom 26. Oktober 2010, 09:15 Uhr
Dieser Artikel ist Teil einer Reihe von Einführungsartikeln zu DynPG
Webseiten erstellen mit DynPG | DynPG in eine Webseite einbinden | Die drei Ansichten von DynPG | Eine einfache Inhaltsübersicht | Dynamisches Navigationmenü ... | CSS | Templates
zurück zu Kategorie:Integration in eine Webseite
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 ebenfalls Erwähnung finden.
Grundlegendes
Wie bereits erwähnt lässt sich vieles in DynPG mit Hilfe von CSS manipulieren. DynPG enthält bereits einige vorgefertigte CSS-Dateien, die einem u.U. einiges an Arbeit abnehmen können. Um diese Dateien in seiner Website zu nutzen, muss der folgende Aufruf in den Kopf der HTML-Datei einfügen:
<?php $DynPG->Write_CSS_JS_Header(); ?>
Wo genau er platziert werden muss, können Sie hier nachlesen. Damit werden bereits bestehende CSS-Dateien mit in die Website integriert. Diese Dateien befinden sich im DynPG-Ordner im Unterverzeichnis "css/". Zudem gibt es die CSS-Dateien der installierten Plugins, z.B. das Hauptmenü. Hier eine Liste einiger vordefinierten Dateien:
- config_editor.css: für den Editor des Backends
- config_forum.css: das Forum-Plugin
- config_general.css: allgemeine Einstellungen (Artikellisten, Gruppenlisten,...)
- config_votes.css: Vote-Plugin
- style_counter.css: Counter-Plugin
- tool.css: Backend
Somit gibt es also zwei Möglichkeiten, eine Webseite mit CSS anzupassen:
- Man editiert die bereits vorhandenen Dateien oder
- man definiert sich eigene (evtl. auch basierend auf den bereits vorhanden)
Ein erstes kleines Beispiel
Beispielhaft werden wir nun die Schriftfarbe von Artikeln manipulieren. Der Inhalt des Artikels, den wir ausgeben wollen, soll rot gefärbt werden. Der Code der CSS-Datei dafür ist:
config_general.css
#dynpg_A_content { color: red; }
Mit der ID #dynpg_A_content können wir also ganz einfach auf die CSS-Eigenschaften des Artikelinhalts zugreifen. Wie die CSS-Datei eingebunden wird, sieht man nochmals im folgenden Beispiel, welches einen bestimmten Artikel ausgibt.
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" /> <!--Standard-Css von DynPG einbinden--> <?php $DynPG->Write_CSS_JS_Header(); ?> <!--eigenes style.css einbinden--> <link rel="stylesheet" type="text/css" href="style.css" /> </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.
Weiterführende Informationen
Wie Sie sehen konnten, ist die Anpassung der Webseite mit CSS sehr einfach. Bei der Arbeit mit DynPG müssen Sie ledeglich die richtigen Identifier kennen, um eine Seite nach Ihren Wünschen anpassen zu können. Eine Übersicht der Klassen und Identifier finden Sie in der CSS-Referenz.
