CSS: Unterschied zwischen den Versionen

Aus DynPG-Wiki
Wechseln zu: Navigation, Suche
K (→‎Weiterführende Informationen)
(CSS Artikel überarbeitet und erweitert)
 
Zeile 2: Zeile 2:
 
{{Einführungsartikel}}
 
{{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. 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. 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:
+
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:
−
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_editor.css:''' für den Editor des Backends
 
* '''config_editor.css:''' für den Editor des Backends
 
* '''config_forum.css:''' das Forum-Plugin
 
* '''config_forum.css:''' das Forum-Plugin
Zeile 16: Zeile 15:
 
* '''style_counter.css:''' Counter-Plugin
 
* '''style_counter.css:''' Counter-Plugin
 
* '''tool.css:''' Backend
 
* '''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:
 
Somit gibt es also zwei Möglichkeiten, eine Webseite mit CSS anzupassen:
 
# Man editiert die bereits vorhandenen Dateien oder  
 
# Man editiert die bereits vorhandenen Dateien oder  
−
# man definiert sich eigene (evtl. auch basierend auf den bereits vorhanden)
+
# man definiert sich eigene Stylesheets (evtl. auch basierend auf den bereits vorhanden)
  
 
== Ein erstes kleines Beispiel ==
 
== Ein erstes kleines Beispiel ==
Zeile 26: Zeile 28:
 
'''config_general.css'''
 
'''config_general.css'''
 
<code>[css,N]
 
<code>[css,N]
−
#dynpg_A_content {
+
.dynpg_A_content {
 
color: red;
 
color: red;
 
}
 
}
 
</code>
 
</code>
−
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.
+
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''':
 
'''index.php''':
 
<code>[php,N]
 
<code>[php,N]
 
<?php
 
<?php
−
   require '../../../cms/getcontent.php';
+
   require '../dynpg/getcontent.php';
−
   $DynPG->SetParam_PathToRoot('../../../cms/');
+
   $DynPG->SetParam_PathToRoot('../dynpg/cms/');
 
?>
 
?>
  
Zeile 53: 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(11);   //ArtikelNr. angeben
+
       $DynPG->SetParam_A_Article(5);   //Artikelnr. angeben
−
       $DynPG->Write_Article();          //Artikel mit der Nr. 11 ausgeben
+
       $DynPG->Write_Article();          //Artikel mit der ID 5 ausgeben
 
     ?>
 
     ?>
 
   </body>
 
   </body>
Zeile 61: Zeile 63:
  
 
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 ==
 
== 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]].
 
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

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

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
Note.png 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:

  1. Man editiert die bereits vorhandenen Dateien oder
  2. 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.


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.


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 .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.

Von „http://wiki-de.dynpg.org/wiki_de/index.php?title=CSS&oldid=3391“