TYPOlight CSS-Klassen und IDs

Druckbare Version

13.06.2009, 18:41
Nina

TYPOlight CSS-Klassen und IDs

Immer wieder taucht im Forum die Frage auf: „Welche Klassen und IDs werden in TYPOlight genutzt?“

Die Frage kann man sich natürlich selbst mit Hilfsmitteln wie Firebug beantworten, aber eine Übersicht der Modulklassen ist durchaus hilfreich. Deshalb stelle ich hier die wichtigsten CSS-Klassen und IDs zusammen.

Wichtig: Bei vielen Modulen kann man unterschiedliche Templates nutzen, so dass ihr natürlich wissen müsst, welches Template (und somit welche dazu passenden Klassen) ihr einsetzt.

Weshalb so viele DIVs und Klassen?
Oft taucht die Frage auf, weshalb TYPOlight so viele DIVs und Klassen nutzt. Beim Grundaufbau hilft diese "doppelte" Herangehensweise (Haupt-DIV und inside-InnenDIV) bei der Vermeidung vieler Bugs wie z. B. den bekannten Box Model Problemen.

TYPOlight weist jedem Modul diverse Klassen zu. So könnt ihr diese individuell in eurem Stylesheet anvisieren und einzelne Abschnitte umstylen. Ihr müsst also nicht selbst Klassen definieren, sondern findet meist schon eine passende Klasse vor die ihr nur im Stylesheet "ansprechen" müsst.
13.06.2009, 18:45
Nina
Grundaufbau des TYPOlight-Frameworks

Das TYPOlight-Framework baut die Seiten standardmäßig (wenn alle Bereiche aktiviert wurden) so auf:

Code:

#wrapper { } #header { } #header .inside { Ausgabe der Header Spalter } #container { } #left { } #left .inside { Ausgabe der Linken Spalte } #right { } #right .inside { Ausgabe der Rechten Spalte } #main { } #main .inside { Ausgabe der Hauptspalte } #footer { } #footer .inside { Ausgabe der Footer Spalte }

