Benutzer:Speravir/CSS

Einleitung

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.

→ Stylus - Userstyles Manager auf GitHub

→ xStyle user styles manager auf GitHub

Dort sind jeweils Links zu den eigentlichen Addonseiten für das Herunterladen zu finden, aber auch weitere Informationen.

Es existieren weitere Addons mit sehr ähnlicher Funktionalität.

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.

Farbige Symbolleiste für den Wikieditor

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:

Der Link zur Dateibeschreibung ist immer in einem Kommentar hinter der entsprechenden Regel zu finden. Die meisten Symbole sind aus commons:Category:WikiEditor toolbar icons.
Ich habe nicht alle der klassischen Symbole wiederhergestellt – für die bereits zuvor einfarbigen Bilder ergibt das für mich keinen Sinn.
Um eines der farbigen Symbole (vorübergehend) nicht zu nutzen, kann man die entsprechende/-n Regel/-n durch Einfügen eines Kommentars deaktivieren. Dazu muss man die Markierung für den Beginn eines Kommentars (das ist /*) 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!
Das klassische farbige Nowiki-Symbol („keine Wikisyntax“) wirkt beispielsweise für mich zwischen einfarbigen Symbolen wie ein Fremdkörper, zusätzlich ist das neue meiner Meinung nach gut erkennbar. Nach Deaktivierung würde es so aussehen, die relevante Zeile ist hervorgehoben:

/* 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 */

Tipp: Die Regeln in die Spielwiese übertragen. Dort die Änderung durchführen, ohne abzuspeichern (!), und in der Vorschau kontrollieren (Syntaxhervorhebung beachten), dann kopieren.

Überhaupt kann man sich nach diesem Muster lokal irgendwelche anderen Symbolbilder einfügen, auch vom 2006er Editor (zu finden in commons:Category:MediaWiki edit toolbar). Sie müssen nicht einmal von Commons sein (ich weiß aber nicht, wie die Einschränkungen sind, wenn man das in eine CSS-Datei hier in Mediawiki kopiert). Man muss „nur“ wissen, wie die Bezeichnung der Selektoren ist.
Alles könnte kompakter geschrieben werden, indem man den sich immer wiederholenden Teil als eigenen Block auslagert. Das würde aber das Auskommentieren etwas komplizierter machen, weshalb ich hier lieber die aufwendigere Variante präsentiere.

Für die neuen monochromen Symbole existieren inzwischen wenigstens teilweise farbige Versionen (commons:Category:Colored Wikicons). Dazu noch ein Hinweis von Lómelinde:

„Die vollständige Liste der genutzten Icons ist hier →OOjs UI icons allerdings haben die Farben dort eine Definition Styleguide.

Blau = aktiv = mw-progressive
rot = löschen/entfernen = mw-destructive
grün = Echo-mail, Erwähnung, Danke = das gab es mal als mw-constructive

Für mich würde das keinerlei Vorteil bringen ein Icon in der Symbolleiste blau, grün oder rot einzufärben.“

Weitere Änderungen des WikiEditors

Symbole ausblenden

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.

Sonderzeichenleiste

die zur Zeichendarstellung benutzte Schriftart ändern:

.wikiEditor-ui-toolbar .page-characters div span {
	font-family: "DejaVu Sans Mono", Consolas, monospace;
}

Das überschreibt die standardmäßig eingesetzte Schrift. Die zuerst genannte Schriftart wird bevorzugt verwendet und nur, wenn sie nicht vorhanden ist, die weiteren, sofern angegeben. 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.

dasselbe nur für einen Codeblock tun (oder auch zwei …)
hier als Beispiel für Griechisch:

.wikiEditor-ui-toolbar .page-greek div span,
.wikiEditor-ui-toolbar .page-greekextended div span {
	font-family: Consolas, monospace ;
	font-size: 101%; 
}

Die Codeblöcke haben eine eigene Klassenbezeichnung, die verwendet werden kann. Die viel bessere Consolas sieht bei gleicher Schriftgröße kleiner aus als der Standard Courier New (in Windows), weshalb man eine Anpassung vornehmen sollte.

die einzelnen Zeichen vergrößert darstellen, wenn man mit der Maus über sie fährt:

.pages .page-characters span {
	transition: all 500ms ease;
}
.pages .page-characters span:hover {
	transform: scale(2);
	transition-delay: 0s;
}

Einige Schriftsysteme nutzen verstärkt diakritische Zeichen oder haben stark verschnörkelte Buchstaben, so dass Details eventuell nicht so gut erkennbar sind. Das hängt auch von der aktiven Schriftart ab und sicherlich auch von der individuellen Sehstärke. Mit dem obigen Code kann man sich einzelne Zeichen größer darstellen lassen, wenn man mit der Maus über sie fährt. Der gesamte Kastens bleibt dabei anklickbar. Achtung, an den Rändern verschwindet ein kleiner Teil des jeweiligen Kastens, das lässt sich nicht ändern.

Echtzeitvorschau

Wenn man sie gar nicht benutzen will, kann man sie völlig ausblenden:

#wikiEditor-ui-toolbar .group-default .tool[rel="realtimepreview"]
{ display: none; }

Ich persönlich habe aber nur den Schriftzug „Vorschau“ versteckt:

#wikiEditor-ui-toolbar .ext-WikiEditor-realtimepreview-button .oo-ui-labelElement-label
{ display: none; }

Wenn eines von beiden der einzige Eintrag für die Echtzeitvorschau wäre, könnte man ihn dann auch mit einer der Regeln zum Ausblenden von Symbolen oder für die Ausblendungen von „Format“ und „Einfügen“ kombinieren – einfach die jeweils erste Zeile (alles, was nicht in geschweiften Klammern steht) als weitere Zeile ergänzen, dabei das Komma vor der letzten Deklaration nicht vergessen beziehungsweise vor der öffnenden geschweiften Klammer vermeiden.

Bevor ich den Text versteckt habe, habe ich damit experimentiert, ihn im deaktivierten Zustand nicht mehr in Fettschrift sehen zu müssen, was mich wirklich gestört hat. Mir war die Schrift in schwarz dann immer noch zu auffällig, so dass ich sie dunkelgrau gefärbt habe (wenn man das nicht übernehmen will, die Zeile mit color: dimgrey; löschen):

#wikiEditor-ui-toolbar .ext-WikiEditor-realtimepreview-button.oo-ui-toggleWidget-off .oo-ui-labelElement-label {
	color: dimgrey;
	font-weight: normal;
}

