Auf dieser Seite sammle ich einige nützliche CSS-Regeln. Sofern nicht anders angegeben, müssen die Regeln in die common.css eingefügt werden – oder gar die global.css, wenn man sie für alle Wikimedia-Projekte nutzen will.
Ich versuche zwar, die Regeln aktuell zu halten, trotzdem kann es teilweise sein, dass eine Regel hier veraltet ist.
Für allgemeinere Informationen siehe Wikipedia:Technik/Skin/CSS. Für Farbangaben in CCS siehe auch Webfarbe und Hilfe:Farbtabelle.
Weitere Beispiele für die mögliche CSS-Nutzung siehe unter Wikipedia:Technik/Skin/Benutzerstile.
Es gibt dann noch die externe Möglichkeit, die Regeln per Addons Stylus oder xStyle für Firefox und Chromium-Browser oder zumindestens bei Firefox per userContent.css einzubinden. Die Variante mit Stylus benutze ich größtenteils selbst.
Dort sind jeweils Links zu den eigentlichen Addonseiten für das Herunterladen zu finden, aber auch weitere Informationen.
Es sollte in den Addons unbedingt von der Möglichkeit Gebrauch gemacht werden, die Regeln auf die genutzte Domain wikipedia.org und gegebenenfalls weitere Domains aus dem Wikimedia-Universum einzuschränken – für Commons wäre das wikimedia.org.
Beachte obige Einleitung. Weitere Anmerkungen unterhalb des großen Stilblocks.
/* Farbige Symbole für den Wikieditor2010 */
/* Signatur */
#wikiEditor-ui-toolbar .oo-ui-iconElement[rel="signature"] {
margin-left: 3px;
margin-right: 3px;
}
#wikiEditor-ui-toolbar .oo-ui-icon-signature {
background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/2/2d/Insert-signature2.svg/22px-Insert-signature2.svg.png");
opacity: 1;
}/* https://commons.wikimedia.org/wiki/File:Insert-signature2.svg */
/* Linktool */
#wikiEditor-ui-toolbar .oo-ui-iconElement[rel="link"] {
margin-left: 3px;
margin-right: 3px;
}
#wikiEditor-ui-toolbar .oo-ui-icon-link {
background-image: url("https://upload.wikimedia.org/wikipedia/commons/4/48/Toolbar_Insert_link.png");
opacity: 1;
}/* https://commons.wikimedia.org/wiki/File:Toolbar_Insert_link.png */
/* Bild einfügen */
#wikiEditor-ui-toolbar .oo-ui-iconElement[rel="file"] {
margin-left: 3px;
margin-right: 3px;
}
#wikiEditor-ui-toolbar .oo-ui-icon-image {
background-image: url("https://upload.wikimedia.org/wikipedia/commons/6/6f/Toolbar_insert_file.png");
opacity: 1;
}/* https://commons.wikimedia.org/wiki/File:Toolbar_insert_file.png */
/* Quellenangaben */
#wikiEditor-ui-toolbar .oo-ui-iconElement[rel="reference"] {
margin-left: 3px;
margin-right: 3px;
}
#wikiEditor-ui-toolbar .oo-ui-icon-reference {
background-image: url("https://upload.wikimedia.org/wikipedia/commons/c/cf/Toolbar_insert_reference.png");
opacity: 1;
}/* https://commons.wikimedia.org/wiki/File:Toolbar_insert_reference.png */
/* Vorlagenassistent */
#wikiEditor-ui-toolbar .oo-ui-iconElement[rel="template-wizard"] {
margin-left: 3px;
margin-right: 3px;
}
#wikiEditor-ui-toolbar .oo-ui-icon-puzzle {
background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/f/f3/Crystal128-fifteenpieces.svg/22px-Crystal128-fifteenpieces.svg.png");
opacity: 0.75;
}/* https://commons.wikimedia.org/wiki/File:Crystal128-fifteenpieces.svg */
/* Schalter für Syntaxhervorhebung */
#wikiEditor-ui-toolbar .oo-ui-iconElement[rel="CodeMirror"] {
margin-left: 3px;
margin-right: 3px;
}
#wikiEditor-ui-toolbar .oo-ui-icon-highlight {
background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/8/8e/Crystal_fonts.png/22px-Crystal_fonts.png") !important;
opacity: 1 !important;
}/* https://commons.wikimedia.org/wiki/File:Crystal_fonts.png */
/* keine Wikisyntax - <nowiki> einfügen */
#wikiEditor-ui-toolbar .oo-ui-iconElement[rel="nowiki"] {
margin-left: 3px;
margin-right: 3px;
}
#wikiEditor-ui-toolbar .oo-ui-icon-noWikiText {
background-image: url("https://upload.wikimedia.org/wikipedia/commons/8/80/Toolbar_insert_nowiki.png");
opacity: 1;
}/* https://commons.wikimedia.org/wiki/File:Toolbar_insert_nowiki.png */
/* Galerien */
#wikiEditor-ui-toolbar .oo-ui-iconElement[rel="gallery"] {
margin-left: 3px;
margin-right: 3px;
}
#wikiEditor-ui-toolbar .oo-ui-icon-imageGallery {
background-image: url("https://upload.wikimedia.org/wikipedia/commons/8/8a/Toolbar_Insert_gallery.png");
opacity: 1;
}/* https://commons.wikimedia.org/wiki/File:Toolbar_Insert_gallery.png */
/* Weiterleitung */
#wikiEditor-ui-toolbar .oo-ui-iconElement[rel="redirect"] {
margin-left: 3px;
margin-right: 3px;
}
#wikiEditor-ui-toolbar .oo-ui-icon-articleRedirect {
background-image: url("https://upload.wikimedia.org/wikipedia/commons/7/76/Insert_redirect.png");
opacity: 1;
}/* https://commons.wikimedia.org/wiki/File:Insert_redirect.png */
/* Tabellen */
#wikiEditor-ui-toolbar .oo-ui-iconElement[rel="table"] {
margin-left: 3px;
margin-right: 3px;
}
#wikiEditor-ui-toolbar .oo-ui-icon-table {
background-image: url("https://upload.wikimedia.org/wikipedia/commons/1/1a/Toolbar_insert_table.png");
opacity: 1;
}/* https://commons.wikimedia.org/wiki/File:Toolbar_insert_table.png */
/*Suchen u. Ersetzen */
#wikiEditor-ui-toolbar .oo-ui-iconElement[rel="replace"] {
margin-left: 3px;
margin-right: 3px;
}
#wikiEditor-ui-toolbar .oo-ui-icon-articleSearch {
background-image: url("https://upload.wikimedia.org/wikipedia/commons/2/2e/Toolbar_Search-replace.png");
opacity: 1;
}/* https://commons.wikimedia.org/wiki/File:Toolbar_Search-replace.png */
/* Umschalter zwischen Quelltext- und Visualeditor */
#wikiEditor-ui-toolbar .oo-ui-icon-edit {
background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/e/e7/Fxemoji_u270F.svg/22px-Fxemoji_u270F.svg.png");
opacity: 1;
}/* https://commons.wikimedia.org/wiki/File:Fxemoji_u270F.svg */
/* Symbol für Visualeditor im Umschalter */
#wikiEditor-ui-toolbar .oo-ui-icon-eye {
background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/e/e1/Antu_quickview.svg/22px-Antu_quickview.svg.png");
}/* https://commons.wikimedia.org/wiki/File:Antu_quickview.svg */
Anmerkungen:
/*) vor der Regel einfügen bzw. bei Reaktivierung wieder entfernen. Die Markierung für das Kommentarende ist schon vorhanden – sie steht nach der Regel hinter dem Link zur Dateiseite (*/) – und darf bei Reaktivierung nicht entfernt werden!/* keine Wikisyntax - <nowiki> einfügen */
/*
#wikiEditor-ui-toolbar .oo-ui-iconElement[rel="nowiki"] {
margin-left: 3px;
margin-right: 3px;
}
#wikiEditor-ui-toolbar .oo-ui-icon-noWikiText {
background-image: url("https://upload.wikimedia.org/wikipedia/commons/8/80/Toolbar_insert_nowiki.png");
opacity: 1;
}/* https://commons.wikimedia.org/wiki/File:Toolbar_insert_nowiki.png */
Standardmäßig vorhandene Symbole können auch ausgeblendet werden. Um zum Beispiel den Umschalter für die visuelle oder Quelltextbearbeitung zu deaktivieren, kann man diese Regel nutzen:
/* Umschalter zwischen Quelltext- und Visualeditor ausblenden */
#wikiEditor-ui-toolbar .ve-init-mw-editSwitch { display:none;}
Wen der Knopf für die Umschaltung der Wikisyntax-Hervorhebung stört, kann auch ihn ausblenden:
/* Schalter für die Wikisyntax-Hervorhebung */
#wikiEditor-ui-toolbar .group-codemirror { display:none;}
Auf Anfrage hin bin ich gern behilflich.
.wikiEditor-ui-toolbar .page-characters div span {
font-family: "DejaVu Sans Mono", Consolas, monospace;
}
monospace sollte zur Sicherheit immer eingetragen werden, damit die im Browser als Standard vorgesehene Festbreitenschrift als letzter Ausweg bereitsteht. "DejaVu Sans Mono" steht als Beispiel, dass mehrteilige Namen in Anführungszeichen zu setzen sind..wikiEditor-ui-toolbar .page-greek div span,
.wikiEditor-ui-toolbar .page-greekextended div span {
font-family: Consolas, monospace ;
font-size: 101%;
}
.pages .page-characters span {
transition: all 500ms ease;
}
.pages .page-characters span:hover {
transform: scale(2);
transition-delay: 0s;
}
Die Einblendungen „Format“ und „Einfügen“ sind überflüssig, das Ausblenden geht mit
#wikiEditor-ui-toolbar .group-format .label, /* Bezeichnung "Format" */
#wikiEditor-ui-toolbar .group-insert .label /* Bezeichnung "Einfügen" */
{ display: none; }
Wenn man nur etwas testen und in der Vorschau kontrollieren und dabei sicher gehen will, dass man den Testzustand nicht versehentlich speichert (ist mir selbst schon passiert, zum Glück nur auf der Spielwiese), kann man vorübergehend auch das Feld zum Abspeichern verstecken (mit „Änderungen veröffentlichen“ beschriftet bzw., wenn die Seite neu ist, mit „Seite veröffentlichen“). Diese Regel würde ich nur in eines der oben genannten Browser-Addons eintragen.
/* WikiEditor, Feld zum Abspeichern ausblenden */
/* #wpSaveWidget { display: none; }/**/
Hier präsentiert ist der deaktivierte Zustand. Zum Aktivieren die Markierung /* zu Beginn der zweiten, hervorgehobenen Zeile entfernen, zum erneuten Deaktivieren dort wieder einfügen.
Die urheberrechtliche Warnung unterhalb des Eingabefeldes kann ausgeblendet werden:
/* urheberrechtliche Warnung am unteren Ende */
#editpage-copywarn { display: none; }
Das schützt bei Verstößen aber nicht vor etwaigen rechtlichen Folgen!
Beachte auch obige Einleitung.
In den Benutzeroberflächen (Skins) MonoBook und Vector hat ein angemeldeter Benutzer ein persönliche Leiste im Seitenkopf. Nachfolgend eine paar Regeln dafür. Sie sind auf das Vector-Skin abgestimmt, für MonoBook müssten sie gegebenenfalls etwas abgeändert werden. Auf Anfrage würde ich mir das ansehen.
Das Modern-Skin hat ebenso eine Kopfleiste. Dort scheinen mir die Abweichungen aber erheblicher zu sein.
Mir gefällt das monotone Logo nicht. Also habe ich mir aus der (leider sehr überfüllten) Bilderkategorie commons:Category:People icons ein farbiges Symbol herausgesucht, das auch in kleiner Größe noch gut aussieht:
/* anderes Benutzersymbol */
#pt-userpage a {
background-image: url("https://upload.wikimedia.org/wikipedia/commons/c/ce/Oxygen480-places-user-identity.svg");
} /* https://commons.wikimedia.org/wiki/File:Oxygen480-places-user-identity.svg */
Wer die Benachrichtigungssymbole für zu aufdringlich hält, kann sie auch blasser machen (genau genommen: der standardmäßig helle Hintergrund scheint je nach Wert mehr durch).
/* Benachrichtigungen (Echo) */
.mw-echo-notifications-badge { opacity: 0.5; }
.mw-echo-unseen-notifications { opacity: 0.75; }
.mw-echo-notifications-badge-all-read { opacity: 0.2; }
Die genauen Werte kann man sich nach Geschmack individuell einstellen; der Minimalwert 0 bedeutet „vollständig durchlässig“, der Maximalwert 1 „vollständig sichtbar“ (das ist der Standard). Statt der Zahlenwerte könnte man auch Prozentangaben verwenden, für 0.5 würde man 50% schreiben.
Die Verlinkung zu den Beta-Funktionen ausblenden. Sie können weiterhin in den Einstellungen erreicht werden.
/* Link zu Beta-Funktionen ausblenden */
#pt-betafeatures { display: none; }
Wenn man sowieso immer angemeldet ist, kann man den Punkt „Abmelden“ auch ausblenden:
/* "Abmelden" verstecken */
#pt-logout { display: none; }/**/
Ich selbst würde das aber besser nicht in die common.css oder global.css eintragen, sondern die oben erwähnten Addons nutzen, um diese Regel im Notfall leichter deaktivieren zu können. Dazu zu Beginn der zweiten Zeile /* einfügen.
Beachte auch obige Einleitung.
Seit dem Meinungsbild zur Nutzung von Daten aus Wikidata im ANR sollte jeglicher Inhalt, der aus Wikidata bezogen wird, im dewiki mit der HTML-Klasse wikidata-content markiert werden. (Das funktioniert leider nicht immer, es muss von den Vorlagenprogrammierern explizit ergänzt werden, eventuell per Modul.) Durch die Markierung mit einer Klasse kann man sich per CSS selbst entsprechende Inhalte hervorheben, einige Beispiele:
.wikidata-content {
background-color: #CCF0E0;
}
.wikidata-content {
color: rgb(139, 0, 139);
text-shadow: 0 0 10px rgba(139, 0, 139, 0.9);
}
darkmagenta..wikidata-content::after {
content: "(WD)";
font-size: 65%;
vertical-align: top;
(WD) steht genau einmal nach der Klasse, was bei Einbindungen mit Leerzeichen missverständlich sein kann: eine Information, noch eine Information, eine weitere Information aus Wikidata(WD).Wer will, kann den letzten Stil auch gemeinsam mit den anderen einsetzen (diese könnten übrigens gleichfalls zusammen genutzt werden). Die Beispiele funktionieren leider nicht bei Bildern.
Beachte auch obige Einleitung.
Irgendwo in den Tiefen der Wikipedia habe ich das vor Jahren gefunden(1) und nur noch etwas nach eigenem Geschmack geändert sowie an veränderte Gegebenheiten angepasst:
/* Start-/Hauptseite, Kästen verschiedenfarbig */
/* Willkommen */
#willkommen > .hauptseite-box-title /* Titelleiste */
{ background-color: #ddeeff; border-color: #c6c9ff; }
#willkommen > .hauptseite-box-content /* Inhaltsbereich */
{ background-color: #f0f8ff; border-color: #c6c9ff; }
/* Wikipedia aktuell (nur zeitweise aktiv) */
#wikipedia > .hauptseite-box-title
{ background-color: #fadf9c; border-color: #ffcc66; }
#wikipedia > .hauptseite-box-content
{ background-color: #fffafa; border-color: #ffcc66; }
/* Artikel des Tages */
#artikel > .hauptseite-box-title
{ background-color: #ffffcc; border-color: #ffcc99; }
#artikel > .hauptseite-box-content
{ background-color: #fffff0; border-color: #ffcc99; }
/* Was geschah am … */
#ereignisse > .hauptseite-box-title
{ background-color: #ccccff; border-color: #c6cdd5; }
#ereignisse > .hauptseite-box-content
{ background-color: #f8f8ff; border-color: #c6cdd5; }
/* Nachrichten */
#nachrichten > .hauptseite-box-title
{ background-color: #ffffa0; border-color: #ffcc66; }
#nachrichten > .hauptseite-box-content
{ background-color: #ffffd5; border-color: #ffcc66; }
#nachrichten > .hauptseite-box-content > hr /* Trennlinie bei Nachrichten */
{ background-color: #ffcc66; color: #ffcc66; }
/* Verstorbene */
#verstorbene > .hauptseite-box-title
{ background-color: #e4e4e4; border-color: #cccccc; }
#verstorbene > .hauptseite-box-content
{ background-color: #f0f0f0; border-color: #cccccc; }
/* Schon gewusst */
#wissenswertes > .hauptseite-box-title
{ background-color: #ffffa0; border-color: #ffcc66; }
#wissenswertes > .hauptseite-box-content
{ background-color: #ffffe0; border-color: #ffcc66; }
/* Schwesterprojekte */
#schwesterprojekte > .hauptseite-box-title
{ background-color: #f0eec8; border-color: #d9d3ba; }
#schwesterprojekte > .hauptseite-box-content
{ background-color: #faf9ec; border-color: #d9d3ba; }
Die Regeln sind immer paarweise für die Titelleiste und den Inhaltsbereich, die Rahmenfarbe (border-color) ist jeweils identisch. Im Nachrichtenkasten gibt es eine Trennlinie, die zusätzlich passend zum Rahmen eingefärbt ist. Wer auch die Trennpunkte im oberen Teil der Nachrichten ändern will, der kann das auf diese Weise tun:
#nachrichten .hauptseite-box-content .breadcrumb-nav-midsep li::after
{ color: #4682b4; content: "\A0\2726"; }
Das in content kodierte Zeichen war zeitweise standardmäßig für jeden aktiviert.(2) Wenn man das Zeichen kleiner machen will, wird die Regel etwas aufwendiger (das nun kleinere Zeichen muss angehoben werden, damit es zentriert ist; die Kombination der nötigen Werte ist schriftabhängig).(2) Nach demselben Muster können mit einer allgemeiner formulierten Regel alle Listenpunkte formatiert werden.
Die Regeln sind nur sinnvoll in der common.css für das dewiki, nicht der globalen Stildatei, wirken aber auch, wenn sie dort eingetragen werden. Wenn man sie in eines der Addons eintragen will, sollte man die Nutzung auf die Adresse (URL) https://de.wikipedia.org/wiki/Wikipedia:Hauptseite und die Teiladresse (URL-Prefix) https://de.wikipedia.org/w/index.php?title=Wikipedia:Hauptseite einschränken.
\A0 ist das geschützte Leerzeichen.#nachrichten .breadcrumb-nav-midsep li::after {
color: #4682b4;
content: "\A0\2726";
font-size: 75%;
vertical-align: 0.3ex;
}