Cowboy's Wiki:Technik/Skin/CSS

Aus Cowboy's Wiki
Wechseln zu: Navigation, Suche
Abkürzung: CW:CSS

Hier werden zum Einsatz von Cascading Style Sheets (CSS) bei der Konfiguration der optimalen Arbeitsumgebung angemeldeter Benutzer praxiserprobte Anwendungsbeispiele und Tipps für Einsteiger dargestellt.

Benutzung

Einbindung

Schnell und einfach durch Anklicken von: common.css – „Gemeinsames CSS aller Benutzeroberflächen“. In diese Seite die gewünschten Formatanweisungen einfügen, wie sie hier angegeben sind.

Wer mit mehreren Skins jongliert, kann zusätzlich spezifische Definitionen anlegen, etwa vector.css. Für die aktive Skin über Einstellungen:

  • In der Registerkarte Aussehen ist die aktive Skin gekennzeichnet; daneben das Link zum spezifischen CSS.

Dies wird dann anschließend an common.css aktiviert und überschreibt gleichartige Definitionen. Skin-spezifisches CSS allein geht auch.

Beim Bearbeiten dieser CSS-Seiten schaltet sich automatisch der CodeEditor hinzu und ermöglicht farbige Syntaxhervorhebung.

Voraussetzung ist allerdings, sich als Benutzer angemeldet zu haben – sonst lassen sich keine Benutzerseiten anlegen.

CSS-Notation

CSS in a nutshell:

 Selektor1, Selektor2
    { Eigenschaft1: Wert;
      Eigenschaft2: Wert }
 Selektor3
    { Eigenschaft: Wert }

Sinnvolle Selektoren sind hier beschrieben. Den Elementen, auf die sie zutreffen, wird der in Klammern definierte Stil zugewiesen. Wikimedia hat den Elementen der Seite viele Identifikatoren und Klassen zugewiesen, so dass sich einzelne Elemente gezielt ansprechen lassen.

Es gibt eine Vielzahl von Eigenschaften (Attribute). Jeweils paarweise wird der Eigenschaft der gewünschte Wert zugewiesen. Aufeinander folgende Paare werden durch ein Semikolon getrennt; damit man es beim Verschieben von Zeilen nicht vergisst, wird oft hinter das letzte Paar ein eigentlich unnötiges Semikolon gesetzt. (siehe auch Formatierung)

Werden von der Wikimedia-Umgebung und vom Benutzer derselben Eigenschaft unterschiedliche Werte zugewiesen, so macht das überhaupt nichts. Die Werte sind „kaskadierend“ – das heißt, dass die jeweils letzte und speziellere Definition die vorherige Angabe überschreibt; dabei kommen die benutzerdefinierten Stile zum Schluss und haben also in der Regel Vorrang.

Ein häufiger Wert sind Farben. Sie werden am sichersten als Hexadezimalzahlen angegeben: #RRGGBB – mit R=rot, G=grün, B=blau; jeweils sind die Zeichen 0–9,A–F möglich.

Einige Anleitungen

Kaskadierend

Wie der Name schon sagt, baut CSS sich „kaskadierend“ auf – das bedeutet, dass die jeweils letzte und speziellere Definition die vorherigen Angaben überschreibt.

Konkret ergibt sich die Hierarchie:

  1. Server-definierte Stile (weltweit)
  2. Stile in Cowboy's Wiki: Mediawiki:Common.css usw.
  3. Stile des aktuellen Benutzers: common.css usw.
  4. Dynamische Stile: addCSS
  5. Angaben direkt im Element (mit style="...")
  6. Deklarationen mit !important

CSS-Unterseiten

Für die CSS-Unterseiten im Benutzernamensraum gilt:

  • Sie sollten immer auf kleingeschriebenes .css enden, damit sie von jeder beteiligten Software sicher erkannt werden.
  • Die festgelegten Skin-spezifischen Definitionen müssen exakt so (klein) geschrieben werden wie die Skin technisch heißt. Am sichersten ist es, sie über die Einstellungen zu generieren (siehe Einbindung).
  • Ansonsten kann Groß- und Kleinschreibung der Unterseite frei gewählt werden.
  • Außer dir können nur Administratoren deine CSS-Unterseite verändern, was diese jedoch nicht tun.
  • Du kannst deine CSS-Unterseite wie jede andere deiner Unterseiten löschen lassen, indem du am Anfang {{Löschen}} einfügst. Auch wenn die Vorlage nicht wie üblich dargestellt wird, funktioniert sie dennoch, sodass ein Administrator deinem Wunsch nachkommen und die Seite löschen wird.

Kommentare

Auch in CSS gibt es die Möglichkeit, Kommentare zu den Deklarationen zu hinterlassen. Dabei ist jedoch zu beachten:

  • Der Kommentar beginnt mit /* und endet mit */ (auch nach mehreren Zeilen).
  • Das vom Wikitext und HTML gewohnte <!-- Format --> ist nicht möglich. Es würde dazu führen, dass die gesamten Deklarationen zumindest ab dieser Stelle nicht mehr erkannt werden.
  • Ein /* Kommentar */ darf nicht innerhalb einer Deklaration stehen; also entweder nach einer schließenden Klammer } oder am Beginn der Seite möglich.

Link-Typen unterscheiden

Um unerwünschte oder nur in bestimmten Bereichen zulässige Verlinkungen leicht zu erkennen, können sie von Autoren farblich markiert werden. Für reine Leser ist dies weniger wichtig.