Hier fehlt übrigens kein Leerzeichen, .oo-ui-toggleWidget-off muss wirklich direkt an den anderen Selektor angehängt werden.

Die Darstellung für den aktivierten Zustand hat mich nicht so gestört, aber der Klassen-Selektor dafür heißt .oo-ui-toggleWidget-on – einfach ein Beispiel:

#wikiEditor-ui-toolbar .ext-WikiEditor-realtimepreview-button.oo-ui-toggleWidget-on .oo-ui-labelElement-label {
	color: darkorange;
	font-size: 105%;
}

Um den Text zu behalten, aber das Symbol auszublenden:

#wikiEditor-ui-toolbar .ext-WikiEditor-realtimepreview-button .oo-ui-iconElement-icon
{ display: none; }

Wie oben könnte auch das mit anderen Regeln kombiniert werden.

Man kann auch das Symbol für beide Zustände verändern. Am einfachsten ist es, es im deaktivierten Zustand blasser machen:

#wikiEditor-ui-toolbar .ext-WikiEditor-realtimepreview-button.oo-ui-toggleWidget-off .oo-ui-iconElement-icon
{ opacity: 0.25; }

Man kann hier mit dem Wert von 0.25 herumspielen (das Maximum von 1 entspricht völliger Intransparenz/Opazität und würde zu keiner optischen Änderung führen).

Ich selbst habe beide Symbole völlig ersetzt, weil es für mich besser zu den übrigen Symbolen passt (siehe Farbige Symbolleiste für den Wikieditor):

#wikiEditor-ui-toolbar .ext-WikiEditor-realtimepreview-button.oo-ui-toggleWidget-off .oo-ui-iconElement-icon {
	background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/f/f2/Breezeicons-mimetypes-64-application-vnd.oasis.opendocument.text-template.svg/22px-Breezeicons-mimetypes-64-application-vnd.oasis.opendocument.text-template.svg.png");
	opacity: 0.5;
}/* https://commons.wikimedia.org/wiki/File:Breezeicons-mimetypes-64-application-vnd.oasis.opendocument.text-template.svg */
/* aktiviert (.oo-ui-toggleWidget-on): */
#wikiEditor-ui-toolbar .ext-WikiEditor-realtimepreview-button.oo-ui-toggleWidget-on .oo-ui-iconElement-icon {
	background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/9/9a/Breezeicons-mimetypes-64-x-office-document.svg/22px-Breezeicons-mimetypes-64-x-office-document.svg.png")
}/* https://commons.wikimedia.org/wiki/File:Breezeicons-mimetypes-64-x-office-document.svg */

