CSS: Unterschied zwischen den Versionen

Aus DynPG-Wiki
Wechseln zu: Navigation, Suche
Zeile 25: Zeile 25:
 
<code>[php,N]
 
<code>[php,N]
 
<?php
 
<?php
−
    require '../../../cms/getcontent.php';
+
  require '../../../cms/getcontent.php';
−
    $DynPG->SetParam_PathToRoot('../../../cms/');
+
  $DynPG->SetParam_PathToRoot('../../../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>
−
<head>
+
    <title>Einzelner Artikel</title>
−
<title>Einzelner Artikel</title>
+
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
−
 
+
    <!--Standard-Css von DynPG einbinden-->
−
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
+
    <?php $DynPG->Write_CSS_JS_Header(); ?>
−
 
+
    <!--eigenes style.css einbinden-->
−
<?php $DynPG->Write_CSS_JS_Header(); ?>       <!--Standard-Css von DynPG einbinden-->
+
    <link rel="stylesheet" type="text/css" href="style.css" />
−
<link rel="stylesheet" type="text/css" href="style.css" /> <!--eigenes style.css einbinden-->
+
  </head>
−
</head>
+
  <body>
−
 
+
    <h1>Artikelansicht</h1>
−
<body>
+
    <?php
−
 
+
      $DynPG->SetParam_A_Anytime(true); //Artikel von Anfang an anzeigen
−
<h1>Artikelansicht</h1>
+
      $DynPG->SetParam_A_Article(11);   //ArtikelNr. angeben
−
 
+
      $DynPG->Write_Article();         //Artikel mit der Nr. 11 ausgeben
−
<?php
+
    ?>
−
$DynPG->SetParam_A_Anytime(true);   //Artikel von Anfang an anzeigen
+
  </body>
−
$DynPG->SetParam_A_Article(11); //ArtikelNr. angeben
+
−
$DynPG->Write_Article(); //Artikel mit der Nr. 11 ausgeben
+
−
?>
+
−
</body>
+
−
 
+
 
</html>
 
</html>
 
</code>
 
</code>
Zeile 59: Zeile 54:
 
== CSS-Referenz ==
 
== CSS-Referenz ==
  
−
{| border="1"
+
{| class="dynpgwikitable"
 +
|+ CSS-Bezeichner - Artikel-Detail-Ansicht
 
! <center>Name</center>
 
! <center>Name</center>
 
! <center>Typ</center>
 
! <center>Typ</center>
Zeile 110: Zeile 106:
  
 
|}
 
|}
−
'''Tabelle 2.5. CSS-Bezeichner - Artikel-Detail-Ansicht'''
 
  
  
−
 
+
{| class="dynpgwikitable"
−
{| border="1"
+
|+ CSS-Bezeichner - Artikellisten-Ansicht
 
! <center>Name</center>
 
! <center>Name</center>
 
! <center>Typ</center>
 
! <center>Typ</center>
Zeile 170: Zeile 165:
  
 
|}
 
|}
−
'''Tabelle 2.6. CSS-Bezeichner - Artikellisten-Ansicht'''
 
  
  
−
 
+
{| class="dynpgwikitable"
−
{| border="1"
+
|+ CSS-Bezeichner - Gruppenlisten-Ansicht
 
! <center>Name</center>
 
! <center>Name</center>
 
! <center>Typ</center>
 
! <center>Typ</center>
Zeile 215: Zeile 209:
  
 
|}
 
|}
−
'''Tabelle 2.7. CSS-Bezeichner - Gruppenlisten-Ansicht'''
 
  
  
−
 
+
{| class="dynpgwikitable"
−
{| border="1"
+
|+ CSS-Bezeichner - Artikel-Druck-Ansicht
 
! <center>Name</center>
 
! <center>Name</center>
 
! <center>Typ</center>
 
! <center>Typ</center>
Zeile 260: Zeile 253:
  
 
|}
 
|}
−
'''Tabelle 2.8. CSS-Bezeichner - Artikel-Druck-Ansicht'''
 
  
  
−
 
+
{| class="dynpgwikitable"
−
{| border="1"
+
|+ CSS-Bezeichner - Home-Ansicht
 
! <center>Name</center>
 
! <center>Name</center>
 
! <center>Typ</center>
 
! <center>Typ</center>
Zeile 330: Zeile 322:
  
 
|}
 
|}
−
'''Tabelle 2.9. CSS-Bezeichner - Home-Ansicht'''
 
−
 
  
  
−
{| border="1"
+
{| class="dynpgwikitable"
 +
|+ CSS-Bezeichner - Suchform
 
! <center>Name</center>
 
! <center>Name</center>
 
! <center>Typ</center>
 
! <center>Typ</center>
Zeile 350: Zeile 341:
  
 
|}
 
|}
−
'''Tabelle 2.10. CSS-Bezeichner - Suchform'''
 

Version vom 24. März 2009, 14:16 Uhr

Dieser Artikel ist möglicherweise nicht auf einem aktuellen Stand. Aktualisieren Sie ihn, wenn Sie können!


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

CSS-Bezeichner - Artikel-Detail-Ansicht
Name
Typ
Beschreibung
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.


CSS-Bezeichner - Artikellisten-Ansicht
Name
Typ
Beschreibung
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  


CSS-Bezeichner - Gruppenlisten-Ansicht
Name
Typ
Beschreibung
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  


CSS-Bezeichner - Artikel-Druck-Ansicht
Name
Typ
Beschreibung
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


CSS-Bezeichner - Home-Ansicht
Name
Typ
Beschreibung
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.


CSS-Bezeichner - Suchform
Name
Typ
Beschreibung
dynpg_search_query Id  
dynpg_search_submit Id  
Von „http://wiki-de.dynpg.org/wiki_de/index.php?title=CSS&oldid=1869“