Hilfe:Liste der ".css"-Befehle

Das monobook.css passt euch die Seiten der Stupidedia in einem individuellem Style optisch an. Das heißt, es können z.B die Hintergrundfarben oder Buttonformen verändert werden. Hier folgt jetzt eine kleine Liste der Befehle.

Ein Tip noch: Es ist nützlich, wenn vor der Lektüre dieser Seite bereits diese Seite gelesen hat.

Inhaltsverzeichnis 1 Einführung 1.1 Erste Schritte 1.2 Aufbau 2 Liste der Elemente 3 Eigenschaften 3.1 Schriftfarbe 3.2 Hintergrundfarbe 3.3 Fetter/unterstrichener Text 3.4 Schriftgröße 3.5 Schriftart 3.6 Rahmen 3.7 Elemente ausblenden 3.8 Feste Positionen zuweisen 4 Elemente 4.1 Einstellungen für das gesamte Dokument 4.1.1 Linkfarben 4.1.2 Schriftart/-größe 4.2 Werbung bzw. Buch-Werbung ausschalten 4.3 Hintergrundfarbe der Seite 4.4 Ausschalten von "newarticletext" 4.5 Ausschalten von den Hinweisen bei den letzten Änderungen 4.6 Usermessage gestalten 4.7 Hintergrundfarben ändern 4.8 Fixierte Suchbox 5 Weiterführende Links

Einführung

Erste Schritte

Zunächst musst du deine monobook.css anlegen. Dort kommen alle Befehle rein, die du verwenden möchtest.

Aufbau

In der Stupidedia gibt es verschiedene Elemente (manche können vielleicht mit dem Begriff Selektoren etwas anfangen), die sich mit verschiedenen Eigenschaften verändern lassen.

Element { Eigenschaft:Wert; }

Beispiel:

.usermessage { font-weight:bold; } 

Hier wird dem Element .usermessage, was für den gelden "Neue-Nachrichten"-Kasten steht, die Eigenschaft font-weight mit dem Wert bold zugewiesen (nicht wundern, font-weight wird später erklärt).

Wir beginnen mit den Eigenschaften und wenden uns später den Elementen zu.

Liste der Elemente

Jedoch ist hier noch eine Übersicht der Elemente, die verwendet werden können. Im nächsten Abschnitt, den Eigenschaften steht in den Scripts irgendein-Element. Das muss durch ein Element der nachfolgenden Tabelle (oder natürlich auch anderen) ersetzt werden:

Elementname	Erläuterung
body	Das gesamte Dokument
#werbung	Die Werbung in der linken Leiste
#buch	Die Werbung für David Sowka's Buch in der linken Leiste
#bodyContent	Der Hintergrund einer Seite
#newarticletext	Der Text, der im Fenster steht, wenn man einen neuen Artikel anlegen möchte
#rctext	Die Meldung in den Letzten Änderungen
#p-search	Das kleine Textfeld in der linken Leiste, mit dem gesucht wird
#p-tb	Der kleine Kasten in der linken Leiste mit dem Titel Werkzeuge
.usermessage	Der Kasten, der erscheint, wenn man eine Nachricht bekommt
.ns-0	Eine der Seitenarten, eine Tabelle mit allen findet man hier
#sitenotice	Die Sitenotice wird auf jeder Seite oben eingeblendet und umfasst einen grünen Kasten und einige Symbole.
#sitenotice img	Die Icons, die oben rechts auf jeder Seite erscheinen (Bestandteil der Sitenotice).

Eigenschaften

Schriftfarbe

Um die Schriftfarbe zu ändern, brauch man folgenden Code:

Das-Element { color: blue; }

Hintergrundfarbe

Das-Element { background-color: white; }

Mit diesem Befehl bekommt das Element mit dem Namen Das-Element eine weiße Hintergrundfarbe. Anstatt white kann man natürlich auch andere Farbwerte benutzen, z.B. red oder blue.

Fetter/unterstrichener Text

blabla { font-weight: bold; font-style:italic; }

Würde man dies in sein monobook.css eintragen, würden alle Elemente mit dem Namen blabla (welche natürlich nicht existieren) fett und kursiv.

Schriftgröße

Das-Element { font-size: 5px; }

Beeinflusst die Größe des Textes. Dieser Code erzeugt folgende Ausgabe:

Schriftart

Das Element { font-face: comic sans ms; }

Dieser Code verändert die Schriftart des Elements. Es sollte mit allen gängigen Schriftarten funktionieren. Mit diesem Code würde das Element so aussehen:
Der Script im Beispiel erzeugt diesen Text

Rahmen

Um einen Rahmen um ein Element zu erzeugen, braucht man die border-Eigenschaft.