Im deaktivierten Zustand wird die Abbildung durch die opacity-Deklaration auch wieder semitransparent und damit blasser.

Die genutzten Symbole findet man in commons:Category:Document icons. Die Originalsymbole sind darin ebenfalls kategorisiert als OOjs UI icon article-ltr-progressive.svg (für den aktivierten Zustand) und OOjs UI icon article-ltr.svg (für den inaktiven). ^(#) Will man eigentlich nur die Farben der Symbole ändern, ist das nicht so einfach möglich – auch die Originale sind als Hintergrundbilder eingebunden und es müssten daher SVG mit den geänderten Farben nach Commons hochgeladen werden.

^(#)

Daneben gibt es noch die Version für dunkle Hintergründe (OOjs UI icon article-ltr-invert.svg) und zu allen drei jeweils eine Variante für Systeme mit RTL-Schriften.

Bezeichnungen Format und Einfügen

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; }

Feld zum Abspeichern verstecken

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.

Urheberrechtlicher Hinweis

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!

Regeln für die persönliche Kopfleiste

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.

Im Timeless-Skin sind die Abweichungen erheblicher, aber die Regeln funktionieren, auch wenn die notwendigen Anpassungen teils größer zu sein scheinen. Auch hier würde ich mir das auf Anfrage ansehen.

Anderes Logo vor Benutzernamen

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. Man muss hier unterschieden zwischen der älteren Vector-Variante, der sogenannten Legacy-Version, und der seit 2022 verfügbaren Version:

/* anderes Benutzersymbol mit Legacy-Vector */
.skin-vector-legacy .vector-menu-content-list > #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 */

/* anderes Benutzersymbol mit Vector-2022 */
.skin-vector-2022 .mw-ui-icon-wikimedia-userAvatar#p-personal-label::before,
.skin-vector-2022 .mw-ui-icon-wikimedia-userAvatar#p-personal-label-sticky-header::before,
.skin-vector-2022 #pt-userpage-sticky-header a.mw-ui-icon-wikimedia-userAvatar::before {
	background-image: url("https://upload.wikimedia.org/wikipedia/commons/0/0f/Crystal_Project_Identity.png");
} /* https://commons.wikimedia.org/wiki/File:Crystal_Project_Identity.png */
/* alternativ: https://commons.wikimedia.org/wiki/File:Blue_-_Squared_-_User_list_(Deus_WikiProjects).png
   - url("https://upload.wikimedia.org/wikipedia/commons/2/28/Blue_-_Squared_-_User_list_%28Deus_WikiProjects%29.png");
*/

Blassere Benachrichtigungssymbole

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).

Je nach Skin unterscheidet sich der Code teilweise.

Variante für Vector-2010 („Vector-legacy“), funktioniert auch mit Monobook

einfach, ohne Unterscheidung der möglichen Zustände:

/* Benachrichtigungen (Echo) */
#p-personal .mw-echo-notifications-badge { opacity: 0.5; }

mit Unterscheidung der möglichen Zustände:

/* Benachrichtigungen (Echo) */
#p-personal .mw-echo-notifications-badge:not([data-counter-num="0"])
	{ opacity: 0.5; }
#p-personal .mw-echo-notifications-badge-all-read
	{ opacity: 0.2; }
#p-personal .mw-echo-notifications-badge.mw-echo-unseen-notifications
	{ opacity: 0.75; }

Variante für Vector-2022:

einfach, ohne Unterscheidung der möglichen Zustände:

/* Benachrichtigungen (Echo) */
.vector-user-links :is(.mw-echo-notification-badge-nojs, .mw-echo-notifications-badge)::before
	{ opacity: 0.5; }

mit Unterscheidung der möglichen Zustände:

/* Benachrichtigungen (Echo) */
.vector-user-links :is(.mw-echo-notification-badge-nojs, .mw-echo-notifications-badge):not([data-counter-num="0"])::before
	{ opacity: 0.5; }
.vector-user-links :is(.mw-echo-notification-badge-nojs, .mw-echo-notifications-badge):not([data-counter-num="0"])::after
	{ opacity: 0.75; }
.vector-user-links :is(.mw-echo-notification-badge-nojs, .mw-echo-notifications-badge-all-read)::before
	{ opacity: 0.2; }
