Zum Inhalt springen

Hilfe:CSS-Klassen

Aus Wikibooks

Hoch zum Lehrbuch

Persönliche CSS-Datei

[Bearbeiten]

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

[Bearbeiten]

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

Möglichkeit 1: Datei über Benutzereinstellungen erstellen

[Bearbeiten]

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

[Bearbeiten]

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

[Bearbeiten]

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

[Bearbeiten]
/** Hide Wikibooks-Logo */
#column-one { padding-top: 1.8em; }
#p-logo     { display: none; }
[Bearbeiten]
/** Hide Copyrightwarning - mittlerweile hab ich es verstanden ;-) */
#editpage-copywarn  { display: none; }

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

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

Schrift um 20% vergrößern

[Bearbeiten]
#bodyContent
{
 font-size:120%;
}

Änderungen deutlicher hervorheben

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

Ausdruck unterdrücken

[Bearbeiten]

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

[Bearbeiten]

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

[Bearbeiten]
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.

<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

[Bearbeiten]

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