CSS-Referenz: Unterschied zwischen den Versionen
Aus DynPG-Wiki
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 - | + | |+ CSS-Bezeichner - Gruppenlisten-Ansicht |
! <center>Name</center> | ! <center>Name</center> | ||
! <center>Typ</center> | ! <center>Typ</center> | ||
Zeile 8: | Zeile 11: | ||
|- | |- | ||
− | | | + | | <tt>dynpg_AG</tt> |
− | | | + | | <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 | ||
|- | |- | ||
− | | | + | | <tt>dynpg_AG_breadcrumb_pages</tt> |
− | | | + | | <tt>div</tt> |
− | | der | + | | Die Navigation mit der man auf die nächste Seite springen kann (wenn die Gruppenliste groß ist wird sie auf mehrere Seiten aufgeteilt) . |
|- | |- | ||
− | | | + | | <tt>dynpg_AG_row_Table</tt> |
− | | | + | | <tt>table</tt> |
− | | | + | | Enthält die Gruppenliste |
|- | |- | ||
− | | | + | | <tt>dynpg_AG_row_Main</tt> |
− | | | + | | <tt>tr</tt> |
− | | | + | | Eine Zeile der Gruppenliste |
|- | |- | ||
− | | | + | | <tt>dynpg_AG_row_Main_Col_01</tt> |
− | | | + | | <tt>td</tt> |
− | | | + | | Enthält <tt>dynpg_AG_row_Headtext</tt> und <tt>dynpg_AG_row_Description</tt> |
|- | |- | ||
− | | | + | | <tt>dynpg_AG_row_Headtext</tt> |
− | | | + | | <tt>p</tt> |
− | | | + | | Enthält den Link zur Gruppe |
|- | |- | ||
− | | | + | | <tt>dynpg_AG_row_Description</tt> |
− | | | + | | <tt>p</tt> |
− | | | + | | Beschreibungstext der Gruppe |
|- | |- | ||
− | | | + | | <tt>dynpg_AG_row_Main_Col_02</tt> |
− | | | + | | <tt>td</tt> |
− | | | + | | Enthält Erstelldatum der Gruppe |
|- | |- | ||
− | | | + | | <tt>dynpg_AG_row_Main_Col_03</tt> |
− | | | + | | <tt>td</tt> |
− | | | + | | 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> |
− | | | + | | <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> |
− | | | + | | <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) | ||
|- | |- | ||
− | | | + | | <tt>dynpg_AA_row_Table</tt> |
− | | | + | | <tt>table</tt> |
− | | | + | | Enthält die Artikelliste |
|- | |- | ||
− | | | + | | |
− | | | + | | |
− | | | + | | |
|- | |- | ||
− | | | + | | <tt>dynpg_AA_row_MainA</tt> |
− | | | + | | <tt>tr</tt> |
− | | | + | | Zeile mit ungerader Zeilennummer (1, 3, 5, ...) |
|- | |- | ||
− | | | + | | <tt>dynpg_AA_row_Main_Col_01A</tt> |
− | | | + | | <tt>td</tt> |
− | | | + | | 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) | ||
|- | |- | ||
− | | | + | | <tt>dynpg_AA_row_DescriptionB</tt> |
− | | | + | | <tt>div</tt> |
− | | | + | | Lead-Text des Artikels (gerade Zeile) |
|- | |- | ||
− | | | + | | <tt>dynpg_AA_row_Main_Col_02B</tt> |
− | | | + | | <tt>td</tt> |
− | | | + | | Enthält Erstelldatum des Artikels (gerade Zeile, sofern die Option im Backend für den Artikel aktiviert wurde) |
|- | |- | ||
− | | | + | | <tt>dynpg_AA_row_Main_Col_03B</tt> |
− | | | + | | <tt>td</tt> |
− | | | + | | Enthält Anzahl der Zugriffe auf diesen Artikel (gerade Zeile, sofern die Option im Backend für den Artikel aktiviert wurde) |
|- | |- | ||
− | | | + | | <tt>dynpg_AA_btnprint</tt> |
− | | | + | | <tt>div</tt> |
− | | | + | | Enthält Drucken-Button |
|} | |} | ||
+ | == Artikel-Detailansicht == | ||
{| class="wikitable" | {| class="wikitable" | ||
− | |+ CSS-Bezeichner - | + | |+ CSS-Bezeichner - Artikel-Detailansicht |
! <center>Name</center> | ! <center>Name</center> | ||
! <center>Typ</center> | ! <center>Typ</center> | ||
Zeile 121: | Zeile 174: | ||
|- | |- | ||
− | | | + | | <tt>dynpg_A"</tt> |
− | | | + | | <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 | ||
|- | |- | ||
− | | | + | | <tt>dynpg_A_header</tt> |
− | | | + | | <tt>div</tt> |
− | | | + | | der Kopf des Artikels (enthält Titel, Lead-Text und Erstelldatum) |
|- | |- | ||
− | | | + | | <tt>dynpg_A_header_text</tt> |
− | | | + | | <tt>p</tt> |
− | | | + | | Titel des Artikels |
|- | |- | ||
− | | | + | | <tt>dynpg_A_header_lead</tt> |
− | | | + | | <tt>div</tt> |
− | | | + | | Lead-Text des Artikels |
|- | |- | ||
− | | | + | | <tt>dynpg_A_header_date</tt> |
− | | | + | | <tt>p</tt> |
− | | | + | | Erstelldatum des Artikels |
|- | |- | ||
− | | | + | | <tt>dynpg_A_content</tt> |
− | | | + | | <tt>div</tt> |
− | | | + | | Umschließt den Inhaltstext des Artikels |
|- | |- | ||
− | | | + | | <tt>dynpg_A_btntwitter</tt> |
− | | | + | | <tt>div</tt> |
− | | | + | | 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- | + | |+ 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> |
− | | | + | | <tt>div</tt> |
− | | | + | | Container-Element das die gesamte Artikel-Detaildruckansicht umschließt |
|- | |- | ||
− | | dynpg_P_breadcrumb | + | | <tt>dynpg_P_breadcrumb</tt> |
− | | | + | | <tt>div</tt> |
| "Brotkrümel"-Navigation | | "Brotkrümel"-Navigation | ||
|- | |- | ||
− | | dynpg_P_header | + | | <tt>dynpg_P_header</tt> |
− | | | + | | <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> |
− | | | + | | <tt>p</tt> |
− | | | + | | Titel des Artikels |
|- | |- | ||
− | | dynpg_P_header_lead | + | | <tt>dynpg_P_header_lead</tt> |
− | | | + | | <tt>div</tt> |
− | | Lead | + | | Lead-Text des Artikels |
|- | |- | ||
− | | dynpg_P_header_date | + | | <tt>dynpg_P_header_date</tt> |
− | | | + | | <tt>p</tt> |
− | | | + | | Erstelldatum des Artikels |
|- | |- | ||
− | | dynpg_P_content | + | | <tt>dynpg_P_content</tt> |
− | | | + | | <tt>div</tt> |
− | | | + | | Umschließt den Inhaltstext des Artikels |
|} | |} | ||
+ | == Home-Ansicht == | ||
{| class="wikitable" | {| class="wikitable" | ||
Zeile 209: | Zeile 299: | ||
|- | |- | ||
− | | dynpg_H | + | | <tt>dynpg_H</tt> |
− | | | + | | <tt>div</tt> |
− | | | + | | Container-Element das die gesamte Home-Ansicht umschließt |
|- | |- | ||
− | | | + | | <tt>dynpg_H_parentgroup</tt> |
− | | | + | | <tt>div</tt> |
− | | | + | | Entält den Namen der Gruppe, die in der Home-Ansicht angezeigt wird |
|- | |- | ||
− | | | + | | <tt>dynpg_H_header</tt> |
− | | | + | | <tt>div</tt> |
− | | | + | | der Kopf des Artikels (enthält Titel, Lead-Text und Erstelldatum) |
|- | |- | ||
− | | | + | | <tt>dynpg_H_header_text</tt> |
− | | | + | | <tt>p</tt> |
− | | | + | | Titel des Artikels |
|- | |- | ||
− | | | + | | <tt>dynpg_H_header_lead</tt> |
− | | | + | | <tt>div</tt> |
− | | | + | | Lead-Text des Artikels |
|- | |- | ||
− | | | + | | <tt>dynpg_H_header_date</tt> |
− | | | + | | <tt>p</tt> |
− | | | + | | Erstelldatum des Artikels |
|- | |- | ||
− | | | + | | <tt>dynpg_H_content</tt> |
− | | | + | | <tt>div</tt> |
− | | | + | | Umschließt den Inhaltstext des Artikels |
|- | |- | ||
− | | | + | | <tt>dynpg_H_more</tt> |
− | + | | <tt>div</tt> | |
− | + | | "Mehr"-Link mit dem der Rest des Artikels angezeigt wird | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | | | + | |
− | | " | + | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
|} | |} | ||
+ | == Suchformular == | ||
{| class="wikitable" | {| class="wikitable" | ||
− | |+ CSS-Bezeichner - | + | |+ CSS-Bezeichner - Suchformular |
! <center>Name</center> | ! <center>Name</center> | ||
! <center>Typ</center> | ! <center>Typ</center> | ||
Zeile 278: | Zeile 349: | ||
|- | |- | ||
− | | | + | | <tt>DynPG_General_Search</tt> |
− | | | + | | <tt>form</tt> |
− | | | + | | Suchformular |
|- | |- | ||
− | | dynpg_search_submit | + | | <tt>dynpg_search_query</tt> |
− | | | + | | <tt>input</tt> |
− | | | + | | 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).
Inhaltsverzeichnis
Gruppenlisten-Ansicht
|
|
|
---|---|---|
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
|
|
|
---|---|---|
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
|
|
|
---|---|---|
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
|
|
|
---|---|---|
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
|
|
|
---|---|---|
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
|
|
|
---|---|---|
DynPG_General_Search | form | Suchformular |
dynpg_search_query | input | Eingabefeld des Suchformulars |
dynpg_search_submit | input (ID) | "Suchen"-Button des Eingabefelds |
Hinweis: Die Ausgabe der Sucherergebnisse erfolgt in einer normalen Artikelliste mit den entsprechenden CSS-Klassen.