CSS-Referenz: Unterschied zwischen den Versionen

Aus DynPG-Wiki
Wechseln zu: Navigation, Suche
K
(CSS-Referenz überarbeitet)
Zeile 1: Zeile 1:
 
[[Kategorie:Integration in eine Webseite]]
 
[[Kategorie:Integration in eine Webseite]]
 +
In diesem Artikel finden Sie eine Übersicht aller von DynPG bei der Ausgabe erstellten CSS-Klassen. Sofern nicht anders vermerkt, handelt es sich bei den Bezeichnern immer um CSS-Klassen (und nicht um eindeutige Identifier).
 +
 +
== Gruppenlisten-Ansicht ==
  
 
{| class="wikitable"
 
{| class="wikitable"
|+ CSS-Bezeichner - Artikel-Detail-Ansicht
+
|+ CSS-Bezeichner - Gruppenlisten-Ansicht
 
! <center>Name</center>
 
! <center>Name</center>
 
! <center>Typ</center>
 
! <center>Typ</center>
Zeile 8: Zeile 11:
  
 
|-
 
|-
| dynpg_A_breadcrumb
+
| <tt>dynpg_AG</tt>
| Id
+
| <tt>div</tt>
 +
| Container-Element das die gesamte Gruppenliste umschließt
 +
 
 +
|-
 +
| <tt>dynpg_AG_breadcrumb_navi</tt>
 +
| <tt>div</tt>
 
| "Brotkrümel"-Navigation  
 
| "Brotkrümel"-Navigation  
  
 
|-
 
|-
| dynpg_A_header
+
| <tt>dynpg_AG_breadcrumb_pages</tt>
| Id
+
| <tt>div</tt>
| der Kopf des Artikels (enthält u.a. den Titel, Datum, Lead,...)
+
| Die Navigation mit der man auf die nächste Seite springen kann (wenn die Gruppenliste groß ist wird sie auf mehrere Seiten aufgeteilt) .
  
 
|-
 
|-
| dynpg_A_header_text
+
| <tt>dynpg_AG_row_Table</tt>
| Id
+
| <tt>table</tt>
| der Text im Kopf des Artikels
+
| Enthält die Gruppenliste
  
 
|-
 
|-
| dynpg_A_header_lead
+
| <tt>dynpg_AG_row_Main</tt>
| Id
+
| <tt>tr</tt>
| Lead im Kopf des Artikels
+
| Eine Zeile der Gruppenliste
  
 
|-
 
|-
| dynpg_A_header_date
+
| <tt>dynpg_AG_row_Main_Col_01</tt>
| Id
+
| <tt>td</tt>
| Datum im Kopf des Artikels
+
| Enthält <tt>dynpg_AG_row_Headtext</tt> und <tt>dynpg_AG_row_Description</tt>
  
 
|-
 
|-
| dynpg_A_content
+
| <tt>dynpg_AG_row_Headtext</tt>
| Id
+
| <tt>p</tt>
| Der gesamte Inhalt des Artikels
+
| Enthält den Link zur Gruppe
  
 
|-
 
|-
| dynpg_A_btnprint
+
| <tt>dynpg_AG_row_Description</tt>
| Id
+
| <tt>p</tt>
| "drucken"-Knopf um den Artikel an den Drucker zu senden
+
| Beschreibungstext der Gruppe
  
 
|-
 
|-
| dynpg_A_more
+
| <tt>dynpg_AG_row_Main_Col_02</tt>
| Id
+
| <tt>td</tt>
| "mehr"-Knopf mit dem der Rest des Artikels angezeigt wird
+
| Enthält Erstelldatum der Gruppe
  
 
|-
 
|-
| dynpg_A_edit_mode
+
| <tt>dynpg_AG_row_Main_Col_03</tt>
| Id
+
| <tt>td</tt>
| Knopf für den Editier-Modus mit dem man ins Backend gelangt um den Artikel zu bearbeiten.
+
| Enthält Anzahl der Zugriffe auf diese Gruppe (sofern die Option im Backend für die Gruppe aktiviert wurde)
  
 
|}
 
|}
  
 +
