TYPOlight CSS-Klassen und IDs

**Nina** · 13.06.2009, 19:45

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:

<body>-Klasse: In der Seitenstruktur kann man einer Seite eine individuelle Klasse zuweisen. Die Klasse taucht dann innerhalb des <body>-Befehls dieser Seite auf.
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.

**Nina** · 13.06.2009, 19:59

CSS-Klassen für das News-Modul

Die Darstellung von Neuigkeiten erfolgt auf zwei Seiten:

Übersichtsseite mit Auflistung der Neuigkeiten mit ihren wichtigsten Daten und einem Link zur Detailseite
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".

**Nina** · 13.06.2009, 20:02

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.

**Nina** · 13.06.2009, 20:12

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 { }

**Nina** · 13.06.2009, 20:13

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

**dol...** · 01.09.2009, 18:33

Hallo Nina,

Danke SEHR für die überaus hilfreichen Erklärungen

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.

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

Herzliche Grüsse
Dolores

**mb-23** · 24.11.2009, 07:43

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*/

**schueler** · 30.11.2009, 10:12

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

Bei Zeit werde ich mal n paar Navigationen aufdröseln..

**e-zebra** · 06.03.2010, 23:23

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

**MacKP** · 06.03.2010, 23:32

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

**ckay48** · 31.05.2010, 09:28

Vielen Dank!

Die detaillierte Beschreibung der einzelnen Klassen hat mir sehr geholfen!

**isti** · 23.02.2012, 19:40

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.

**jeg** · 24.02.2012, 11:29

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

**andreasisaak** · 24.02.2012, 13:30

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.