Verschiedene Styles pro Seite mit einer body-id

Um mehreren Seiten innerhalb einer Website unterschiedliche Designs zu verpassen, gibt es mehrere Wege. Ein Weg, der sehr schnell umzusetzen ist, ist mit einer <body-id>.
Dabei wird der <body> Tag mit einer ID erweitert und ist somit abweichend per CSS zu stylen.

In meinem Beispiel habe ich die Topnavigation meiner Seite auf allen Seiten in Grau gestaltet. Nachdem ich nun das Typoscript eingefügt hatte, konnte ich abweichend auf irgendeiner Seite per CSS das Tag und somit alle Elemente abweichend ansprechen.

Dies kann z. B. auch sehr sinnvoll sein, um die Seite mit Hintergrundbildern auszustatten (jede Seite ein anderes Hintergrundbild) ohne gleich zu einer speziellen Extension greifen zu müssen.

Hier die Beispiele:

in das Root-Template wird in das Setup folgendes eingetragen:

# bodyTag
page.bodyTag >
page.bodyTagCObject = TEXT
page.bodyTagCObject.field = uid
page.bodyTagCObject.wrap = <body id="mh-|">

Das <body id=“mh-|“> ist natürlich nur in diesem Falle relevant. Es kann auch einfach weggelassen werden. Generell reicht natürlich <body id=“|“>
So werden nun alle Seiten quasi durchnummeriert.
In meinem Beispiel habe ich die #Topnav nun folgendermaßen gestylt:

/*Version in Grau die für alles Seiten gilt:*/
#topnav a {
color:#ccc;
font-weight:bold;
background:transparent;
text-decoration:none;
}
#topnav a:focus,
#topnav a:hover,
#topnav a:active {
color:#fff;
text-decoration:underline;
background-color:transparent;
}

/*Version in orange die nur auf der Seite mit der ID-22 gilt:*/

#mh-22#topnav a {
color:#ff9900;
}

Wenn ich mag, kann ich nun auf der Seite mit der ID-23 z.B. eine grüne #topnav machen. Auch alle anderen Elemente lassen sich so anders stylen.
Nur mit CSS und den oben angegebenen 4 Zeilen TypoScript.

Keine Kommentare »

Michael am Juni 10th 2010 in Allgemein, css, TypoScript Snippet

Trackback URI | Comments RSS

Kommentar schreiben