.vector-user-links :is(.mw-echo-notification-badge-nojs, .mw-echo-notifications-badge).mw-echo-unseen-notifications::before
	{ opacity: 0.75; }

Die genauen Werte kann man sich nach Geschmack individuell einstellen; der Minimalwert 0 bedeutet „vollständig transparent“ (unsichtbar), 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.

Wer manchmal zwischen beiden Vector-Versionen wechselt, für den wird es etwas aufwendiger:

ohne Unterscheidung der möglichen Zustände:

.skin-vector-legacy #p-personal .mw-echo-notifications-badge,
.skin-vector-2022 .vector-user-links :is(.mw-echo-notification-badge-nojs, .mw-echo-notifications-badge)::before
	{ opacity: 0.5; }

mit Unterscheidung der möglichen Zustände:

/* Benachrichtigungen (Echo) */
.skin-vector-legacy #p-personal .mw-echo-notifications-badge:not([data-counter-num="0"]),
.skin-vector-2022 .vector-user-links :is(.mw-echo-notification-badge-nojs, .mw-echo-notifications-badge):not([data-counter-num="0"])::before
	{ opacity: 0.5; }
.skin-vector-2022 .vector-user-links :is(.mw-echo-notification-badge-nojs, .mw-echo-notifications-badge):not([data-counter-num="0"])::after
	{ opacity: 0.75; }
.skin-vector-legacy #p-personal .mw-echo-notifications-badge-all-read,
.skin-vector-2022 .vector-user-links :is(.mw-echo-notification-badge-nojs, .mw-echo-notifications-badge-all-read)::before
	{ opacity: 0.2; }
.skin-vector-legacy #p-personal .mw-echo-notifications-badge.mw-echo-unseen-notifications,
.skin-vector-2022 .vector-user-links :is(.mw-echo-notification-badge-nojs, .mw-echo-notifications-badge).mw-echo-unseen-notifications::before
	{ opacity: 0.75; }

Verlinkung zu Beta-Funktionen

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; }

„Abmelden“ verstecken

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.

Aus Wikidata bezogene Inhalte hervorheben

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:

Geänderte Hintergrundfarbe:

.wikidata-content {
	background-color: #CCF0E0;
}

Erscheinungsbild: Wikidata-Inhalt.

Das kollidiert aber leicht mit anderen gesetzten Hintergrundfarben. Man kann unmöglich alle möglichen genutzten Farbvarianten vorhersehen.

Geänderte Textfarbe und Textschatten, um sich von anderen Veränderungen der Farbe abzuheben (Text sozusagen im Sprühnebel oder in der „Cloud“):

.wikidata-content {
	color: rgb(139, 0, 139);
	text-shadow: 0 0 10px rgba(139, 0, 139, 0.9);
}

Erscheinungsbild: Wikidata-Inhalt.

Der „Textnebel” funktioniert auch bei Verlinkungen. Die Farbe ist absichtlich etwas aufdringlich, der hier verwendete Farbton hat auch einen Namen: darkmagenta.

Hochgestellter Hinweis nach dem Inhalt:

.wikidata-content::after {
	content: "(WD)";
	font-size: 65%;
	vertical-align: top;

Erscheinungsbild: Wikidata-Inhalt(WD).

Wichtig – das hochgestellte (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.

Hauptseite farbiger gestalten

Beachte auch obige Einleitung.

Irgendwo in den Tiefen der Wikipedia habe ich das vor Jahren gefunden ⁽¹⁾ 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. ⁽²⁾ 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). ⁽²⁾ 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.

⁽¹⁾

Vermutlich stammten sie ursprünglich von Benutzer:Wiegels (vergleiche Spezial:Diff/17296421). Trotz der Unsicherheit Danke dafür!

⁽²⁾

Als „Black Four Pointed Star“ (U+2726) im Unicodeblock Dingbats zu finden. \A0 ist das geschützte Leerzeichen.

⁽³⁾

Bei mir sieht das hier gut aus:

#nachrichten .breadcrumb-nav-midsep li::after {
	color: #4682b4;
	content: "\A0\2726";
	font-size: 75%;
	vertical-align: 0.3ex;
}

Einfärbung von Antwortebenen in Diskussionen

Beachte auch obige Einleitung.

Damit kann man die unterschiedlichen Diskussionsbeiträge optisch besser auseinanderhalten, solange sie sich in unterschiedlichen Ebenen befinden. Im einfachsten Fall importiert man sich die Stildatei für das Commons-Gadget Threaded Discussions:

@import url("https://commons.wikimedia.org/w/index.php?title=MediaWiki:Gadget-ThreadedDiscussions.css&action=raw&ctype=text/css");

Dieser Stil wird aber nur auf echten Diskussionsseiten aktiv, also allen Seiten mit Diskussion vor dem Doppelpunkt im Titel (oder auf englischsprachigen Wikimedia-Präsenzen Talk).

Mit einer Erweiterung dieser Regeln kann man jedoch eine Einfärbung auf allen Seiten im Namensraum 4 erreichen (in allen Wikipedias als Wikipedia benannt, in Commons dementsprechend Commons, im Metawiki Meta, beispielsweise bei Wikidata aber Project). Die folgend präsentierte Variante funktioniert mit allen Browsern, die die Pseudoklasse :is() unterstützen, ^(§) für ältere Browser siehe den eingeklappten Code am Ende des Abschnitts.

Die Einfärbung erfolgt nur für Einrückungen mit Doppelpunkt und auch nur dann gut, wenn die Einrückung ohne Leerzeile dazwischen erfolgt. Wenn Listen mit Stern genutzt werden (die dann mit fettem Punkt davor angezeigt werden werden), bleiben diese unangetastet. Ebenso wenig werden damit die in manchen Projekten aktiven sogenannten Strukturierten Diskussionen (englisch „Structured Discussions“, früher mal als „Flow“ bezeichnet) farblich beeinflusst.

/* Basis Commons-Gadget "ThreadedDiscussions":
   https://commons.wikimedia.org/wiki/MediaWiki:Gadget-ThreadedDiscussions.css
*/
:is(.ns-4, .ns-talk) dd {
	margin: 0;
	padding: 0;
}
:is(.ns-4, .ns-talk) dd ~ dd {
	padding-top: 0.5em;
}
:is(.ns-4, .ns-talk) dl {
	border-top: solid 1px #a7d7f9;
	border-left: solid 1px #a7d7f9;
	padding-top: 0.5em;
	padding-left: 0.5em;
	margin-left: 1em;
}
:is(.ns-4, .ns-talk) dl,
:is(.ns-4, .ns-talk) dl dl dl,
:is(.ns-4, .ns-talk) dl dl dl dl dl,
:is(.ns-4, .ns-talk) dl dl dl dl dl dl dl,
:is(.ns-4, .ns-talk) dl dl dl dl dl dl dl dl dl,
:is(.ns-4, .ns-talk) dl dl dl dl dl dl dl dl dl dl dl,
:is(.ns-4, .ns-talk) dl dl dl dl dl dl dl dl dl dl dl dl dl
{ background-color: #f5faff; }/* ungerade Ebenen */
:is(.ns-4, .ns-talk) dl dl,
:is(.ns-4, .ns-talk) dl dl dl dl,
:is(.ns-4, .ns-talk) dl dl dl dl dl dl,
:is(.ns-4, .ns-talk) dl dl dl dl dl dl dl dl,
:is(.ns-4, .ns-talk) dl dl dl dl dl dl dl dl dl dl,
:is(.ns-4, .ns-talk) dl dl dl dl dl dl dl dl dl dl dl dl,
:is(.ns-4, .ns-talk) dl dl dl dl dl dl dl dl dl dl dl dl dl dl
{ background-color: white; }/* gerade Ebenen */

^(§)

Vergleiche dazu “Can I use... :is() CSS pseudo-class” bzw. noch strenger “Can I use... :is(): Support for forgiving selector list”.

Das wird dann auf jeder Seite im gesamten Namensraum aktiv und ~~kann~~ wird so irrtümlich zu Einfärbungen an unerwarteten Stellen führen. Wenn einen das stört, kann man sich Ausnahmeregeln schreiben, mit denen die Standardwerte wieder aktiviert werden (sollten diese sich einmal ändern, müsste man dies teilweise manuell anpassen). Als Beispiele (die aber tatsächlich von obigen Regeln betroffen sind) habe ich hier Wikipedia:Abkürzungen und Wikipedia:Spielwiese genommen, bei weiteren Ergänzungen auf Kommata an richtigen Stellen achten (nur am Ende vor der schließenden Klammer keines).

:is(
	.rootpage-Wikipedia_Abkürzungen,
	.rootpage-Wikipedia_Spielwiese
) #bodyContent :is(dd, dl) {
	background-color: initial;
	border-top: initial;
	border-left: initial;
	padding: initial;
}
:is(
	.rootpage-Wikipedia_Abkürzungen,
	.rootpage-Wikipedia_Spielwiese
) #bodyContent dd {
	margin-left: 1.6em;
}
:is(
	.rootpage-Wikipedia_Abkürzungen,
	.rootpage-Wikipedia_Spielwiese
) #bodyContent dl {
	margin-left: 0;
	margin-top: 0.2em;
}