== Artikellisten-Ansicht ==
  
 
{| class="wikitable"
 
{| class="wikitable"
Zeile 62: Zeile 71:
  
 
|-
 
|-
| dynpg_AA_breadcrumb_navi
+
| <tt>dynpg_AA</tt>
| Id
+
| <tt>div</tt>
 +
| Container-Element das die gesamte Artikelliste umschließt
 +
 
 +
|-
 +
| <tt>dynpg_AA_breadcrumb_navi</tt>
 +
| <tt>div</tt>
 
| "Brotkrümel"-Navigation  
 
| "Brotkrümel"-Navigation  
  
 
|-
 
|-
| dynpg_AA_breadcrumb_pages
+
| <tt>dynpg_AA_breadcrumb_pages</tt>
| Id
+
| <tt>div</tt>
 
| Die Navigation mit der man auf die nächste Seite springen kann. (Wenn die Artikelliste groß ist wird sie auf mehrere Seiten aufgeteilt)  
 
| 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
+
| <tt>dynpg_AA_row_Table</tt>
| Id
+
| <tt>table</tt>
| Knopf für den Editier-Modus mit dem man ins Backend gelangt um den Artikel zu bearbeiten.
+
| Enthält die Artikelliste
  
 
|-
 
|-
| dynpg_AA_row_Headtext
+
|  
| Id
+
|  
| &nbsp;
+
|  
  
 
|-
 
|-
| dynpg_AA_row_Description
+
| <tt>dynpg_AA_row_MainA</tt>
| Id
+
| <tt>tr</tt>
| &nbsp;
+
| Zeile mit ungerader Zeilennummer (1, 3, 5, ...)
  
 
|-
 
|-
| dynpg_AA_row_table
+
| <tt>dynpg_AA_row_Main_Col_01A</tt>
| Id
+
| <tt>td</tt>
| &nbsp;
+
| enthält <tt>dynpg_AA_row_HeadtextA</tt> und <tt>dynpg_AA_row_DescriptionA</tt>
 +
|-
 +
| <tt>dynpg_AA_row_HeadtextA</tt>
 +
| <tt>p</tt>
 +
| Enthält den Link zum Artikel (ungerade Zeile)
 +
 
 +
|-
 +
| <tt>dynpg_AA_row_DescriptionA</tt>
 +
| <tt>div</tt>
 +
| Lead-Text des Artikels (ungerade Zeile)
 +
 
 +
|-
 +
| <tt>dynpg_AA_row_Main_Col_02A</tt>
 +
| <tt>td</tt>
 +
| Enthält Erstelldatum des Artikels (ungerade Zeile, sofern die Option im Backend für den Artikel aktiviert wurde)
 +
 
 +
|-
 +
| <tt>dynpg_AA_row_Main_Col_03A</tt>
 +
| <tt>td</tt>
 +
| Enthält Anzahl der Zugriffe auf diesen Artikel (ungerade Zeile, sofern die Option im Backend für den Artikel aktiviert wurde)
 +
 
 +
|-
 +
|
 +
|
 +
|
 +
 
 +
|-
 +
| <tt>dynpg_AA_row_MainB</tt>
 +
| <tt>tr</tt>
 +
| Zeile mit gerader Zeilennummer (2, 4, 6, ...)
 +
 
 +
|-
 +
| <tt>dynpg_AA_row_Main_Col_01B</tt>
 +
| <tt>td</tt>
 +
| enthält <tt>dynpg_AA_row_HeadtextB</tt> und <tt>dynpg_AA_row_DescriptionB</tt>
 +
|-
 +
| <tt>dynpg_AA_row_HeadtextB</tt>
 +
| <tt>p</tt>
 +
| Enthält den Link zum Artikel (gerade Zeile)
  
 
|-
 
|-
| dynpg_AA_row_MainA
+
| <tt>dynpg_AA_row_DescriptionB</tt>
| Id
+
| <tt>div</tt>
| &nbsp;
+
| Lead-Text des Artikels (gerade Zeile)
  
 
|-
 
|-
| dynpg_AA_row_Main_Col_01A
+
| <tt>dynpg_AA_row_Main_Col_02B</tt>
| Id
+
| <tt>td</tt>
| &nbsp;
+
| Enthält Erstelldatum des Artikels (gerade Zeile, sofern die Option im Backend für den Artikel aktiviert wurde)
  
 
|-
 
|-
| dynpg_AA_row_MainB
+
| <tt>dynpg_AA_row_Main_Col_03B</tt>
| Id
+
| <tt>td</tt>
| &nbsp;
+
| Enthält Anzahl der Zugriffe auf diesen Artikel (gerade Zeile, sofern die Option im Backend für den Artikel aktiviert wurde)
  
 
|-
 
|-
| dynpg_AA_row_Main_Col_01B
+
| <tt>dynpg_AA_btnprint</tt>
| Id
+
| <tt>div</tt>
| &nbsp;
+
| Enthält Drucken-Button
  
 
|}
 
|}
  
 +