Das-Element { border: 5px solid blue; }

Dabei müssen folgende Angaben vorhanden sein:

1. Die Rahmen-Dicke (hier 5 Pixel)
2. Die Rahmen-Art (hier solid). Sollte man bei solid belassen, wenn man sich nicht so genau damit auskennt.
3. Die Rahmen-Farbe (hier blue für einen blauen Rahmen)

Elemente ausblenden

Das-Element { display: none; }

Hiermit wird das Element Das-Element ausgeblendet.

Feste Positionen zuweisen

Irgendein-beliebiges-Element { position: fixed; top: 50px; right: 10px; }

Mit der Eigenschaft position ändert man die Positionsart eines Elements. Folgende Werte sind möglich:

• relative: Das Element wird, gemessen an der normalen Position verschoben.
• absolute: Das Element bekommt einen absoluten Wert zugewiesen, scrollt jedoch nicht im Browserfenster mit.
• fixed: Das Element bekommt einen absoluten Wert zugewiesen, scrollt jedoch im Browserfenster mit.

Die Eigenschaften top und right (im Beispiel) bzw. left und bottom bestimmen die genaue Position im Browserfenster gemessen vom oberen, rechten, linken und/oder unteren Rand aus.

Hat man als Positionsart relative gewählt, so wird das Element um die angegebene Pixelzahl nach oben, rechts, links und/oder rechts verschoben.

Zur besseren Verständnis noch ein Beispiel:

Irgendein-beliebiges-Element { position: relative; bottom: 50px; right: 10px; }

Hier wird das Element um 50 Pixel nach oben und 10 Pixel nach links geschoben (Die Zahlen im Code beziehen sich auf den Platz zwischen dem eigentlichen Element und dem der neuen Position, deshalb wird es nach links verschoben, obwohl man im Quelltext right geschrieben hat).

Elemente

Einstellungen für das gesamte Dokument

Hierfür braucht man meistens das body-Element, in einem Fall das a-Element, um alle Links zu ändern. Die Änderungen beziehen sich auf das gesamte Dokument (also auch die Navigation auf der linken Seite). Wer nur den Artikeltext ändern will, muss #bodyContent nehmen.

Linkfarben

a:link { color:blue; }
a:visited { color:silver; }
a:hover { color:green; }

Erklärung:

a:link ändert die Farbe des normalen Links (Standart: blau), a:visited die Farbe der besuchten Links, a:hover die Farbe der Links und über die man gerade mit der Maus fährt.

Schriftart/-größe

body { font-family: comic sans ms; }

Hiermit ändert man die Schriftart des gesamten Dokuments, in diesem Fall zu Microsoft Comic.

body { font-size: 25px; }

Die Schriftgröße des gesamten Fensters beträgt nun 25 Pixel.

Werbung bzw. Buch-Werbung ausschalten

Um die Werbung links am Rand auszuschalten braucht man folgenden Code:

#werbung { display: none; }

Auch die Buch-Werbung kann man ausblenden lassen:

#buch { display: none; }

Wie hier unschwer zu erkennen ist, braucht man die Eigenschaft um Elemente auszublenden.

Anstatt

#werbung { display: none; }
#buch { display: none; } 

kann man auch

#werbung, #buch { display: none; }

schreiben. Man behält besser die Übersicht, wenn man mehrere Elemente mit identischen Eigenschaften zusammenfügt.

Hintergrundfarbe der Seite

Mit background-color könnt ihr die Hintergrundfarbe der Seite ändern. Dazu braucht man die Hintergrund-Eigenschaft.

Beispiel:

#bodyContent { background-color:#E0E0E0; }

Ausschalten von "newarticletext"

Als "newarticletext" bezeichnet man den Text im roten Rahmen, der erscheint, wenn man einen neuen Artikel anlegen will:

Hier kannst Du den Text des neuen Artikels eintragen, aber bitte nicht nur 2-3 Sätze und auch keinen Schrott ablagern! Bitte nur in ganzen Sätzen schreiben und keine urheberrechtsgeschützten Texte anderer kopieren und bei uns einfügen. Schreib keinen Mist (Bashing) über Menschen aus Deinem Umfeld. Das interessiert hier keine Sau und wird sofort gelöscht! Falls Du neu hier bist, dann lies bitte jetzt gleich unsere Richtlinien, damit erst gar keine Missverständnisse auftreten. Solltest Du Bearbeitungshilfe benötigen, dann findest Du diese in unserer Editierhilfe. Falls Du Dich noch gar nicht in einem Wiki auskennst, dann würdest Du uns einen großen Gefallen tun, wenn Du zuerst in unserem Labor alles einmal ausprobierst. Für Neueinsteiger empfiehlt es sich die ersten Schritte in der Stupidedia zu besuchen. Sonstiges Wissenswertes erfährst Du unter Stupidedia:Hilfe.