Die folgenden Möglichkeiten wirken auf die normale Artikeldarstellung und die Vorschau.

Durch Voranstellen des Klassen-Selektors .ns-0 werden die Definitionen jeweils auf den Artikelnamensraum begrenzt.

Der eigentliche Artikelinhalt wird als Abschnitt DIV#bodyContent identifiziert. Dies gilt für die Skins „Vector“, „Monobook“, „Chick“ etc. Bei „Modern“ wäre #mw_contentholder einzusetzen. In „Standard“ und „CologneBlue“ heißt dies #article; notfalls müsste #content helfen.[1] Ohne diese Einschränkung wäre jeweils die gesamte Portal-Seite betroffen.

BKL und FS

Begriffsklärungsseiten und Falschschreibungen

Externe Links

Sie sollen im Artikelrumpf nur in Ausnahmefällen vorkommen, sondern eingefügt werden unter Weblinks oder als Einzelnachweis, auch in Infoboxen.

Eine Hervorhebung soll nur im Artikelinhalt (DIV#bodyContent) geschehen und nicht im umgebenden Editor- sowie ggf. Navigationsbereich.

Weil diese Regel nur für Artikel gilt, empfiehlt sich eine Begrenzung auf den Artikelnamensraum durch Voranstellen des Klassen-Selektors .ns-0 (nur im ANR gegeben).

Alternativ lässt sich das durch bedingte Einbindung mittels JavaScript erreichen:

if (wgNamespaceNumber == 0) {
   importStylesheet("Benutzer:mir/Artikel-Stil.css");
}

(In etwas veraltetem Stil geschrieben)

Schwesterprojekte

Zu anderen Sprachen und anderen Wikimedia-Projekten soll im Artikelrumpf nicht verlinkt werden.

.ns-0 DIV#bodyContent A.extiw {
   background-color: #ADD8E6;
   color: #4040FF;
 }

Hellblauer Untergrund, Schrift in üblichem Link-Blau.

Weblink

.ns-0 DIV#bodyContent A.external {
   border: 1px solid #4080FF;
}

Blau umrahmt, erinnernd an das Weblink-Symbol External.png.

Namensräume

Aus dem Artikel soll nicht in andere Namensräume verlinkt werden oder nur in besonderen Fällen.

Sowohl mit http: wie auch beim gesicherten Zugriff mit https: funktioniert:[2]

.ns-0 DIV#bodyContent A[href*="/wiki/Kategorie:"],
.ns-0 DIV#bodyContent A[href*="/wiki/Portal:"] {
   border: 1px solid #408F40;
}

Links auf Seiten der aufgezählten Namensräume bekommen einen grünen Rahmen. Sie sind in einem Artikel am richtigen Ort sinnvoll.

Die anderen Namensräume und die jeweiligen Diskussionsseiten müssten genauso selektiert werden; sie sind als Links aus einem Artikel kaum sinnvoll (ausgenommen etwa Boxen der Qualitätssicherung oder Löschanträge, oder ein Artikel über die Wikipedia selbst) und erhalten einen roten Rahmen:[2]

.ns-0 DIV#bodyContent A[href*="/wiki/Diskussion:"],
.ns-0 DIV#bodyContent A[href*="/wiki/Benutzer_Diskussion:"],
.ns-0 DIV#bodyContent A[href*="/wiki/Benutzerin_Diskussion:"],
.ns-0 DIV#bodyContent A[href*="/wiki/Hilfe_Diskussion:"],
.ns-0 DIV#bodyContent A[href*="/wiki/Kategorie_Diskussion:"],
.ns-0 DIV#bodyContent A[href*="/wiki/Portal_Diskussion:"],
.ns-0 DIV#bodyContent A[href*="/wiki/Spezial_Diskussion:"],
.ns-0 DIV#bodyContent A[href*="/wiki/Vorlage_Diskussion:"],
.ns-0 DIV#bodyContent A[href*="/wiki/Wikipedia_Diskussion:"],
.ns-0 DIV#bodyContent A[href*="/wiki/Benutzer:"],
.ns-0 DIV#bodyContent A[href*="/wiki/Benutzerin:"],
.ns-0 DIV#bodyContent A[href*="/wiki/Hilfe:"],
.ns-0 DIV#bodyContent A[href*="/wiki/Spezial:"],
.ns-0 DIV#bodyContent A[href*="/wiki/Vorlage:"],
.ns-0 DIV#bodyContent A[href*="/wiki/Cowboy's_Wiki:"] {
    border: 2px solid #FF0000;
}

Dies greift auch bei Alias-Namen wie WP:LIT, Kleinschreibung wikipedia:LIT oder project:FzW; ein möglicher Alias des Namensraums ist bereits aufgelöst. Die Zeichenkette /wiki/Benutzer: ist hinreichend charakteristisch, um das Link zu identifizieren. Bei http: ist es der Beginn des relativen Pfades; bei https: steht (bis Herbst 2011) vorher noch /wikipedia/de am Beginn des Pfades.

Die bisherigen Ausschmückungen markieren alle entsprechenden Links am Artikel; das sind jedoch einige zuviel. ISBN, einige Hilfestellungen, Erläuterungen am Seitenfuß und die Versionsgeschichte sollen nicht hervorgehoben werden:[2]

