CSS: Unterschied zwischen den Versionen

Aus DynPG-Wiki
Wechseln zu: Navigation, Suche
 
(CSS Artikel überarbeitet und erweitert)
 
(6 dazwischenliegende Versionen von 2 Benutzern werden nicht angezeigt)
Zeile 1: Zeile 1:
−
{{old}}
 
 
[[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 Erwähnung finden.
+
{{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 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
+
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>
−
in den Kopf seiner Html-Datei einfügen. Wo genau er platziert werden muss, kann man [[Code-Schnipsel Einfaches Hauptmenü|hier]] sehr schön sehen. Damit werden bereits bestehende CSS-Dateien mit in die Website integriert. Hier eine Liste der vordefinierten Dateien:
+
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 (für den Editor des Backends)
+
* '''config_editor.css:''' für den Editor des Backends
−
* config_forum.css (für das Forum-Plugin)
+
* '''config_forum.css:''' das Forum-Plugin
−
* config_general.css (allgemeine Einstellungen (Artikellisten, Gruppenlisten,...))
+
* '''config_general.css:''' allgemeine Einstellungen (Artikellisten, Gruppenlisten,...)
−
* config_votes.css (Vote-Plugin)
+
* '''config_votes.css:''' Vote-Plugin
−
* style_counter.css (Counter-Plugin)
+
* '''style_counter.css:''' Counter-Plugin
−
* tool.css (Backend)
+
* '''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.  
+
 
 +
{{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 ==
−
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:
+
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 {
 
color: red;
 
color: red;
 
}
 
}
 
</code>
 
</code>
−
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''''':
+
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 '../../../cms/getcontent.php';
+
  require '../dynpg/getcontent.php';
−
    $DynPG->SetParam_PathToRoot('../../../cms/');
+
  $DynPG->SetParam_PathToRoot('../dynpg/cms/');
 
?>
 
?>
  
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
 
<!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">
 
<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>
 +
</code>
  
−
<head>
+
Und [[CSS Minimalbeispiel|hier]] nochmal das vollständige und ausführbare Beispiel.
−
<title>Einzelner Artikel</title>
+
  
−
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
+
== 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.
  
−
<?php $DynPG->Write_CSS_JS_Header(); ?>        <!--Standard-Css von DynPG einbinden-->
+
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.
−
<link rel="stylesheet" type="text/css" href="style.css" /> <!--eigenes style.css einbinden-->
+
−
</head>
+
  
−
<body>
+
=== 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.
  
−
<h1>Artikelansicht</h1>
 
  
−
<?php
+
[[Image:CSS Identifier Webseite.png]]
−
$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>
+
 
 +
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>
 
</code>
  
−
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]].

Aktuelle Version vom 26. September 2011, 12: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“