Es gibt einen Befehl um diesen Kasten auszublenden, allerdings sollte man das nur tun, wenn man dessen Inhalt schon gelesen und verstanden hat. Hierzu braucht man die Eigenschaft zum ausblenden von Elementen. Nun der Code:

#newarticletext { display: none; }

Ausschalten von den Hinweisen bei den letzten Änderungen

Folgende Infos erscheinen bei den letzten Änderungen:

Diese Seite wird beim Laden automatisch aktualisiert. Angezeigt werden Seiten, die zuletzt bearbeitet wurden, sowie die Zeit und der Name des Autors. Falls Du neu bei der Stupidedia bist, lies bitte die Richtlinien und die Editierhilfe. Wenn Du möchtest, dass die Stupidedia zu einem Erfolg wird, dann füge bitte keine Texte und Bilder hinzu, die dem Urheberrecht anderer unterliegen. Dies könnte der Stupidedia sonst schweren Schaden zufügen.

Wer diese schon auswendig kennt, kann sie getrost ausschalten. Auch hierfür braucht man die Eigenschaft zum ausblenden von Elementen.

#rctext { display: none; }

Usermessage gestalten

Wenn man auf seiner Benutzerdiskussion eine Nachricht erhält, wird folgender Kasten angezeigt:

Um ihn etwas schöner zu gestalten eignen sich folgende Befehle:

.usermessage { font-weight:bold; background-color: lightgreen !important; border:5px solid blue !important; }

In diesem Beispiel werden die font-weight, background-color und border-Eigenschaften benutzen. Des Weiteren sind auch folgende Angaben erlaubt:

• color
• font-style (für kursiven Text)
• font-size
• position

Man sollte das !important nicht vergessen, denn sonst wird der Befehl nicht ausgeführt.

Mit den oben stehenden Einstellungen aus dem Beispiel sieht er dann so aus:

Wer den Kasten gar nicht mehr sehen will (z.B. weil sehr viel Unfug damit getrieben wird) kann ihn auch ganz ausschalten:

.usermessage { display: none; }

Hintergrundfarben ändern

.ns Nummer	Seitenart
.ns-0	Artikel
.ns-1	Artikel Diskussion
.ns-2	Benutzerseite
.ns-3	Benutzerdiskussion
.ns-4	Stupidedia
.ns-5	Stupidedia Diskussion
.ns-6	Bild
.ns-7	Bild Diskussion
.ns-8	MediaWiki
.ns-9	MediaWiki Diskussion
.ns-10	Vorlage
.ns-11	Vorlage Diskussion
.ns-12	Hilfe
.ns-13	Hilfe Diskussion
.ns-14	Kategorie
.ns-15	Kategorie Diskussion

Mit einigen einfachen Befehlen lassen sich die Hintergrundfarben der einzelnen Seitenarten (also Stupidedia [Bsp], Stupidedia Diskussion [Bsp], Hilfe [Bsp], usw) eingefärbt werden. Dazu nutzt man einfach folgenden Befehl:

.ns-0 * #content { background-color: white; }
.ns-0 * #p-cactions li { background-color: white; }
.ns-0 * #p-cactions li a { background-color: white; }

Hierbei ist jedoch zu beachten, dass der hier aufgeführte Script die Hintergrundfarbe normaler Artikel ändert. Um z.b. Diskussionsseiten einzzfärben muss man das .ns-0 durch .ns-1 ersetzen. Welche Nummer welche seite ändert, kann man der Tabelle (rechts) entnehmen. Eine Erklärung der einzelnen Seitenarten findet man hier. Wenn man einen vorgefertigten Script für sein Monobook haben möchte sollte man diese Seite besuchen.
Wenn man es allerdings selber erstellt sollte man zur besseren Übersicht noch über die 3 obenaufgeführten Zeilen folgende Zeile setzen. Sie ist nicht notwendig, erleichtert jedoch das bearbeiten:

/* Seitenart */

So weiß man immer welche Farbe man benötigt und muss nicht erst die .ns Sachen auswendig lernen.

Man muss natürlich den Farbwert "white" durch andere Farben ersetzen, sonst bleibt das Ganze weiß

Fixierte Suchbox

Mit folgendem Code kannst du bewirken, dass die Suchbox immer auf der selben Stelle bleibt, egal wo du hinscrollst.

#p-search{
  position: fixed;
  top:      27em;
}
#p-tb{
  margin-top: 6.5em;
}

Weiterführende Links

• SelfHTML Online-Lexikon