.ns-0 DIV#bodyContent A[href*="/wiki/Spezial:ISBN-Suche/"],
.ns-0 DIV#bodyContent A[href*="/wiki/Hilfe:Audio/"],
.ns-0 DIV#bodyContent A[href*="/wiki/Cowboy's Wiki:Chinesische_Begriffe/"],
.ns-0 div#bodyContent A[href*="/wiki/Cowboy's Wiki:Wappen"],
.ns-0 DIV#bodyContent A[href*="/wiki/Cowboy's Wiki:WikiProjekt_Kommunen_und_Landkreise_in_Deutschland/Einwohnerzahlen/"],
.ns-0 DIV#bodyContent .templatesUsed A[href*="/wiki/Hilfe:"],
.ns-0 DIV#bodyContent .templatesUsed A[href*="/wiki/Vorlage:"],
.ns-0 DIV#bodyContent #catlinks A[href*="/wiki/Spezial:Kategorien"],
.ns-0 DIV#bodyContent #catlinks A[href*="/wiki/Kategorie:"],
.ns-0 DIV#bodyContent #pagehistory A {
   border: none;
}

Bisher wurden hier Selektor-Ausdrücke empfohlen mit einer Auswahl nach dem Titel, etwa:[2]

.ns-0 DIV#bodyContent A[title^="Benutzer:"] {
   border: 2px solid #FF0000;
}

Mittlerweile (bugzilla:542) kann das Titel-Attribut jedoch nicht mehr zuverlässig ausgewertet werden. Hinzu kam noch vor einiger Zeit, dass ein Alias (etwa WP: oder wp:) teilweise noch im Titel stehen kann und die Groß- und Kleinschreibung (so wikipedia:) einzeln abgefangen werden musste. Beim Attribut href= liegt das Link hingegen bereits in standardisierter Form vor.

Weiterleitung (redirect)

Weiterleitungen sind oft sinnvoll, manchmal (beispielsweise bei Abkürzungen und verschobenen Artikeln) ist die Angabe des wirklichen Lemmas als Linkziel vorzuziehen, gelegentlich ist aber von der momentanen Weiterleitungsseite der Ausbau zu einem eigenen Artikel zu erhoffen (mehr).

.ns-0 A.mw-redirect {
   background-color: #F0E68C;
}

Weiterleitungs-Links werden blassgelb unterlegt (nur ANR).

Besondere Kategorien

Ist der Artikel, auf den das Link zielt, unmittelbar in eine bestimmte Kategorie einsortiert, kann das Link besonders hervorgehoben werden. Dies ist mit einer speziellen Anpassung des Cowboy's Wiki:Helferlein/Begriffsklärungs-Check möglich und vor allem bei bestimmten Wartungskategorien usw. sinnvoll.

Seiten-interne Verlinkungen

Verlinkungen innerhalb eines Artikels können gesondert hervorgehoben werden, etwa durch den Wikitext [[#Literatur|Literatur]] erzeugt.[2]

.ns-0 DIV#bodyContent A[href^="#"] {
   color: #408F40;
}   /* view = Artikel ansehen */
.ns-0 #wikiPreview A[href^="#"] {
   text-decoration: underline;
   color: #408F40;
}   /* edit = Artikel bearbeiten */

Bilder nach Speicherort unterscheiden

Zu Wartungszwecken kann es von Interesse sein, die bereits auf Commons transferierten Dateien von Bildern im lokalen Projekt zu unterscheiden:[2]

#bodyContent img[src*="/wikipedia/de/"] {
   border: dotted 1px #0000FF;
}
#bodyContent img[src*="/wikipedia/de/math/"] {
   border-style: none;
}

Die erste Zuweisung markiert Bilder, deren URL die Zeichenkette /wikipedia/de/ enthält – das sind solche, die im lokalen Projekt residieren. Bilder auf Commons haben eine solche URL nicht und werden nicht gekennzeichnet. Die zweite Zuweisung nimmt das wieder zurück für durch TeX generierte Bilder; sie sind immer lokal, im übrigen temporär und für die Wartung uninteressant.

Weblinks auf spezielle Dateiformate

Weblinks auf Seiten, die besondere Dateiformate enthalten (etwa PDF oder Microsoft Office), benötigen beim Benutzer besondere Software zur Darstellung, oder sie eröffnen Sicherheitsprobleme. Deshalb sollten derartige Weblinks sparsam eingesetzt werden. In jedem Fall ist unmittelbar am Weblink-Symbol External.png der besondere Dateityp (gern auch die ungefähre Dateigröße) anzugeben.

Mit Sicherheit lässt es sich einer URL nicht entnehmen, aber man kann versuchen, eine „Dateinamenserweiterung“ zu erkennen und daraus das Dateiformat zu erraten; in diesen Fällen ist für die anderen Leser die Bezeichnung des Linktyps erforderlich. Das folgende Beispiel zeigt Symbole Icons-mini-file acrobat.gif für PDF und Page white word.png für Microsoft Word Dokumente (.doc) an.[2]

DIV#bodyContent A.external[href$=".pdf"],
DIV#bodyContent A.external[href*=".pdf?"],
DIV#bodyContent A.external[href*=".pdf#"],
DIV#bodyContent A.external[href*=".pdf&"],
DIV#bodyContent A.external[href$=".PDF"],
DIV#bodyContent A.external[href*=".PDF?"],
DIV#bodyContent A.external[href*=".PDF#"],
DIV#bodyContent A.external[href*=".PDF&"] {
   background: url("//upload.wikimedia.org/wikipedia/commons/2/23/Icons-mini-file_acrobat.gif")
               center right no-repeat;
   padding-right: 16px;
}