== Artikel-Detailansicht ==
  
 
{| class="wikitable"
 
{| class="wikitable"
|+ CSS-Bezeichner - Gruppenlisten-Ansicht
+
|+ CSS-Bezeichner - Artikel-Detailansicht
 
! <center>Name</center>
 
! <center>Name</center>
 
! <center>Typ</center>
 
! <center>Typ</center>
Zeile 121: Zeile 174:
  
 
|-
 
|-
| dynpg_AG_breadcrumb_navi
+
| <tt>dynpg_A"</tt>
| Id
+
| <tt>div</tt>
 +
| Container-Element das die gesamte Artikel-Detailansicht umschließt
 +
 
 +
|-
 +
| <tt>dynpg_A_breadcrumb</tt>
 +
| <tt>div</tt>
 
| "Brotkrümel"-Navigation  
 
| "Brotkrümel"-Navigation  
  
 
|-
 
|-
| dynpg_AG_breadcrumb_pages
+
| <tt>dynpg_A_header</tt>
| Id
+
| <tt>div</tt>
| Die Navigation mit der man auf die nächste Seite springen kann. (Wenn die Gruppenliste groß ist wird sie auf mehrere Seiten aufgeteilt)  
+
| der Kopf des Artikels (enthält Titel, Lead-Text und Erstelldatum)  
  
 
|-
 
|-
| dynpg_AG_row_Headtext
+
| <tt>dynpg_A_header_text</tt>
| Id
+
| <tt>p</tt>
| &nbsp;
+
| Titel des Artikels
  
 
|-
 
|-
| dynpg_AG_row_Description
+
| <tt>dynpg_A_header_lead</tt>
| Id
+
| <tt>div</tt>
| &nbsp;
+
| Lead-Text des Artikels
  
 
|-
 
|-
| dynpg_AG_row_table
+
| <tt>dynpg_A_header_date</tt>
| Id
+
| <tt>p</tt>
| &nbsp;
+
| Erstelldatum des Artikels
  
 
|-
 
|-
| dynpg_AA_row_Main
+
| <tt>dynpg_A_content</tt>
| Id
+
| <tt>div</tt>
| &nbsp;
+
| Umschließt den Inhaltstext des Artikels
  
 
|-
 
|-
| dynpg_AA_row_Main_Col_01
+
| <tt>dynpg_A_btntwitter</tt>
| Id
+
| <tt>div</tt>
| &nbsp;
+
| Twitter-Linkbutton
 +
 
 +
|-
 +
| <tt>dynpg_A_btnfacebook</tt>
 +
| <tt>div</tt>
 +
| Facebook-Linkbutton
 +
 
 +
|-
 +
| <tt>dynpg_A_btnpdf</tt>
 +
| <tt>div</tt>
 +
| Artikel-zu-PDF Link
 +
 
 +
|-
 +
| <tt>dynpg_A_btnrecommend</tt>
 +
| <tt>div</tt>
 +
| Weiterempfehlen-Button
 +
 
 +
|-
 +
| <tt>dynpg_A_btnlink</tt>
 +
| <tt>div</tt>
 +
| Link-Button
 +
 
 +
|-
 +
| <tt>dynpg_A_btnprint</tt>
 +
| <tt>div</tt>
 +
| Drucken-Button
 +
 
 +
|-
 +
| <tt>dynpg_A_more</tt>
 +
| <tt>div</tt>
 +
| "Mehr"-Link mit dem der Rest des Artikels angezeigt wird
  
 
|}
 
|}
  
 +
