CSS: Unterschied zwischen den Versionen
Aus DynPG-Wiki
(Artikel überarbeitet und CSS-Referenz ausgelagert) |
|||
| Zeile 1: | Zeile 1: | ||
| − | |||
[[Category:Integration in eine Webseite]] | [[Category: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. | |
| − | 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 | + | |
== Grundlegendes == | == Grundlegendes == | ||
| − | Wie bereits erwähnt lässt sich vieles in DynPG mit Hilfe von CSS manipulieren | + | 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: |
| + | |||
<code>[php,N]<?php $DynPG->Write_CSS_JS_Header(); ?></code> | <code>[php,N]<?php $DynPG->Write_CSS_JS_Header(); ?></code> | ||
| − | + | ||
| − | * config_editor.css | + | Wo genau er platziert werden muss, können Sie [[Code-Schnipsel Einfaches Hauptmenü|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_forum.css | + | * '''config_editor.css:''' für den Editor des Backends |
| − | * config_general.css | + | * '''config_forum.css:''' das Forum-Plugin |
| − | * config_votes.css | + | * '''config_general.css:''' allgemeine Einstellungen (Artikellisten, Gruppenlisten,...) |
| − | * style_counter.css | + | * '''config_votes.css:''' Vote-Plugin |
| − | * tool.css | + | * '''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 == | == 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''' | ||
<code>[css,N] | <code>[css,N] | ||
#dynpg_A_content { | #dynpg_A_content { | ||
| Zeile 23: | Zeile 28: | ||
} | } | ||
</code> | </code> | ||
| − | Mit der ID | + | Mit der ID <tt>#dynpg_A_content</tt> 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''': | ||
<code>[php,N] | <code>[php,N] | ||
<?php | <?php | ||
| Zeile 53: | Zeile 60: | ||
Und [[CSS Minimalbeispiel|hier]] nochmal das vollständige und ausführbare Beispiel. | Und [[CSS Minimalbeispiel|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]]. | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
Version vom 9. Mai 2010, 11:27 Uhr
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.
