CSS: Unterschied zwischen den Versionen
(CSS Artikel überarbeitet und erweitert) |
|||
| (4 dazwischenliegende Versionen von 2 Benutzern werden nicht angezeigt) | |||
| 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 | + | {{Einführungsartikel}} |
| + | |||
| + | Das Aussehen der von DynPG erzeugten Elemente (Hauptmenü, Artikel, Artikellisten, Gästebuch, ...) lässt sich mit Hilfe von CSS sehr flexibel gestalten. Dazu müssen Sie lediglich die richtigen Klassen und Identifier kennen. Diese sollen in diesem Artikel kurz vorgestellt werden. Die wichtigsten (standardmäßig installierten) Plugins sollen hier ebenfalls Erwähnung finden. | ||
== 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. Um diese Dateien in die Website einzubinden, muss der folgende Aufruf in den Kopf der HTML-Datei eingefügt werden: |
| + | |||
<code>[php,N]<?php $DynPG->Write_CSS_JS_Header(); ?></code> | <code>[php,N]<?php $DynPG->Write_CSS_JS_Header(); ?></code> | ||
| − | + | Diese Anweisung muss zwischen den <tt><nowiki><head></nowiki></tt> Tags der Webseite eingefügt werden. Damit werden bereits bestehende CSS-Dateien mit in die Website integriert. Diese Dateien befinden sich im DynPG-Ordner im Unterverzeichnis <tt>css/</tt>. Zudem gibt es die CSS-Dateien der installierten Plugins, z.B. das Hauptmenü. Hier eine Liste einiger vordefinierten Dateien: | |
| − | * config_editor.css | + | * '''config_editor.css:''' für den Editor des Backends |
| − | * config_forum.css | + | * '''config_forum.css:''' das Forum-Plugin |
| − | * config_general.css | + | * '''config_general.css:''' allgemeine Einstellungen (Artikellisten, Gruppenlisten,...) |
| − | * config_votes.css | + | * '''config_votes.css:''' Vote-Plugin |
| − | * style_counter.css | + | * '''style_counter.css:''' Counter-Plugin |
| − | * tool.css | + | * '''tool.css:''' Backend |
| − | + | ||
| + | {{Note | ||
| + | |Ab DynPG Version 4.5.0 finden Sie im <tt>css/</tt> Verzeichnis zwei neue Dateien <tt>config_general.css.v450</tt> und <tt>config_editor.css.v450</tt>. Diese Dateien werden von der neuen Version verwendet.}} | ||
| + | |||
| + | Somit gibt es also zwei Möglichkeiten, eine Webseite mit CSS anzupassen: | ||
| + | # Man editiert die bereits vorhandenen Dateien oder | ||
| + | # man definiert sich eigene Stylesheets (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 { | |
color: red; | color: red; | ||
} | } | ||
</code> | </code> | ||
| − | Mit der | + | Mit der Klasse <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 | ||
| − | require '../ | + | require '../dynpg/getcontent.php'; |
| − | $DynPG->SetParam_PathToRoot('../ | + | $DynPG->SetParam_PathToRoot('../dynpg/cms/'); |
?> | ?> | ||
| Zeile 43: | Zeile 55: | ||
<?php | <?php | ||
$DynPG->SetParam_A_Anytime(true); //Artikel von Anfang an anzeigen | $DynPG->SetParam_A_Anytime(true); //Artikel von Anfang an anzeigen | ||
| − | $DynPG->SetParam_A_Article( | + | $DynPG->SetParam_A_Article(5); //Artikelnr. angeben |
| − | $DynPG->Write_Article(); //Artikel mit der | + | $DynPG->Write_Article(); //Artikel mit der ID 5 ausgeben |
?> | ?> | ||
</body> | </body> | ||
| Zeile 52: | Zeile 64: | ||
Und [[CSS Minimalbeispiel|hier]] nochmal das vollständige und ausführbare Beispiel. | Und [[CSS Minimalbeispiel|hier]] nochmal das vollständige und ausführbare Beispiel. | ||
| − | == | + | == Klassen- und Identifiernamen finden == |
| + | Um die Namen von CSS Klassen und Identifiern von DynPG zu finden können Sie einerseits in den CSS Dateien von DynPG nach ihnen suchen oder in der [[CSS-Referenz]] nachschauen. | ||
| − | + | Ein weiterer schneller Weg den richtigen Namen zu finden ist im Quelltext der Webseite danach zu suchen. Sie können sich mit jedem modernenen Browser den reinen HTML-Quelltext einer Webseite anzeigen lassen (Firefox: STRG+U, Internet Explorer: F12, Safari: Cmd+Option+V, Chrome: STRG+U). Im Quelltext können Sie dann nach dem HTML-Tag suchen, welches Sie verändern möchten, indem Sie z.B. nach dem Text suchen, welcher vom gesuchten Tag umschlossen wird. | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | === Beispiel === | |
| − | + | Wir möchten die von DynPG automatisch generierten Überschriften von Artikeln anpassen um z.B. die Schriftgröße oder den Abstand zum Text zu verändern. Der Text der Überschrift ist im folgenden Bild mit einem roten Rahmen markiert. | |
| − | + | ||
| − | + | ||
| − | |||
| − | |||
| − | |||
| − | |||
| − | + | [[Image:CSS Identifier Webseite.png]] | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | |||
| − | |||
| − | |||
| − | |||
| − | + | Im Quelltext suchen wir nun nach diesem Text, entweder manuell oder mit Hilfe einer integrierten Suchfunktion (STRG+F in vielen Browsern), um die Klasse zu bestimmen. | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | |||
| − | |||
| − | |||
| − | |||
| − | + | [[Image:CSS Identifier Code.png]] | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | |||
| − | |||
| − | |||
| − | |||
| − | + | Hier sehen wir nun das umschließende Tag und wissen, dass das der gesuchte Name "dynpg_A_header_text" lautet. Der Name des Tags ist damit also <tt>.dynpg_A_header_text</tt>. Mit diesem Klassennamen können wir nun in CSS das Aussehen der Überschrift nach Belieben ändern. | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | <code>[css,N] | |
| − | + | .dynpg_A_header_text { | |
| − | + | font-size: 200%; | |
| − | + | font-weight: bold; | |
| − | + | margin-top: 10px; | |
| − | + | margin-bottom: 20px; | |
| − | + | } | |
| − | + | </code> | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | { | + | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | == 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]]. | ||
Aktuelle Version vom 26. September 2011, 11:22 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. Dazu müssen Sie lediglich die richtigen Klassen und Identifier kennen. Diese sollen in diesem Artikel kurz vorgestellt werden. Die wichtigsten (standardmäßig installierten) Plugins sollen hier ebenfalls Erwähnung finden.
Inhaltsverzeichnis
Grundlegendes
Wie bereits erwähnt lässt sich vieles in DynPG mit Hilfe von CSS manipulieren. DynPG enthält bereits einige vorgefertigte CSS-Dateien. Um diese Dateien in die Website einzubinden, muss der folgende Aufruf in den Kopf der HTML-Datei eingefügt werden:
<?php $DynPG->Write_CSS_JS_Header(); ?>
Diese Anweisung muss zwischen den <head> Tags der Webseite eingefügt werden. 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
| Bemerkung:
|
Ab DynPG Version 4.5.0 finden Sie im css/ Verzeichnis zwei neue Dateien config_general.css.v450 und config_editor.css.v450. Diese Dateien werden von der neuen Version verwendet. |
Somit gibt es also zwei Möglichkeiten, eine Webseite mit CSS anzupassen:
- Man editiert die bereits vorhandenen Dateien oder
- man definiert sich eigene Stylesheets (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 Klasse .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 '../dynpg/getcontent.php'; $DynPG->SetParam_PathToRoot('../dynpg/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(5); //Artikelnr. angeben $DynPG->Write_Article(); //Artikel mit der ID 5 ausgeben ?> </body> </html>
Und hier nochmal das vollständige und ausführbare Beispiel.
Klassen- und Identifiernamen finden
Um die Namen von CSS Klassen und Identifiern von DynPG zu finden können Sie einerseits in den CSS Dateien von DynPG nach ihnen suchen oder in der CSS-Referenz nachschauen.
Ein weiterer schneller Weg den richtigen Namen zu finden ist im Quelltext der Webseite danach zu suchen. Sie können sich mit jedem modernenen Browser den reinen HTML-Quelltext einer Webseite anzeigen lassen (Firefox: STRG+U, Internet Explorer: F12, Safari: Cmd+Option+V, Chrome: STRG+U). Im Quelltext können Sie dann nach dem HTML-Tag suchen, welches Sie verändern möchten, indem Sie z.B. nach dem Text suchen, welcher vom gesuchten Tag umschlossen wird.
Beispiel
Wir möchten die von DynPG automatisch generierten Überschriften von Artikeln anpassen um z.B. die Schriftgröße oder den Abstand zum Text zu verändern. Der Text der Überschrift ist im folgenden Bild mit einem roten Rahmen markiert.
Im Quelltext suchen wir nun nach diesem Text, entweder manuell oder mit Hilfe einer integrierten Suchfunktion (STRG+F in vielen Browsern), um die Klasse zu bestimmen.
Hier sehen wir nun das umschließende Tag und wissen, dass das der gesuchte Name "dynpg_A_header_text" lautet. Der Name des Tags ist damit also .dynpg_A_header_text. Mit diesem Klassennamen können wir nun in CSS das Aussehen der Überschrift nach Belieben ändern.
.dynpg_A_header_text { font-size: 200%; font-weight: bold; margin-top: 10px; margin-bottom: 20px; }
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.