/* :en:User:Gadget850/ExternalLinkIcons.css */
DIV#bodyContent A.external[href$=".doc"],
DIV#bodyContent A.external[href*=".doc?"],
DIV#bodyContent A.external[href*=".doc#"],
DIV#bodyContent A.external[href*=".doc&"],
DIV#bodyContent A.external[href$=".DOC"],
DIV#bodyContent A.external[href*=".DOC?"],
DIV#bodyContent A.external[href*=".DOC#"],
DIV#bodyContent A.external[href*=".DOC&"] {
   background: url("//upload.wikimedia.org/wikipedia/commons/a/a1/Page_white_word.png")
               center right no-repeat;
   padding-right: 18px;
}

Mehr Wiki-Icons, Datei-Icons,Page white zip.png (ZIP), Page white excel.png (Microsoft Excel), Page white flash.png (Flash Video) sowie CSS.

Diese speziellen Icons sind nur für WP-Autoren sichtbar, die sie definiert haben. Für nicht angemeldete Leser sollte in Klammern hinter dem normalen Link-Symbol das Format angegeben sein – auch verlinkt wie etwa DjVu – und möglichst die ungefähre Größe ergänzt sein.

Fehleranalyse

Oberste Überschriftenbene in Artikeln

Überschriften mit nur einem Gleichheitszeichen   = Überschrift =   sollen in Artikeln nicht vorkommen. Um sie besser unterscheiden zu können, erhalten sie einen (teilweise) roten Rahmen und Unterlegung:

.ns-0 H1 SPAN.mw-headline {
   border: 2px solid #FF0000;
   background-color: #FFB6C1;
}

Spezielle Seiten und Elemente

Identifizierung bestimmter Arten von Seiten

Praktisch alle speziellen Inhalte oder bestimmte Seitentypen lassen sich über einen spezifischen Selektor identifizieren. Er ist meist weit oben in der Hierarchie angesiedelt und muss deshalb den anderen Selektoren vorangestellt werden. Eine Auswahl:

  • .page-Spezial_Beobachtungsliste
  • .page-Spezial_Beiträge_MeinEigenerBenutzerName
  • Versionsgeschichte
    UL#pagehistory vor den Listeneinträgen
  • .skin-vector (siehe Hilfe:Skin)
  • .ns-0 Artikelnamensraum
    Allgemein: .ns-n mit n als Nummer des Namensraums
    • Jede Diskussionsseite hat .ns-talk (alle ungeraden Namensraum-Nummern >0)
    • Jede „Vorderseite“ dazu hat .ns-subject (keine Diskussions- oder Spezialseite).
    • Die Spezialseiten haben hingegen .ns-special (zusätzlich zu .ns--1).
  • action-* (view, edit, etc.) als Klasse des HTML-body

Beispiele für die Beschränkung auf bestimmte Seiten unter Externe Links.

  • Das Basis-Element jeder Seite html enthält immer entweder .client-js oder .client-nojs – damit lassen sich Hinweise anzeigen oder ausblenden, je nachdem ob JavaScript beim Leser aktiviert ist oder nicht.

Vorsicht bei Selektoren über ID: Auch jede Abschnittsüberschrift erhält einen Selektor dieses Namens; in einem span-Element. Bei mehreren gleichlautenden Abschnittsüberschriften werden die Selektoren automatisch mittels einer laufenden Nummer unterschieden.

Eigene Beiträge

Auf Versionsgeschichte und Beobachtungslisten kann es von Interesse sein, seine eigenen Beiträge hervorzuheben; wer einen langen Benutzernamen hat, kann auch ein knappes Ich an diese Stelle setzen.

Um Platz zu sparen und vielleicht den eigenen Edit in eine einzelne Zeile zu bekommen, kann das Link auf sich selbst, seine eigene Diskussion und seine eigenen Beiträge ausgeblendet werden – bei den Einträgen, bei denen hier nichts steht, geht es um diesen Benutzer selbst.

SPAN.mw-usertoollinks A[title="Spezial:Beiträge/MeinEigenerName"],
SPAN.mw-usertoollinks A[title="Benutzer Diskussion:MeinEigenerName"],
UL.special A[title="Benutzer:MeinEigenerName"] {
   display: none;
}

Die Links auf MeinEigenerName, seine Diskussion und Beiträge sind für den Benutzer dieser CSS unsichtbar auf Versionsgeschichte und Beobachtungslisten.

Signatur

Zu weiteren Gestaltungsmöglichkeiten siehe Hilfe:Signatur (Signaturen hervorheben, auch Unterdrücken von Hervorhebungen in den Signaturen anderer Benutzer).

Versionsgeschichte

Hervorhebung des eigenen Benutzernamens (leicht rötlicher Hintergrund, keine schwarze Schrift) innerhalb einer Versionsgeschichte
SPAN.history-user A[title="Benutzer:MeinEigenerName"] {
   display: inline-block;
   width: 25px;
   overflow: hidden;
   visibility: collapse;
}
SPAN.history-user A[title="Benutzer:MeinEigenerName"]:before {
   content: "(Ich)";
   visibility: visible ! important;
   background-color: #FF80FF;
   color: #000000;
   font-weight: bold;
}

In der Versionsgeschichte wird das Link auf MeinEigenerName dargestellt als (Ich) und damit zwischen den anderen Benutzerbeiträgen hervorgehoben.

:before ist eine ältere Notation, die von allen Browsern verstanden wird; künftig werden moderne Browser die geänderte Schreibweise ::before mit zwei Doppelpunkten akzeptieren.

Beobachtungsliste

