Hilfe:CSS-Klassen

Persönliche CSS-Datei

Mit einer persönlichen CSS-Datei hast du einige Möglichkeiten, das Aussehen von Wikibooks an deine Wünsche anzupassen. Eine kleine Auswahl an Vorschlägen findest Du in den folgenden Abschnitten. Mit CSS stehen dir neben diesen Vorschlägen zahllose weitere Gestaltungsmöglichkeiten offen.

Persönliche CSS-Datei erstellen

Um eine persönliche CSS-Datei zu erstellen stehen dir zwei Wege zur Verfügung.

Möglichkeit 1: Datei über Benutzereinstellungen erstellen

Der weniger fehleranfällige Weg führt über deine Benutzer Einstellungen. Dort gibt es unter dem Titel "Aussehen" einen Abschnitt mit dem Titel "Benutzeroberfläche". In diesem Abschnitt findest du eine Reihe Radiobuttons, die von "Kölnisch Blau" bis "Vektor" beschriftet sind. Sie geben das Theme vor, das aktuell in Verwendung ist.

Hinter jedem Radiobutton findest Du eine Serie von Links. Der Link "Benutzerdefiniertes CSS" hinter dem Theme, das du aktuell verwendest, führt dich an die richtige Stelle, an der du dein persönliches Stylesheet ablegen kannst.

Möglichkeit 2: Datei direkt erstellen

Der alternative Weg eine persönliche CSS-Datei anzulegen ist zwar schneller, als die beschriebene Variante. Um ihn nehmen zu können musst Du allerdings wissen, welches Theme Du gerade benutzt. Je nach Theme musst du eine Datei Benutzer:Name/Seitenname.css erstellen. Name musst du dabei durch deinen Benutzernamen ersetzen. Anstelle von Seitenname.css musst du, je nach verwendetem Theme, einen Seitennamen einsetzen, den du der folgenden Tabelle entnehmen kannst.

Theme	Seitenname
Kölnisch Blau	cologneblue.css
Modern	modern.css
MonoBook	monobook.css
Vector	vector.css

Vorschläge

Hier einige Beispiele, was du in diese Datei schreiben kannst. Du kannst diese „Blöcke“ in beliebiger Auswahl und Reihenfolge in die Datei schreiben. Leerzeilen zwischen den Blöcken dürfen enthalten sein. Technisch gesehen handelt es sich bei der Datei um ein CSS-Stylesheet. Einen Überblick über weitere Gestaltungsmöglichkeiten kannst du dir z.B. im gleichnamigen Kapitel des Wikibook Websiteentwicklung verschaffen.

Wikibooks-Logo unterdrücken

/** Hide Wikibooks-Logo */
#column-one { padding-top: 1.8em; }
#p-logo     { display: none; }

Copyright-Warnung unterdrücken

/** Hide Copyrightwarning - mittlerweile hab ich es verstanden ;-) */
#editpage-copywarn  { display: none; }

Warnung "Seite hat mehr als 32k Byte" unterdrücken

/** Hide long Page Warning */
#editpage-longpagewarning   { display: none; }

Schrift um 20% vergrößern

#bodyContent
{
 font-size:120%;
}

Änderungen deutlicher hervorheben

//** Für Rot-Grün Schwache: Änderungen in Blau und größer */
.diffchange  
{ 
 color: blue; font-weight:bold; font-size:120%; 
}

Ausdruck unterdrücken

Ist etwas nicht zum Ausdrucken gedacht (z. b. Navigation), wird dies z. B. durch die CSS-Klasse "noprint" realisiert. Hier findest du eine Liste mit Wiki-CSS-Klassen.

So benutzt du die Wiki-CSS-Klassen

Um einen Tag einer Klasse zuzuweisen, nimmst du das Attribut "class". Beispiele:

<span class="noprint">Dieser Text wird nicht ausgedruckt.</span>

<div class="floatleft" style="background-color: #578AD6;">Text links</div>
 Dies ist ein normaler Text. Er fließt hier vor sich hin.
 Links neben ihm ist ein blauer Kasten.

Beispiel mit Tabelle:

<div style="width: 30%;">
{| class="floatright"
|----
!a
!b
!c
|----
|1
|2
|3
|}
</div>

a	b	c
1	2	3

Das sieht dann so aus:

...

Liste der Wiki-CSS-Klassen

CSS-Klasse	Beispiel	Code
noprint Beschreibung: Der Text wird nicht mitausgedruckt.	Dieser Satz wird ausgedruckt. Dieser Satz wird nicht ausgedruckt.	`Dieser Satz wird ausgedruckt. <span class="noprint">Dieser Satz wird nicht ausgedruckt.</span>`
floatleft Beschreibung: Das Objekt erscheint links.	Text links Dies ist ein normaler Text. Er fließt hier vor sich hin. Links neben ihm ist ein blauer Kasten.	`<div class="floatleft" style="background-color: #578AD6;">Text links</div>Dies ist ein normaler Text. Er fließt hier vor sich hin. Links neben ihm ist ein blauer Kasten.`
floatright Beschreibung: Das Objekt erscheint rechts.	Text rechts Dies ist ein normaler Text. Er fließt hier vor sich hin. Rechts neben ihm ist ein blauer Kasten.	`<div class="floatright" style="background-color: #578AD6;">Text rechts</div>Dies ist ein normaler Text. Er fließt hier vor sich hin. Rechts neben ihm ist ein blauer Kasten.`
NavFrame, NavHead und NavContent Beschreibung: Zum Unterbringen von Zusatzmaterial, z.B. Tabellen oder Beispiele, welches voraussichtlich nicht jeden Leser interessiert. s.h. Hilfe:Details_ausblenden Hinweis: Der Text "Einklappen" hat die Klasse "NavToggle". Bei deaktivierten JavaScript ist die Box immer aufgeklappt.	Hier stehen die Details Hier steht der präzisierende Text im Wiki-Format	`<div style="clear:both;" class="NavFrame">` `<div class="NavHead">Hier stehen die Details</div>` `<div class="NavContent" style="text-align:left;">` Hier steht der präzisierende Text im Wiki-Format `</div></div>`

Vordefinierte Farben

Es gibt neun vordefinierte Hintergrundfarben (hintergrundfarbe1 bis hintergrundfarbe9). Eingestellt werden sie z.B. mit:

<span class="hintergrundfarbe9">Inhalt</span>

hintergrundfarbe1
hintergrundfarbe2
hintergrundfarbe3
hintergrundfarbe4
hintergrundfarbe5
hintergrundfarbe6
hintergrundfarbe7
hintergrundfarbe8
hintergrundfarbe9