Sobald in einer Spalte ein Artikelbereich angelegt wird, kommt für diesen jeweils die Klasse .mod_article hinzu. Wenn man also nur Artikelbereiche in einer bestimmten Spalte per CSS ansprechen möchte, kann man dies tun, indem man die ID der jeweiligen Spalte noch davor definiert (Z.B. #left .mod_article { }).

Natürlich kann man diese Bereiche noch spezifisch für einzelne Seiten der Website definieren. Hierzu bietet TYPOlight gleich zwei Hilfsmittel:
1. <body>-Klasse: In der Seitenstruktur kann man einer Seite eine individuelle Klasse zuweisen. Die Klasse taucht dann innerhalb des <body>-Befehls dieser Seite auf.
2. Individuelle Artikel-ID: Jeder Artikelbereich bekommt automatisch seinen Alias als ID (zusätzlich zur Klasse .mod_article) zugewiesen. So kann man im CSS ebenfalls zwischen Seiten / Artikeln variieren.
13.06.2009, 18:59
Nina
CSS-Klassen für das News-Modul

Die Darstellung von Neuigkeiten erfolgt auf zwei Seiten:
1. Übersichtsseite mit Auflistung der Neuigkeiten mit ihren wichtigsten Daten und einem Link zur Detailseite
2. Detailseite mit dem kompletten Newsbeitrag
Insgesamt stehen für die News (News-Archiv wird separat beschrieben) 4 Templates zur Verfügung. Meist wird das Template "news_full" für die Detailansicht genutzt, während eines der anderen drei Templates "news_latest", "news_short" oder "news_simple" für die Übersichtsseite eingesetzt wird.

Newstemplate: news_latest

Code:

div.mod_newslist { } div.layout_latest { } p.info { Datum, Name und Kommentaranzahl } div.image_container { } a { Link zur Bild-Großansicht } img { Bild-Kleinansicht } div.caption { Bilduntertitel } h2 { } a { Link zur Detailansicht und Newstitel} p.teaser { Teasertext des Newsbeitrages } p.more { } a { Link zur Detailansicht}

Das DIV mit der Klasse "layout_latest" bekommt als zweite Klasse abwechselnd "odd" oder "even" zugewiesen. So kann man z. B. den Newsbeiträgen abwechselnde Hintergrundfarben zuweisen.

Zudem hat das DIV beim ersten Newsbeitrag in der Newsliste als dritte Klasse "first" und der letzte Newsbeitrag die ergänzende Klasse "last".

Newstemplate: news_short

Code:

div.mod_newslist { } div.layout_short { } p.info { Datum, Name und Kommentaranzahl } h2 { } a { Link zur Detailansicht und Newstitel} p.teaser { Teasertext des Newsbeitrages } p.more { } a { Link zur Detailansicht}

Das DIV mit der Klasse "layout_short" bekommt als zweite Klasse abwechselnd "odd" oder "even" zugewiesen. So kann man z. B. den Newsbeiträgen abwechselnde Hintergrundfarben zuweisen.

Zudem hat das DIV beim ersten Newsbeitrag in der Newsliste als dritte Klasse "first" und der letzte Newsbeitrag die ergänzende Klasse "last".

Newstemplate: news_simple

Code:

div.mod_newslist { } div.layout_simple { Datum } a { Link zur Detailansicht und Newstitel }

Das DIV mit der Klasse "layout_simple" bekommt als zweite Klasse abwechselnd "odd" oder "even" zugewiesen. So kann man z. B. den Newsbeiträgen abwechselnde Hintergrundfarben zuweisen.

Zudem hat das DIV beim ersten Newsbeitrag in der Newsliste als dritte Klasse "first" und der letzte Newsbeitrag die ergänzende Klasse "last".

Newstemplate: news_full

Code:

div.mod_newsreader { } div.layout_full { } h1 { Newstitel } p.info { Datum, Autor und Kommentaranzahl } div.ce_text { Nachrichtentext } div.image_container { } a { Link zur Bild-Großansicht } img { Bild-Kleinansicht } div.caption { Bilduntertitel } div.enclosure { } p { } img { Dateiformat-Icons } a { Link zur Download-Datei } p.back { } a { "Zurück"-Link } div.ce_comments { Der Aufbau des Kommentar-Moduls wird separat beschrieben! }

Das DIV mit der Klasse "layout_full" bekommt als zweite Klasse abwechselnd "odd" oder "even" zugewiesen. So kann man z. B. den Newsbeiträgen abwechselnde Hintergrundfarben zuweisen.

Zudem hat das DIV beim ersten Newsbeitrag in der Newsliste als dritte Klasse "first" und der letzte Newsbeitrag die ergänzende Klasse "last".
13.06.2009, 19:02
Nina

CSS-Klassen für das News-Modul
CSS-Klassen für das News-Modul

Das Newsarchiv kann als Ergänzung zum Newsmodul eingesetzt werden. Es besteht meist aus einer Seite in der zwei Module eingebunden werden:
- Nachrichtenarchiv-Menü
- Nachrichtenarchiv
Das Menü dient zur Navigation zwischen den einzelnen Archivabschnitten (Jahre / Monate). Das Modul "Nachrichtenarchiv" ist dem normalen Nachrichtenliste-Modul sehr ähnlich und basiert auf den gleichen Templates.

Modul: Newsarchiv Menü

Code:

div.mod_newsmenu { } ul.level_1 { } li.year submenu { Jahr } ul.level_2 { } li { } a { Monat, Jahr, Anzahl der Einträge }

Den Listenpunkten der Monate werden beim ersten Eintrag die Klasse "first" und beim letzten Eintrag die Klasse "last" zugewiesen.

Modul: Newsarchiv

Code:

div.mod_newsarchive { } h1 { Archivüberschrift } Hier folgt die Ausgabe der Newsbeiträge je nach gewähltem Newstemplate.
13.06.2009, 19:12
Nina
CSS-Klassen für das Formular-Modul (tabellenbasiert)

Mit dem Formulargenerator von TYPOlight können Sie die unterschiedlichsten Formulare erstellen. Da es hierfür sehr viele Möglichkeiten gibt, ist die nachfolgende Übersicht in mehrere Abschnitte aufgeteilt:
- Grundaufbau des Formulars (am Beispiel des tabellenbasierten Formulars)
- Aufbau der einzelnen Formularelemente
Grundaufbau beim tabellenbasierten Formular

Code:

div.ce_form { } form { } div.formbody { } table { } tbody { } tr.row_0 even row_first { } Hier folgen je nach gewähltem Formularelement unterschiedliche Ausgaben in den Tabellenfeldern (<td>)

TYPOlight nummeriert alle Tabellenzeilen (<tr>) beginnend mit der Klasse "row_0" (row_1, row_2, row_3, ...) durch. Außerdem erhalten die Tabellenzeilen abwechselnd als Zweitklasse "even" oder "odd" zugewiesen, wodurch man z.B. zeilenweise abwechselnde Farbhintergründe definieren könnte. Für die erste Tabellenzeile wird als Drittklasse noch "row_first" und für die letzte Tabellenzeige die Drittklasse "row_last" vergeben.

Für die Tabellenfelder (<td>) werden ebenfalls Klassen vergeben. Wie diese aufgebaut sind, hängt vom jeweils gewählten Formularelement ab.

Bei dieser Auflistung der einzelnen Formularelemente gehe ich bewusst davon aus, dass alle Felder als Pflichtfelder deklariert wurden, damit hier der volle Aufbau dargestellt werden kann. Wenn ihr Felder nicht als Pflichtfelder deklariert, fallen die "mandatory"-Zusatzklassen und Pflichtfeld-<span> natürlich weg.

Überschrift (je nach Wahl H1 - H6)

Code:

td.colspan headline { } h1 { frei definierte Überschrift }

Erklärung

Code:

td.colspan explanation { } beliebiger Inhalt der in den WYSIWYG-Editor eingegeben wurde

Textfeld

Code:

td.col_0 col_first { } label.mandatory { Labelbezeichnung } span.mandatory { * als Zeichen für Pflichtfeld } td.col_1 col_last { } input.text mandatory { }

Passwortfeld

Code:

td.col_0 col_first { } label.confirm mandatory { Labelbezeichnung } span.mandatory { * als Zeichen für Pflichtfeld } td.col_1 col_last { } input.text password mandatory

Textarea

Code:

td.col_0 col_first { } label.mandatory { Labelbezeichnung } span.mandatory { * als Zeichen für Pflichtfeld } td.col_1 col_last { } textarea.textarea mandatory

Select (Standard)

Code:

td.col_0 col_first { } label.mandatory { Labelbezeichnung } span.mandatory { * als Zeichen für Pflichtfeld } td.col_1 col_last { } select.select mandatory { } option / optiongroup { Ausgabe der einzelnen Optionswerte }

Select (Multiselect-Variante)

Code:

td.col_0 col_first { } label.mandatory { Labelbezeichnung } span.mandatory { * als Zeichen für Pflichtfeld } td.col_1 col_last { } select.multiselect mandatory { } option / optiongroup { Ausgabe der einzelnen Optionswerte }

Radiobox

Code:

td.col_0 col_first { } label.mandatory { Labelbezeichnung } span.mandatory { * als Zeichen für Pflichtfeld } td.col_1 col_last { } div.radio_container mandatory { } span { } input.radio { } label { Labelbezeichnung für die jeweilige Radiobox }

Checkbox

Code:

td.col_0 col_first { } label.mandatory { Labelbezeichnung } span.mandatory { * als Zeichen für Pflichtfeld } td.col_1 col_last { } div.checkbox_container mandatory { } span { } input.checkbox label { Labelbezeichnung für die jeweilige Checkbox }

Datei-Upload

Code:

td.col_0 col_first { } label.mandatory { Labelbezeichnung } span.mandatory { * als Zeichen für Pflichtfeld } td.col_1 col_last { } input.upload mandatory { }

Sicherheitsfrage

Code:

td.col_0 col_first { } label.mandatory { Labelbezeichnung } span.mandatory { * als Zeichen für Pflichtfeld } td.col_1 col_last { } input.captcha { } span.captcha_text { Rechenaufgabe als Antispam-Mittel }

Absendefeld

Code:

td.col_0 col_first { leeres Tabellenfeld } td.col_1 col_last { } div.submit_container { } input.submit { }
13.06.2009, 19:13
Nina

CSS-Klassen für das Formular-Modul (tabellenlos)

folgt sobald ich Zeit dafür habe

CSS-Klassen für das Events-Modul

folgt sobald ich Zeit dafür habe

CSS-Klassen für das Kommentar-Modul

folgt sobald ich Zeit dafür habe

CSS-Klassen für das FAQ-Modul

folgt sobald ich Zeit dafür habe

CSS-Klassen für das Glossar-Modul

folgt sobald ich Zeit dafür habe
01.09.2009, 17:33
dol...

Hallo Nina,

Danke SEHR für die überaus hilfreichen Erklärungen :D
Ich finde den Aufbau des TL-CSS total praktisch und gestalte meine Websites "nur" mit den Anpassungen im bestehenden CSS. Da ich mich mit PHP überhaupt nicht auskenne. :o

Deine Erklärungen zu den Module ect. sind mir eine grosse Hilfe!!

Herzliche Grüsse
Dolores
24.11.2009, 06:43
mb-23

Ich habe mal die CSS Klassen für den Formulargenerator (Tabellenlos) etwas aufgedröselt.
Ist nicht ganz vollständig aber so, daß man ein normales Formular auf einer Webseite gestalten kann.
Ich hoffe es hilft:)