Zwei spezielle Eigenschaften können auf der Beobachtungsliste ausgenutzt werden:

  • Die Listenpunkte sind abwechselnd mit den Klassen mw-line-odd und mw-line-even versehen. Damit lassen sich zusammenhängende Listenzeilen pastellfarbig unterlegen, beispielsweise um in schmalen Bildschirm-Fenstern mehrfach umbrochene Listenpunkte unterscheiden zu können.
  • Jeder Listenpunkt hat eine eigene Klasse:
    watchlist-NamensraumNummer-Artikelbezeichner
    Im Artikelbezeichner sind Leerzeichen, Doppelpunkte und Schrägstriche durch Unterstreichungsstriche ersetzt.
    Damit lassen sich besonders interessierende Seiten auffallend hervorheben; es muss aber für jeden einzelnen Seitentitel ein Selektor angegeben werden.
  • Bei Unterseiten-Systemen, bei denen man nicht jede einzeln angeben und pflegen möchte, kann man hervorheben:[2]
.page-Spezial_Beobachtungsliste A[href*="/wiki/Cowboy's_Wiki_Diskussion:Technik/Skin"],
.page-Spezial_Beobachtungsliste A[href*="/wiki/Cowboy's_Wiki:Technik/Skin"] {
  background-color: #ADD8E6;
}
.page-Spezial_Beobachtungsliste A[href*="/wiki/Benutzer_Diskussion:MeinEigenerName"] {
  background-color: #7FFF00;
}
.page-Spezial_Beobachtungsliste A[href*="/wiki/Benutzer:MeinEigenerName"] {
  background-color: #FFB6C1;
}
  • Interessante Seiten und Unterseiten werden hellblau unterlegt (#ADD8E6).
  • Eigene Diskussionsseiten (einschließlich der Unterseiten, für die es keinen Benachrichtigungsbalken gibt) werden hellgrün unterlegt (#7FFF00).
  • Jemand hat eine von meinen Seiten geändert (#FFB6C1) – war ich das selbst, hat ein lieber Mensch mir einen Tippfehler bereinigt, oder muss ich grollen?
  • Auch das Ausblenden bestimmter Seiten ist möglich (wenn nur die zugehörige Seite von Interesse ist). Das nachstehende Beispiel blendet im Namensraum 5 (=„Cowboy's Wiki-Diskussion“) die Vorgänge der Seite mit dem Titel „Kurier“ aus; der eigentliche CW:K im Namensraum 4 wird jedoch weiterhin angezeigt:
.page-Spezial_Beobachtungsliste LI.watchlist-5-Kurier {
   display: none ! important;
}

Im Mai 2012 wurde neu eingeführt, dass solche Änderungen hervorgehoben werden, deren Seiten zwischenzeitlich nicht besucht wurden. Standardmäßig erfolgt diese Hervorhebung in Fettschrift, damit sie auch von Benutzern mit technischen oder sonstigen Einschränkungen gut wahrgenommen werden können.
Wem dies nicht gefällt, dem bieten sich mehrere Möglichkeiten (Mitte Juli 2012 wurden die Bezeichner geändert):

  • Traditioneller Zustand ohne Hervorhebung:
.mw-changeslist-line-watched .mw-title {
   font-weight: normal ! important;
}
  • Hervorhebung in Kursiv- statt in Fettschrift:
.mw-changeslist-line-watched .mw-title {
   font-weight: normal ! important;
   font-style:  italic;
}

Wer die Markierung der Änderungen nicht mehr wahrnehmen kann, benötigt auch keinen Button dazu mehr:

 form#mw-watchlist-resetbutton {
   display: none;
}

Zum Popup nach dem Hinzufügen oder Entfernen siehe unten.

Bearbeitungsseite

Zusammenfassungszeile

Bei manchen Skins wird die Vorschau einer längeren Zusammenfassungszeile nicht umbrochen (mehrzeilig dargestellt), sondern am rechten Fensterrand abgeschnitten.

DIV.mw-summary-preview SPAN.comment {
   white-space: normal;
}

Hinweise

Wer alle Boxen schon auswendig kennt und trotzdem beachtet, sich auch über die rechtliche Bedeutung klar ist, kann sie unsichtbar machen, hat mehr Platz zum Editieren und muss weniger scrollen. Auf kleinen Bildschirmen, etwa Netbooks, brauchen routinierte Autoren auch keinen Link auf die Bearbeitungshilfe.

DIV.mw-tos-summary,
DIV#editpage-copywarn,
.editpage-head-copywarn,
A#mw-editform-cancel,
.editHelp,
A[target="helpwindow"],
SPAN.wikEdHelpSpan {
   display: none ! important;
}
  • DIV.mw-tos-summary ist die Box Wenn du nicht möchtest, dass dein Text …
  • DIV#editpage-copywarn ist die Box Mit dem Speichern dieser Seite versichere ich, …
  • A#mw-editform-cancel entfernt die gesonderte Möglichkeit zum „Abbrechen“ (es führt einfach auf die normale Seite zurück); im Browser gäbe es dazu auch andere Möglichkeiten.
    • .editHelp das Link „Abbrechen“ zusammen mit der Bearbeitungshilfe sicher wegbekommen.
  • A[target="helpwindow"][2] entfernt das Link „Bearbeitungshilfe“
  • SPAN.wikEdHelpSpan wäre für routinierte Benutzer von WikEd sinnvoll; allen anderen schadet es nicht.

Die Bearbeitungshilfen lassen möglicherweise einen Leerraum zurück; auch dieser kann entfernt werden:

SPAN.editHelp,
SPAN.wikEdEditHelp {
   color: #FFFFFF;
   border-collapse: collapse;
}

Zum Popup nach dem Speichern siehe unten.

Änderungen

Gilt für Versionsgeschichte und Versionsvergleich; teils Beobachtungsliste.

„Zurücksetzen“-Link

Irrtümlich klickt man manchmal „Zurücksetzen“ an, obwohl man „rückgängig“ wollte mit der Möglichkeit, in die Zusammenfassungszeile zu schreiben und weitere Änderungen vorzunehmen. Drei Möglichkeiten, um dies zu vermeiden:

Blassgrau; Link bleibt anklickbar, eckige Klammern bleiben stehen:

.mw-rollback-link a {
   color: #C0C0C0 ! important;
}

Ganz ausblenden:

.mw-rollback-link {
   display: none;
}

Allgemein ausblenden, jedoch bei „Versionsunterschiede“ blassrot unterlegt anzeigen:

.mw-rollback-link {
   display: none;
}
.diff-ntitle .mw-rollback-link {
   display: inline;
   background-color: #FFC0C0;
}

Hilfen und Hinweistexte

Wer routinierter Wikianer ist, alle Anleitungen auswendig weiß und keinerlei Hilfen und Tipps benötigt, kann sich Platz auf dem Bildschirm verschaffen:

form#mw-watchlist-resetbutton ul li,
.specialpage-helplink,
DIV.mw-tos-summary,
DIV#editpage-copywarn,
A#mw-editform-cancel,
.editHelp,
A[target="helpwindow"],
SPAN.wikEdHelpSpan,
#fundraising,
.cn-fundraiser-banner {
   display: none ! important;
}
  • form#mw-watchlist-resetbutton ul li entfernt den Hinweistext der Beobachtungsliste („Seiten mit noch nicht gesehenen Änderungen werden fett dargestellt“)
  • .specialpage-helplink entfernt auf allen Spezialseiten Hinweise auf Benutzungs-Informationen (zugehörige Hilfeseite), wie sie von Einsteigern benötigt werden.
  • #fundraising und .cn-fundraiser-banner sollte demgegenüber nur für einen Spendenaufruf benutzt werden, so dass andere Informationsboxen der deutschsprachigen Wikipedia erhalten bleiben müssten.
  • #wp_talkpagetext war der Hinweis für Diskussionsseiten („Bitte beachte unsere Richtlinien … und beende deinen Beitrag mit deiner Signatur: --~~~~“) und ist seit Sommer 2013 durch .wp_intro abgedeckt.

Siehe entsprechende Details zur Bearbeitungsseite für weitere Einzelheiten.

Weitere Selektoren:

  • .wp_intro – Einführungsabschnitte
  • DIV#siteNotice ist ein gelegentlich auf allen Seiten erscheinender Kasten (oft vor Weihnachten mit Spendenaufruf), den man vor dem Einloggen als IP beachten sollte. Parallel wird ggf. im Browser auch ein für die Nachricht spezifischer Cookie abgelegt, dass man diese Nachricht nicht mehr sehen möchte, nachdem das angeklickt wurde. Damit bekäme man wichtige Nachrichten mit; das wäre der bedingungslosen Ausblendung vorzuziehen.

Mehr: Projektweite Selektoren speziell für die deutschsprachige Wikipedia

Inhaltsverzeichnis

Siehe dazu auch: Hilfe:Inhaltsverzeichnis

Portal-Layout

Siehe dazu auch: Skin/GUI

Titel-Leiste

Wer auf dem Bildschirm Platzmangel hat und die Titelleiste (Links zu Benutzerseite, „Eigene Diskussion“, „Einstellungen“, „Beobachtungsliste“, …) einkürzen möchte, damit sie bei schmalem Fenster und langem Benutzernamen nicht mehrzeilig wird, kann dies wie folgt veranlassen:

LI#pt-userpage A,
LI#pt-mytalk A,
LI#pt-watchlist A {
   display: inline-block;
   overflow: hidden;
   width: 30px;
   visibility: collapse;
}
LI#pt-userpage A:before {
   content: "Ich   ";
   font-weight: bold
}
LI#pt-mytalk A:before {
   content: "Disk   ";
}
LI#pt-watchlist A:before {
   content: "BEO   ";
}
LI#pt-userpage A:before,
LI#pt-mytalk A:before,
LI#pt-watchlist A:before {
   visibility: visible ! important;
}

