Hilfe:Liste der CSS-Befehle

Die common.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.

Einführung

Erste Schritte

Zunächst musst du deine common.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 gelben "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-neu	Die Werbung für David Sowkas Buch in der linken Leiste
#bodyContent	Der Inhalt einer Seite
.mw-newarticletext	Der Text, der im Fenster steht, wenn man einen neuen Artikel anlegen möchte
#rctext	Die Meldung in den Letzten Änderungen
#p-cactions	Die Reiter am oberen Seitenrand (u. a. Bearbeiten, etc.)
#p-personal	Die Links am oberen Seitenrand (u. a. Einstellungen, Beobachtungsliste, etc.)
#p-	Die vier Icons unter dem Logo
#p-Navigation	Der kleine Kasten in der linken Leiste unter den vier Icons
#p-Mitmachen	Der kleine Kasten in der linken Leiste mit dem Titel Mitmachen
#p-search	Das kleine Textfeld am oberen Seitenrand (bei Monobook in der linken Leiste), mit dem gesucht wird
#p-tb	Der kleine Kasten in der linken Leiste mit dem Titel Werkzeuge
#p-lang	Der kleine Kasten in der linken Leiste mit dem Titel In anderen Sprachen
.usermessage	Der Kasten, der erscheint, wenn man eine Nachricht bekommt
.ns-0	Eine der Seitenarten, eine Tabelle mit allen findet man hier
.mw-editTools	Der graue "Per Klick einfügen..."-Kasten unter dem Bearbeitungsfeld
#kat_div_2	Die Box, mit der man Kategorien per Klick einfügen kann
#socialshareprivacy	diverser Facebook-Twitter-etc.-Kram am Ende der Seite
#copywarn	Die Warnung unter dem Bearbeitungsfenster, keine fremden Texte zu kopieren
#anontalkpagetext	Der Hinweistext am unteren Ende von IP-Diskussionen
#verlinkter_banner	Der Kasten, der den Urlaubs-SC ankündigt
#talkpagetext	Der Signaturhinweis auf Diskussionsseiten
#awards	Die Auszeichnungssterne rechts neben dem Titel

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 seine common.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:

Beispiel

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:

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

Der Code im Beispiel erzeugt diesen 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:

Willkommen! Hier kannst Du eine neue Seite anlegen.

Die Stupidedia ist die humorvolle Alternative zur Wikipedia. Dementsprechend sind unsere Artikel formal wie enzyklopädische Beiträge gestaltet, inhaltlich aber ist alles erlaubt, was Spaß bringt! Nähere Informationen dazu findest du in den Richtlinien. Wenn du keinen enzyklopädischen Artikel schreiben willst, sondern ein Gedicht, eine Geschichte, ein Pamphlet,... dann ist auch das erlaubt. Alle Texte, die nicht dem enzyklopädischen Format entsprechen, gehören in den Namensraum »Diverses«.

Du kannst mit Klick auf „Vorschau zeigen“ dein Werk betrachten, ohne es abzuspeichern, oder unser Labor nutzen, wenn du zunächst nur ein wenig ausprobieren möchtest.

Nimm bitte zur Kenntnis, dass Artikel gelöscht werden, wenn sie gegen die Richtlinien verstoßen. Sehr unfertige Artikel werden ebenfalls nach einigen Tagen gelöscht. Das ist nicht persönlich gemeint, sondern dient der Qualitätssicherung. Empfehlung: Als angemeldeter Nutzer kannst du die Inuse-Vorlage nutzen, um anzuzeigen, dass du noch an deinem Artikel arbeitest. Dann hast du mindestens einen Monat Zeit, in der dich niemand dabei stört.

Viel Spaß und Erfolg!

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:

Du hast eine neue Nachricht von einem anderen Benutzer (letzte Änderung).

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:

Du hast eine neue Nachricht von einem anderen Benutzer (letzte Änderung).

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--1	Spezialseiten
.ns-0	Artikel
.ns-1	Artikel Diskussion
.ns-2	Benutzerseite
.ns-3	Benutzerdiskussion
.ns-4	Stupidedia
.ns-5	Stupidedia Diskussion
.ns-6	Datei
.ns-7	Datei 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
.ns-100	Portal
.ns-101	Portal Diskussion
.ns-102	Diverses
.ns-103	Diverses Diskussion
.ns-104	Sub
.ns-105	Sub Diskussion
.ns-106	Spiegelwelten
.ns-107	Spiegelwelten Diskussion
.ns-274	Widget
.ns-275	Widget 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

Achtung! Nicht aktuell!

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