CSS: Unterschied zwischen den Versionen
| Zeile 1: | Zeile 1: | ||
{{old}} | {{old}} | ||
[[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 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 Erwähnung finden. | ||
Version vom 17. August 2009, 20:38 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 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" /> <!--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.
CSS-Referenz
| |
|
|
|---|---|---|
| dynpg_A_breadcrumb | Id | "Brotkrümel"-Navigation |
| dynpg_A_header | Id | der Kopf des Artikels (enthält u.a. den Titel, Datum, Lead,...) |
| dynpg_A_header_text | Id | der Text im Kopf des Artikels |
| dynpg_A_header_lead | Id | Lead im Kopf des Artikels |
| dynpg_A_header_date | Id | Datum im Kopf des Artikels |
| dynpg_A_content | Id | Der gesamte Inhalt des Artikels |
| dynpg_A_btnprint | Id | "drucken"-Knopf um den Artikel an den Drucker zu senden |
| dynpg_A_more | Id | "mehr"-Knopf mit dem der Rest des Artikels angezeigt wird |
| dynpg_A_edit_mode | Id | Knopf für den Editier-Modus mit dem man ins Backend gelangt um den Artikel zu bearbeiten. |
| |
|
|
|---|---|---|
| dynpg_AA_breadcrumb_navi | Id | "Brotkrümel"-Navigation |
| dynpg_AA_breadcrumb_pages | Id | Die Navigation mit der man auf die nächste Seite springen kann. (Wenn die Artikelliste groß ist wird sie auf mehrere Seiten aufgeteilt) |
| dynpg_AA_edit_mode | Id | Knopf für den Editier-Modus mit dem man ins Backend gelangt um den Artikel zu bearbeiten. |
| dynpg_AA_row_Headtext | Id | |
| dynpg_AA_row_Description | Id | |
| dynpg_AA_row_table | Id | |
| dynpg_AA_row_MainA | Id | |
| dynpg_AA_row_Main_Col_01A | Id | |
| dynpg_AA_row_MainB | Id | |
| dynpg_AA_row_Main_Col_01B | Id |
| |
|
|
|---|---|---|
| dynpg_AG_breadcrumb_navi | Id | "Brotkrümel"-Navigation |
| dynpg_AG_breadcrumb_pages | Id | Die Navigation mit der man auf die nächste Seite springen kann. (Wenn die Gruppenliste groß ist wird sie auf mehrere Seiten aufgeteilt) |
| dynpg_AG_row_Headtext | Id | |
| dynpg_AG_row_Description | Id | |
| dynpg_AG_row_table | Id | |
| dynpg_AA_row_Main | Id | |
| dynpg_AA_row_Main_Col_01 | Id |
| |
|
|
|---|---|---|
| dynpg_P | Id | |
| dynpg_P_breadcrumb | Id | "Brotkrümel"-Navigation |
| dynpg_P_header | Id | Kopf des Artikels |
| dynpg_P_header_text | Id | Text im Kopf des Artikels |
| dynpg_P_header_lead | Id | Lead im Kopf des Artikels |
| dynpg_P_header_date | Id | Datum im Kopf des Artikels |
| dynpg_P_content | Id | Inhalt des Artikels |
| |
|
|
|---|---|---|
| dynpg_H | Id | |
| dynpg_H_EM | Id | |
| dynpg_H_EM_glow | Id | |
| dynpg_H_parentgroup | Id | |
| dynpg_H_header | Id | Kopf des Artikels |
| dynpg_H_header_text | Id | Text im Kopf des Artikels |
| dynpg_H_header_lead | Id | Lead im Kopf des Artikels |
| dynpg_H_header_date | Id | Datum im Kopf des Artikels |
| dynpg_H_content | Id | Inhalt des Artikels |
| dynpg_H_btnprint | Id | "Drucken"-Knopf |
| dynpg_H_more | Id | "mehr"-Knopf mit dem der Rest des Artikels angezeigt wird |
| dynpg_H_edit_mode | Id | Knopf für den Editier-Modus mit dem man ins Backend gelangt um den Artikel zu bearbeiten. |
| |
|
|
|---|---|---|
| dynpg_search_query | Id | |
| dynpg_search_submit | Id |