Die drei Listenelemente (LI) der PersonalToolbar pt werden auf kleine Felder von 30 Pixel Breite reduziert und geeignet konfiguriert. Dann wird deren Standard-Text eine Ersatz-Zeichenkette vorangestellt, die mittels anschließender Leerzeichen den Originaltext aus dem sichtbaren Feld herausschiebt. Der Ersatz ist ein in Fettschrift hervorgehobenes Ich statt Benutzername, „Disk“ statt „Eigene Diskussion“, „BEO“ statt „Beobachtungsliste“. Damit dies möglichst in jedem Browser sichtbar ist, wird dies noch einmal mittels important bekräftigt.

Wer sich noch an dem kleinen grafische Symbol für „Benutzer“ neben dem Link zu seiner eigenen Seite stört, mag es ausblenden:

LI#pt-userpage {
   background-image: none;
}

2010 wurden freundliche Hinweise auf neue Features in die einzeilige Kopfleiste der monobook eingefügt. Wer sie kennt, die Links nicht länger benötigt und den Platz auf dem vollgestopften Bildschirm braucht:

LI#pt-prefswitch-link-on,
LI#pt-prefswitch-link-anon {
   display: none;
}

Zwischenzeitlich hat sich dies zwar einstweilen erledigt; andere Elemente mögen aber auch Gegenstand einer Ausblendung sein.

