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

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.

Das Modern-Skin hat ebenso eine Kopfleiste. Dort scheinen mir die Abweichungen aber erheblicher zu sein.

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:

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

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

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

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

(1) Vermutlich stammten sie ursprünglich von Benutzer:Wiegels (vergleiche Spezial:Diff/17296421). Trotz der Unsicherheit Danke dafür!
(2) Als „Black Four Pointed Star“ (U+2726) im Unicodeblock Dingbats zu finden. \A0 ist das geschützte Leerzeichen.
(3) 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;
}
Original: Original:

https://de.wikipedia.org/wiki/Benutzer:Speravir/CSS