Code:

/*Formular Typolight*/ /* @group Formular */ /*Umschliesst das komplette Formular*/ div.ce_form { } /*Umschliesst das komplette Formular innerhalb des Form Tags*/ div.formbody { } /*Labels*/ div.formbody label{ display: block; } /*Textfelder*/ div.formbody .text{ width: 250px; } /*Absätze*/ div.formbody br{ margin: 0px 0 0px 0; } /*Textarea*/ div.formbody textarea{ } /*Captcha Textfeld*/ div.formbody .captcha{ width: 40px; } /*Captcha Text*/ div.formbody .captcha_text{ font-size: 90%; } /*Submit Button*/ div.formbody .submit{ float: left; } /**/ div.formbody .text, div.formbody .captcha{ margin:0px 0 20px 0 ; } /*Fehlertext*/ div.formbody p.error{ margin: 0; color: #ffbf23; } /* @end */ /*Ende Formular Typolight*/
30.11.2009, 09:12
schueler

vielen Dank für die Auflistung des Aufbaus! Das ist echt übersichtlich.

Bei Zeit werde ich mal n paar Navigationen aufdröseln..
06.03.2010, 22:23
e-zebra

Gibt es sonst irgendwo eine Möglichkeit, alle CSS-Klassen bzw IDs nachzulesen (evtl. auf English)???
06.03.2010, 22:32
MacKP

Hallo e-zebra,
am aktuellsten ist da immer der Quelltext. Und da hilft einem die Erweiterung firebug für Firefox enorm weiter.
Da ist dann auch die Sprache nicht mehr so wichtig.. da die Module ja im Grunde alle auf engl. sind und das CSS baut darauf auf (sind ja alles passende Abkürzungen).

Der Vorteil ist: man sieht die Klassen und ID's direkt in ihrer natürlichen Umgebung und kann sehen wie die Vererbungne so funktionieren können.

Viele Grüße
31.05.2010, 08:28
ckay48

Vielen Dank!

Die detaillierte Beschreibung der einzelnen Klassen hat mir sehr geholfen! :D
23.02.2012, 18:40
isti

Hallo,

herzlichen Dank auch meinerseits für die Liste.

Eine Zwischenfrage an diesem Beispiel:

"td.col_0 col_first { leeres Tabellenfeld }
td.col_1 col_last { }
div.submit_container { }
input.submit { }"

Wenn ich also den Absendefeld einen farbigen Hintergrund verpassen möchte dann soll ich den CSS-Block so anfangen:

"#div.submit.container
blabla"

Ist es so gemeint?

Danke sehr.

Gr. i.
24.02.2012, 10:29
jeg

CSS-Selektor für Absendenfeld

Hallo isti,
wenn du das Absendenfeld gestalten willst, geht das entweder mit

Code:

div.submit_container

oder einfach mit

Code:

.submit_container

Liebe Grüsse
Jonas
24.02.2012, 12:30
andreasisaak

Nicht ganz korrekt. Das Absendefeld selber spricht man mit input.submit oder .submit an. Was du erwähnt hast ist der Container drum herum. Damit wirst du das Absendefeld nicht gestalten können.
24.02.2012, 13:40
isti

Danke sehr,

wäre es eventuell eine Option hier auf der Commonity Webseite eine Art zentrale Wiki zu betreiben, wo all diese Info in tabellarischer Form gepflegt werden?
Ich bemühe zwar Firebug fleißig, trotzdem kam es schon öfters vor, dass ich die ID / Klasse die default vergeben worden sind, einfach nicht fand. Eine komplette Liste der default-Core-Objekten wäre es geraden Anfängern hilfreich. Eine transparente Tabelle würde auch helfen, dass die Leute von Anfang an die Struktur verstehen und einen Gesamtüberblick haben.

Was meint ihr?

Gr. I.
24.02.2012, 16:01
andreasisaak

Es gibt bereits ein Wiki. http://de.contaowiki.org/Hauptseite

Wenn es die Übersicht der Klassen/ID's dort noch nicht gibt, dann kannst sie dort einfach anlegen. Frag bitte Nina ob du ihre Liste 1:1 übernehmen darfst und dann ist es ja nur noch Copy & Paste.
24.02.2012, 22:06
jeg

Zitat:

Zitat von andreasisaak

Nicht ganz korrekt. Das Absendefeld selber spricht man mit input.submit oder .submit an. Was du erwähnt hast ist der Container drum herum. Damit wirst du das Absendefeld nicht gestalten können.

Das stimmt natürlich. Ich wollte eigentlich auch nur sagen, dass man mit

Code:

#div.submit.container

ganz sicher zu keinem Ergebnis kommen wird und zeigen, wie man den Submit-Container korrekt ansprechen kann. Trotzdem danke für die Korrektur.
27.03.2014, 09:53
ameisoid

Wenn die Worte fehlen

Normalerweise hilft ja google immer und die meisten Antworten stammen aus diesem Forum, aber heute hab ich ein zutiefst grundsätzliches Problem.
Ich will die Navigation gestalten, die auftaucht, wenn ich sinne Bildergalerie von z.B. 100 Bildern auf 5 Seiten verteile. Ich Suche die Bezeichnung der Klasse oder ID, weil die Navigation ja "von selbst" entsteht. Aber ich weiß nicht wie man diese Art von Navigation bezeichnet.:cool: Wie heißt diese Navi und welche iD oder Klasse hat sie?

Grüße und Danke

p.S. übrigens hier ist sie hübsch fein ungestaltet zu sehen, falls ich mich unverständlich ausgedrückt habe
http://www.ameisoid.de/index.php/id-...enmuehlen.html
27.03.2014, 10:26
MacKP

Hallo ameisoid,
wenn man in den Quellcode schaut, dann hilft einem das schon mal enorm weiter -> class="pagination block"
Das Ding heißt also Pagination und bringt ne eigene Klasse mit. Alles relevante ist in diesem Div. kannstdamit also Stylen wie du willst.

Fürs nächste mal: einfach Quellcode angucken. Zur Erleichterung mit irgendeinem Developer Tools (Firebug oder sonst was).

Viele Grüße