Benachrichtigungsbalken

Der Benachrichtigungsbalken hat mit seiner Farbgebung missliche Assoziationen befördert. Ein hellblauer Hintergrund war zwischenzeitlich passend zur Vector-Skin eingeführt worden; dann war die Benachrichtigung nicht auffallend genug. Nachstehend ein hellblauer Hintergrund, dazu ein roter Rahmen mit Schattenwurf.

.usermessage {
   background-color: #e0e8ff;
   border-style: solid;
   border-color: #FF0000;
   border-width: 1px 4px 3px 1px;
   width: 100%;
   margin: -1em 0 1em 0;
   padding: .5em 0;
   text-align: center;
}
Du hast neue Nachrichten auf deiner Diskussionsseite

Benachrichtigungs-Popups

Im Herbst 2012 wurde eingeführt, dass nach jedem Abspeichern einer Seite für einige Sekunden ein kleines Feld erscheint (PostEdit); außerdem wird beim Hinzufügen oder Entfernen auf der Beobachtungsliste ein derartiges Feld vorübergehend angezeigt. Beide Anwendungen verwenden grundsätzlich unterschiedliche Programmierungen. Ausblenden lassen sich beide mittels

.mw-notification-autohide,
.postedit {
   display: none;
}
  • .mw-notification-autohide
    betrifft jede Art von Benachrichtigung, die nach einigen Sekunden von selbst verschwindet; ausgenommen PostEdit.
  • .postedit
    betrifft abweichend davon PostEdit.
  • #mw-notification-area
    würde auch alle anderen Benachrichtigungen betreffen; ausgenommen PostEdit.

Persönlichen Zeichensatz vereinbaren

Auf Seiten mit nichtlateinischen Texten müssen die fremdsprachlichen Zeichen eingebunden werden. Dies sollte nur über Vorlagen geschehen, die zu jedem Textabschnitt die Art der Schrift mitteilen. Hierfür werden für alle Benutzer Angaben über Zeichensätze (Fonts) vorgegeben, die erfahrungsgemäß zu guten Resultaten führen. Falls dies nicht ausreicht, versuchen moderne Browser, unter allen auf einem Rechner vorhandenen Zeichensätzen irgendein Zeichen mit der richtigen Kodierung zu finden. Das kann im Einzelfall dazu führen, dass die Texte unglücklich aussehen, oder dass einzelne Zeichen völlig anders wirken als der Grundtext.

.polytonic {
   font-family: "Mein Spezial-Altgriechisch";
}

In der Vorlage {{Polytonisch}} wird die Klasse .polytonic definiert; die Angabe eines Zeichensatzes durch Benutzer hat Vorrang für die Darstellung.

Seinen eigenen Stil finden

Wer den Wunsch hat, weitere persönliche Hervorhebungen oder Ausblendungen zu definieren, geht wie folgt vor:

  1. Mit einer Browser-Funktion „Quelltext ansehen“ (vielleicht im Menüfeld „Ansicht“) den HTML-Quelltext der fraglichen Seite betrachten.
    Besonders hilfreich sind dabei Debugger; sie lassen nicht nur alle verwendeten HTML- und CSS-Daten lesen, sondern zeigen auch den möglicherweise modifizierten Zustand – und sie ermöglichen die stilistische Analyse („Kaskade“) jedes Elements auf der Seite:
    • Internet Explorer: Standardmäßig vorhanden; [Extras]→[Entwicklertools] oder F12
    • Firefox: Add-On Firebug installieren; dort auch: „Element untersuchen“, Seitenansicht (ursprüngliches HTML).
  2. Umschließende Tags suchen. Das sind etwa <li></li> oder <a></a>. Gerade für die Definition eigener Stile sind eingefügt: <div>Ganze Absätze</div> und <span>Teil einer Zeile</span>.
  3. Identifikatoren in den Tags suchen. Das sind wahlweise class="XYZ" oder id="abcd". Es kann mehrere Elemente der gleichen class geben; id sollte aber jeweils nur ein einziges Mal vorkommen.
  4. Spezifischen Selektor bilden.
    Beispiel: Im HTML-Quelltext steht
    <div id="abcd"><span class="XYZ">Interessant</span></div>
    Der Selektor für Interessant lautet dann:
    #abcd span.XYZ
  5. Stil-Eigenschaften suchen und in {} setzen:
    • Schriftfarbe – color: #FF80FF; – magenta
    • Hintergrundfarbe – background-color: #80FFFF; – türkis
    • Fettschrift – font-weight: bold;
    • Rahmen – border: 1px solid; – viele weitere Möglichkeiten
    • Ausblenden – display: none;

Es kann sein, dass die vom Wiki-Server ausgelieferte Seite bereits durch Skripte verändert wurde. Dies ist in der Ansicht des HTML-Quelltextes nicht zu sehen; dann werden spezielle Untersuchungswerkzeuge benötigt wie etwa das Browser-AddOn Firebug für Mozilla Firefox.

Eine ausgiebige (aber nicht mehr aktualisierbare) Liste der Werte für class= und id= ist in der englischsprachigen Wikipedia zu finden.

Testen