== Artikel-Druckansicht ==
  
 
{| class="wikitable"
 
{| class="wikitable"
|+ CSS-Bezeichner - Artikel-Druck-Ansicht
+
|+ CSS-Bezeichner - Artikel-Druckansicht
 
! <center>Name</center>
 
! <center>Name</center>
 
! <center>Typ</center>
 
! <center>Typ</center>
Zeile 165: Zeile 254:
  
 
|-
 
|-
| dynpg_P
+
| <tt>dynpg_P</tt>
| Id
+
| <tt>div</tt>
| &nbsp;
+
| Container-Element das die gesamte Artikel-Detaildruckansicht umschließt
  
 
|-
 
|-
| dynpg_P_breadcrumb
+
| <tt>dynpg_P_breadcrumb</tt>
| Id
+
| <tt>div</tt>
 
| "Brotkrümel"-Navigation  
 
| "Brotkrümel"-Navigation  
  
 
|-
 
|-
| dynpg_P_header
+
| <tt>dynpg_P_header</tt>
| Id
+
| <tt>div</tt>
| Kopf des Artikels  
+
| der Kopf des Artikels (enthält Titel, Lead-Text und Erstelldatum)
  
 
|-
 
|-
| dynpg_P_header_text
+
| <tt>dynpg_P_header_text</tt>
| Id
+
| <tt>p</tt>
| Text im Kopf des Artikels  
+
| Titel des Artikels
  
 
|-
 
|-
| dynpg_P_header_lead
+
| <tt>dynpg_P_header_lead</tt>
| Id
+
| <tt>div</tt>
| Lead im Kopf des Artikels  
+
| Lead-Text des Artikels  
  
 
|-
 
|-
| dynpg_P_header_date
+
| <tt>dynpg_P_header_date</tt>
| Id
+
| <tt>p</tt>
| Datum im Kopf des Artikels  
+
| Erstelldatum des Artikels
  
 
|-
 
|-
| dynpg_P_content
+
| <tt>dynpg_P_content</tt>
| Id
+
| <tt>div</tt>
| Inhalt des Artikels  
+
| Umschließt den Inhaltstext des Artikels
  
 
|}
 
|}
  
 +
== Home-Ansicht ==
  
 
{| class="wikitable"
 
{| class="wikitable"
Zeile 209: Zeile 299:
  
 
|-
 
|-
| dynpg_H
+
| <tt>dynpg_H</tt>
| Id
+
| <tt>div</tt>
| &nbsp;
+
| Container-Element das die gesamte Home-Ansicht umschließt
  
 
|-
 
|-
| dynpg_H_EM
+
| <tt>dynpg_H_parentgroup</tt>
| Id
+
| <tt>div</tt>
| &nbsp;
+
| Entält den Namen der Gruppe, die in der Home-Ansicht angezeigt wird
  
 
|-
 
|-
| dynpg_H_EM_glow
+
| <tt>dynpg_H_header</tt>
| Id
+
| <tt>div</tt>
| &nbsp;
+
| der Kopf des Artikels (enthält Titel, Lead-Text und Erstelldatum)
  
 
|-
 
|-
| dynpg_H_parentgroup
+
| <tt>dynpg_H_header_text</tt>
| Id
+
| <tt>p</tt>
| &nbsp;
+
| Titel des Artikels
  
 
|-
 
|-
| dynpg_H_header
+
| <tt>dynpg_H_header_lead</tt>
| Id
+
| <tt>div</tt>
| Kopf des Artikels  
+
| Lead-Text des Artikels  
  
 
|-
 
|-
| dynpg_H_header_text
+
| <tt>dynpg_H_header_date</tt>
| Id
+
| <tt>p</tt>
| Text im Kopf des Artikels  
+
| Erstelldatum des Artikels
  
 
|-
 
|-
| dynpg_H_header_lead
+
| <tt>dynpg_H_content</tt>
| Id
+
| <tt>div</tt>
| Lead im Kopf des Artikels  
+
| Umschließt den Inhaltstext des Artikels
  
 
|-
 
|-
| dynpg_H_header_date
+
| <tt>dynpg_H_more</tt>
| Id
+
| <tt>div</tt>
| Datum im Kopf des Artikels
+
| "Mehr"-Link mit dem der Rest des Artikels angezeigt wird
 
+
|-
+
| 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.
+
  
 
|}
 
|}
  
 +
