"CSS" leitet hierher weiter. Für die Erweiterung siehe Erweiterung:CSS .

Die Regeln des Cascading Style Sheet (CSS) bestimmen einen Großteil des Erscheinungsbilds von MediaWiki: Schriftgröße, Farben, Abstände, Logo und Hintergrundbild, sogar ob Seiteninhalte angezeigt oder ausgeblendet werden.

Um das Erscheinungsbild der Bildschirmdarstellung von MediaWiki (wie es im Browser aussieht) zu ändern, kannst du CSS in MediaWiki:Common.css einfügen. Diese Datei ist eine Seite in deinem Wiki und keine Datei wie index.php oder load.php, sodass du sie nicht in der Verzeichnisstruktur auf deinem Server findest. Außerdem ist sie zunächst auch nicht mit deiner Hauptseite oder einer anderen Seite verlinkt. Die Seite besteht zunächst nur aus einem einzeiligen Kommentar. Um sie zu finden, gebe MediaWiki:Common.css in das Suchfeld auf der Hauptseite deines Wiki ein. Sie wird als Datei mit einer Adresse wie https://www.myserver.org/mywiki/index.php?title=MediaWiki:Common.css angezeigt. (Erfordert die folgende Bearbeitungsberechtigung: "Benutzeroberflächenadministrator")

Um die Art und Weise zu ändern, wie MediaWiki-Seiten gedruckt werden, fügst du CSS in MediaWiki:Print.css in deinem Wiki ein.

CSS kann genutzt werden, um den Stil des gesamten Wikis ändern, beispielsweise um dem Hintergrund eine andere Farbe verleihen. Alternativ kannst du Inline-CSS verwenden, um bestimmte Textteile in deinem Wiki zu gestalten. Beispielsweise kann grüner Text durch <span style="color:green">grüner Text</span> erreicht werden. Wenn du den gesamten Text im Wiki größer machen möchtest, kannst du den Code body { font-size: larger; } zu MediaWiki:Common.css hinzufügen. Für die mobile Version verwendest du MediaWiki:Mobile.css.

Wenn $wgAllowUserCss in deinem Wiki aktiviert ist, können einzelne Benutzer unter Special:MyPage/<Skin-Name>.css benutzerdefinierte Stylesheets nur für sich selbst erstellen (beispielsweise Special:MyPage/vector.css, wenn sie den Skin Vector verwenden). Special:MyPage/common.css ermöglicht die Erstellung persönlicher Stylesheets für alle Skins.

Du kannst auch benutzerdefinierte Skins für MediaWiki erstellen.

Hilfe

CSS-Syntax, Attribute und Werte müssen korrekt sein, sonst funktioniert es nicht richtig. Das World Wide Web Consortium (W3C) ist eine hervorragende Referenz, um direkt anhand der Standards zu überprüfen, wie CSS richtig geschrieben wird:

• https://www.w3.org/TR/CSS21/propidx.html - CSS 2.1-Eigenschaftenindex ← sehr hilfreich
• http://www.w3.org/TR/CSS21/indexlist.html - CSS 2.1-Gesamtindex
• http://www.w3.org/TR/CSS21/cover.html#minitoc - CSS 2.1-Inhaltsverzeichnis

Wikipedia bietet einen guten Überblick über CSS.

Wenn du neben Demos von CSS-Funktionen auch ein leicht verständliches Nachschlagewerk bevorzugst, bietet dir die MDN CSS-Referenz einen "aktuellen" Leitfaden zur Syntax und grundlegenden Verwendung der verschiedenen Elemente.

• MDN CSS-Referenz

Einschränkungen

Achte darauf, dass deine HTML-Auszeichnungen semantisch bleiben. Sich bei der Bedeutungsgebung auf die Formatierung zu verlassen, ist keine gute Praxis (z. B. im Hinblick auf die maschinelle Lesbarkeit durch Suchmaschinen, Screenreader mit Text-zu-Sprache-Funktion und Textbrowser).

Bei Bedarf können benutzerdefinierte Stylesheets mithilfe des URL-Parameters safemode=1 vorübergehend deaktiviert werden.

.my-class {
	background: url("https://upload.wikimedia.org/wikipedia/commons/1/1a/some_image.svg");
}

@font-face {
  font-family: 'GochiHand';
  src: local("Gochi Hand"),
       url(https://xyz.wikipedia.org/w/extensions/UniversalLanguageSelector/data/fontrepo/fonts/GochiHand/GochiHand-Regular.woff2);
}

Siehe auch

• Manual:Interface/JavaScript
• Handbuch:Oberfläche/Stylesheets
• Erweiterung:CSS
• Erweiterung:TemplateStyles
• Handbuch:Kodierungskonventionen/CSS
• $wgUseSiteCss
• $wgAllowUserCss
• Kategorie:Benutzeroberflächen-Erweiterungen
• Category:Oberflächen-Erweiterungen
• Category:Snippets with CSS