Bei der Bearbeitung werden die Definitionen bereits wirksam, wenn man „Vorschau“ oder „Änderungen“ anklickt. Damit lassen sie sich an den auf der „Bearbeiten“-Seite und der Portalumgebung sichtbaren Elementen testen, ohne die Versionsgeschichte belasten zu müssen.

Browser-Cache

Seit MediaWiki 1.17 (2011) wird an die URL der Standard-CSS-Definition aller Benutzer (common.css sowie etwa vector.css) ein Zeitstempel angefügt, der die letzte Veränderung angibt. Damit wird immer die gültige Definition eingebunden; Leeren des Browser-Cache (siehe Hilfe:Cache) ist deshalb nicht mehr erforderlich.

Das gilt aber nicht für die Einbindung anderer CSS-Seiten. Hier hat jede Version die identische URL und im Browser-Cache können deshalb veraltete Versionen vorkommen. Dann wären die auf Skin/JS angegebenen Möglichkeiten einzusetzen.

Server-seitige Stile

Automatisch eingebundene Standardstile in der deutschsprachigen Wikipedia sind:

Veraltet sind Pfade wie die folgenden:

Inzwischen werden vom Server weltweit gültige Komponenten mittels des ResourceLoaders zusammengestellt. Mehr unter Skin/MediaWiki.

Formatierung

Hat man viele Stile definiert, wird die Zusammenstellung schnell unübersichtlich.

MediaWiki empfiehlt hierzu einen sinnvollen Standard (von mehreren allgemein gebräuchlichen):

  • Jeder Selektor in einer eigenen Zeile.
  • Öffnende Klammer in der gleichen Zeile wie der letzte Selektor (statt Komma).
  • Jede Eigenschaft einrücken (MW: 1 tab; oder etwa drei bis vier Leerzeichen).
  • Ein Leerzeichen zwischen Doppelpunkt und Wert.
  • Auch die letzte Zuweisung wird mit Semikolon abgeschlossen.
  • Schließende Klammer linksbündig.
.selector,
#someElement {
   float: right;
   text-align: left;
}

In der Regel werden die Eigenschaften alphabetisch sortiert; es sei denn, bestimmte Eigenschaften von besonderer Wichtigkeit sollen nebensächlichen Details vorangestellt werden.

Erweiterte Möglichkeiten

Neben der Definition in den eigenen Standard-Seiten des Benutzers wie common.css gibt es weitere Möglichkeiten, fertige Definitionen zu importieren oder abhängig von bestimmten Umständen auch dynamisch zu generieren. Nachdem solche nachträglichen Definitionen eingefügt wurden, wird die Darstellung der bislang angezeigten Seite entsprechend verändert.

Das Laden mittels @import in den eigenen CSS-Seiten reduziert das Problem des Springens von Seitenelementen, weil die Anweisungen früher zur Verfügung stehen. Sie werden auch vor den späteren Definitionen wirksam und könnten damit im Einzelfall wieder überschrieben werden.

Statischer @import von einer URL

Seit CSS.1 gibt es die folgende Möglichkeit, in die CSS als erste[3] Zeile(n) zu schreiben:

@import url(//de.wikipedia.org/w/index.php?title=Benutzer:PerfektesChaos/shared.css&action=raw&ctype=text/css);
@import "/w/index.php?title=Benutzer:PerfektesChaos/shared.css&action=raw&ctype=text/css";

Dies ist der schnellste Weg, wenn immer von einer festen URL importiert werden soll. Steht dies nicht vor allen anderen Deklarationen, ist das Verhalten des Browsers unklar; neuere Browser akzeptieren es auch an anderen Stellen.

Bedingter Import von einer URL

Mit JavaScript kann in Abhängigkeit von Bedingungen ein Import veranlasst werden; damit lassen sich elegant komplexe Situationen erfassen:

mw.loader.load("//de.wikipedia.org/w/index.php?title=Benutzer:PerfektesChaos/shared.css&action=raw&ctype=text/css",
               "text/css");

Bisher wurde dafür die Funktion importStylesheetURI() benutzt. Diese ist veraltet und bietet keinen besonderen Vorteil.

Bedingter Import einer Wikipedia-Seite

Aktuell soll dafür die gleiche Funktion wie eben mit der entsprechenden URL zur Seite verwendet werden. Ärgerlich ist dabei die unübersichtliche URL; es ist zu hoffen, dass gelegentlich auch ein schlichtes Wikilink ermöglicht wird.

Bisher wurde dafür die Funktion importStylesheet() benutzt. Hier wurde statt der URL nur der Titel der Seite angegeben.

Dynamisches Einfügen von CSS in die Seite

Über die Funktion mw.util.addCSS() – veraltet: appendCSS() aus wikibits – kann man auch spontan CSS-Definitionen zusammenstellen und in die Seite einfügen. Der CSS-Code (String) wird der Funktion als Parameter übergeben; sie gibt ein Objekt vom Typ CSSStyleSheet zurück, das später weiter manipuliert werden kann. Ewiger Nachteil bei diesem JavaScript-Stil: Es kommt zu spät und ruckelt deshalb oft.

Siehe auch

Anmerkungen

  1. Zu Einzelheiten der Seitenaufteilung siehe WP:GUI.
  2. 2,0 2,1 2,2 2,3 2,4 2,5 2,6 2,7 2,8 Diese CSS3-Selektoren (siehe Substring matching attribute selectors) werden von vielen modernen Browsern unterstützt, vom Internet Explorer jedoch erst ab Version 7.
  3. CSS.1