== Suchformular ==
  
 
{| class="wikitable"
 
{| class="wikitable"
|+ CSS-Bezeichner - Suchform
+
|+ CSS-Bezeichner - Suchformular
 
! <center>Name</center>
 
! <center>Name</center>
 
! <center>Typ</center>
 
! <center>Typ</center>
Zeile 278: Zeile 349:
  
 
|-
 
|-
| dynpg_search_query
+
| <tt>DynPG_General_Search</tt>
| Id
+
| <tt>form</tt>
| &nbsp;
+
| Suchformular
  
 
|-
 
|-
| dynpg_search_submit
+
| <tt>dynpg_search_query</tt>
| Id
+
| <tt>input</tt>
| &nbsp;
+
| Eingabefeld des Suchformulars
 +
 
 +
|-
 +
| <tt>dynpg_search_submit</tt>
 +
| <tt>input</tt> (ID)
 +
| "Suchen"-Button des Eingabefelds
  
 
|}
 
|}
 +
 +
[[Image:Note.png]] ''Hinweis:'' Die Ausgabe der Sucherergebnisse erfolgt in einer normalen Artikelliste mit den entsprechenden CSS-Klassen.

Version vom 31. Oktober 2010, 09:41 Uhr

In diesem Artikel finden Sie eine Übersicht aller von DynPG bei der Ausgabe erstellten CSS-Klassen. Sofern nicht anders vermerkt, handelt es sich bei den Bezeichnern immer um CSS-Klassen (und nicht um eindeutige Identifier).

Gruppenlisten-Ansicht

CSS-Bezeichner - Gruppenlisten-Ansicht
Name
Typ
Beschreibung
dynpg_AG div Container-Element das die gesamte Gruppenliste umschließt
dynpg_AG_breadcrumb_navi div "Brotkrümel"-Navigation
dynpg_AG_breadcrumb_pages div 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_Table table Enthält die Gruppenliste
dynpg_AG_row_Main tr Eine Zeile der Gruppenliste
dynpg_AG_row_Main_Col_01 td Enthält dynpg_AG_row_Headtext und dynpg_AG_row_Description
dynpg_AG_row_Headtext p Enthält den Link zur Gruppe
dynpg_AG_row_Description p Beschreibungstext der Gruppe
dynpg_AG_row_Main_Col_02 td Enthält Erstelldatum der Gruppe
dynpg_AG_row_Main_Col_03 td Enthält Anzahl der Zugriffe auf diese Gruppe (sofern die Option im Backend für die Gruppe aktiviert wurde)

Artikellisten-Ansicht