Bei älteren Browsern, die kein :is() unterstützen, müsste man die Selektoren für jede einzelne (Basis-)Seite ausschreiben, so dass der Stil je Anzahl der Ausnahmen schnell sehr groß und eventuell unübersichtlich werden würde (hier für 2 Beispiele wären es zuerst 4 Selektoren, dann zweimal jeweils 2, allerdings mit längeren Zeilen).

Im Ergebnis würde es mit den obigen Werten dann derart aussehen (Ausgabekasten abweichend vom Standard umrahmt):

Eingabe:

oberste, erste Ebene ohne Einzug
:zweite Ebene mit einfachem Einzug (mit so viel Text, dass er nicht mehr in eine Zeile passt)
:immer noch zweite Ebene (ebenso mit mehr Text, als in eine Zeile passt)
::dritte Ebene mit doppeltem Einzug
:::vierte Ebene mit dreifachem Einzug
::erneut dritte Ebene

wieder erste Ebene
:zweite Ebene

:zweite Ebene mit Leerzeile davor

::dritte Ebene mit Leerzeile davor

:::vierte Ebene mit Leerzeile davor

Ausgabe:

oberste, erste Ebene ohne Einzug

zweite Ebene mit einfachem Einzug (mit so viel Text, dass er nicht mehr in eine Zeile passt)

immer noch zweite Ebene (ebenso mit mehr Text, als in eine Zeile passt)

dritte Ebene mit doppeltem Einzug

vierte Ebene mit dreifachem Einzug

erneut dritte Ebene

wieder erste Ebene

zweite Ebene

zweite Ebene mit Leerzeile davor

dritte Ebene mit Leerzeile davor

vierte Ebene mit Leerzeile davor

Code für ältere Browser (ohne Ausnahmeregeln):

/* Basis Commons-Gadget "ThreadedDiscussions":
   https://commons.wikimedia.org/wiki/MediaWiki:Gadget-ThreadedDiscussions.css
*/
.ns-4 dd,
.ns-talk dd {
	margin: 0;
	padding: 0;
}
.ns-4 dl,
.ns-talk dl {
	border-top: solid 1px #a7d7f9;
	border-left: solid 1px #a7d7f9;
	padding-top:0.5em;
	padding-left:0.5em;
	margin-left: 1em;
}
.ns-4 dl,
.ns-talk dl,
.ns-4 dl dl dl,
.ns-talk dl dl dl,
.ns-4 dl dl dl dl dl,
.ns-talk dl dl dl dl dl,
.ns-4 dl dl dl dl dl dl dl,
.ns-talk dl dl dl dl dl dl dl,
.ns-4 dl dl dl dl dl dl dl dl dl,
.ns-talk dl dl dl dl dl dl dl dl dl,
.ns-4 dl dl dl dl dl dl dl dl dl dl dl,
.ns-talk dl dl dl dl dl dl dl dl dl dl dl,
.ns-4 dl dl dl dl dl dl dl dl dl dl dl dl dl,
.ns-talk dl dl dl dl dl dl dl dl dl dl dl dl dl
{ background-color: #f5faff; }/* ungerade Ebenen */
.ns-4 dl dl,
.ns-talk dl dl,
.ns-4 dl dl dl dl,
.ns-talk dl dl dl dl,
.ns-4 dl dl dl dl dl dl,
.ns-talk dl dl dl dl dl dl,
.ns-4 dl dl dl dl dl dl dl dl,
.ns-talk dl dl dl dl dl dl dl dl,
.ns-4 dl dl dl dl dl dl dl dl dl dl,
.ns-talk dl dl dl dl dl dl dl dl dl dl,
.ns-4 dl dl dl dl dl dl dl dl dl dl dl dl,
.ns-talk dl dl dl dl dl dl dl dl dl dl dl dl,
.ns-4 dl dl dl dl dl dl dl dl dl dl dl dl dl dl,
.ns-talk dl dl dl dl dl dl dl dl dl dl dl dl dl dl
{ background-color: white; }/* gerade Ebenen */