CSS-Bezeichner - Artikellisten-Ansicht
Name
Typ
Beschreibung
dynpg_AA div Container-Element das die gesamte Artikelliste umschließt
dynpg_AA_breadcrumb_navi div "Brotkrümel"-Navigation
dynpg_AA_breadcrumb_pages div 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_row_Table table Enthält die Artikelliste
dynpg_AA_row_MainA tr Zeile mit ungerader Zeilennummer (1, 3, 5, ...)
dynpg_AA_row_Main_Col_01A td enthält dynpg_AA_row_HeadtextA und dynpg_AA_row_DescriptionA
dynpg_AA_row_HeadtextA p Enthält den Link zum Artikel (ungerade Zeile)
dynpg_AA_row_DescriptionA div Lead-Text des Artikels (ungerade Zeile)
dynpg_AA_row_Main_Col_02A td Enthält Erstelldatum des Artikels (ungerade Zeile, sofern die Option im Backend für den Artikel aktiviert wurde)
dynpg_AA_row_Main_Col_03A td Enthält Anzahl der Zugriffe auf diesen Artikel (ungerade Zeile, sofern die Option im Backend für den Artikel aktiviert wurde)
dynpg_AA_row_MainB tr Zeile mit gerader Zeilennummer (2, 4, 6, ...)
dynpg_AA_row_Main_Col_01B td enthält dynpg_AA_row_HeadtextB und dynpg_AA_row_DescriptionB
dynpg_AA_row_HeadtextB p Enthält den Link zum Artikel (gerade Zeile)
dynpg_AA_row_DescriptionB div Lead-Text des Artikels (gerade Zeile)
dynpg_AA_row_Main_Col_02B td Enthält Erstelldatum des Artikels (gerade Zeile, sofern die Option im Backend für den Artikel aktiviert wurde)
dynpg_AA_row_Main_Col_03B td Enthält Anzahl der Zugriffe auf diesen Artikel (gerade Zeile, sofern die Option im Backend für den Artikel aktiviert wurde)
dynpg_AA_btnprint div Enthält Drucken-Button

Artikel-Detailansicht

CSS-Bezeichner - Artikel-Detailansicht
Name
Typ
Beschreibung
dynpg_A" div Container-Element das die gesamte Artikel-Detailansicht umschließt
dynpg_A_breadcrumb div "Brotkrümel"-Navigation
dynpg_A_header div der Kopf des Artikels (enthält Titel, Lead-Text und Erstelldatum)
dynpg_A_header_text p Titel des Artikels
dynpg_A_header_lead div Lead-Text des Artikels
dynpg_A_header_date p Erstelldatum des Artikels
dynpg_A_content div Umschließt den Inhaltstext des Artikels
dynpg_A_btntwitter div Twitter-Linkbutton
dynpg_A_btnfacebook div Facebook-Linkbutton
dynpg_A_btnpdf div Artikel-zu-PDF Link
dynpg_A_btnrecommend div Weiterempfehlen-Button
dynpg_A_btnlink div Link-Button
dynpg_A_btnprint div Drucken-Button
dynpg_A_more div "Mehr"-Link mit dem der Rest des Artikels angezeigt wird

Artikel-Druckansicht

CSS-Bezeichner - Artikel-Druckansicht
Name
Typ
Beschreibung
dynpg_P div Container-Element das die gesamte Artikel-Detaildruckansicht umschließt
dynpg_P_breadcrumb div "Brotkrümel"-Navigation
dynpg_P_header div der Kopf des Artikels (enthält Titel, Lead-Text und Erstelldatum)
dynpg_P_header_text p Titel des Artikels
dynpg_P_header_lead div Lead-Text des Artikels
dynpg_P_header_date p Erstelldatum des Artikels
dynpg_P_content div Umschließt den Inhaltstext des Artikels

Home-Ansicht

CSS-Bezeichner - Home-Ansicht
Name
Typ
Beschreibung
dynpg_H div Container-Element das die gesamte Home-Ansicht umschließt
dynpg_H_parentgroup div Entält den Namen der Gruppe, die in der Home-Ansicht angezeigt wird
dynpg_H_header div der Kopf des Artikels (enthält Titel, Lead-Text und Erstelldatum)
dynpg_H_header_text p Titel des Artikels
dynpg_H_header_lead div Lead-Text des Artikels
dynpg_H_header_date p Erstelldatum des Artikels
dynpg_H_content div Umschließt den Inhaltstext des Artikels
dynpg_H_more div "Mehr"-Link mit dem der Rest des Artikels angezeigt wird

Suchformular

CSS-Bezeichner - Suchformular
Name
Typ
Beschreibung
DynPG_General_Search form Suchformular
dynpg_search_query input Eingabefeld des Suchformulars
dynpg_search_submit input (ID) "Suchen"-Button des Eingabefelds

Note.png Hinweis: Die Ausgabe der Sucherergebnisse erfolgt in einer normalen Artikelliste mit den entsprechenden CSS-Klassen.