Hilfe:Eigene Stylesheets

MediaWiki erlaubt es Benutzern, eigene Stylesheets zu definieren. Dazu legt man unterhalb seiner Benutzerseite eine Seite mit dem Namen des in den Einstellungen gewählten Stils an: Für Monobook-Benutzer hieße diese Seite zum Beispiel [[Benutzer:Name/monobook.css]]. Dort kann man nun nach Belieben CSS-Angaben einfügen. Nach dem Ändern sollte man mit Shift-Reload die Seite neu laden. Für Benutzer des Skins Blue Cologne heißt die Datei [[Benutzer:Name/cologneblue.css]] (zusammen, nicht cologne_blue.css!).

Das eigene Stylesheet kann nur der Benutzer selbst oder Benutzer mit Administratorrechten bearbeiten.

Beispiele

/* Hintergrund des Inhaltsbereichs und der Tabs grau färben */
#content, #content table
#p-cactions ul li a { background: #f5f5f5; }

/* stop background image from scrolling with content area */
body { background-attachment: fixed; }

/* Seitenhintergrund ersetzen */
body { background: Purple; }

/* Farbe von pre-Bereichen ändern  */
pre { background: White }

/* Logo ändern */
#p-logo a { background: url(http://en.wikipedia.org/upload/wiki.png) 35% 50% no-repeat !important; }

/* Logo abschalten und Kästen höherschieben */
#p-logo { display: none }
#column-one { padding-top: 0; }

/* Personen-Icon neben dem Benutzernamen abschalten */
li#pt-userpage { background: none }

/* Browsereinstellungen für Textgröße und Schrift benutzen */
body, #globalWrapper { font: inherit !important; }

/* Links immer unterstreichen */
a { text-decoration: underline; }

/* Farbe nicht angewählter Tabs ändern */
#p-cactions ul li a { background: #C7FDC7; }

/* Farbe angewählter Tabs ändern */
#p-cactions ul li.selected a { background: white; }

/* Rahmenfarbe nicht angewählter Tabs ändern */
#p-cactions li.selected { border-color: #aaaaaa; }

/* tab bottom not removed on hover */
#p-cactions li a:hover { z-index: 0; text-decoration: none; }
#p-cactions li.selected a:hover { z-index: 3; }

/* Suchfeld und Buttons gestalten */
input.searchButton {
    background-color: #efefef !important;
    border: 1px outset !important;  
}
#searchInput { border: 1px inset !important; }

/* Standard-Linkfarben */
a { color: #0000FF; }
a:visited { color: #7F007F; }
a:active, a.new { color: #FF0000; }
a.interwiki, a.external { color: #3366BB; }
a.stub { color: #772233; }

table.metadata { display:block; }

/* put scrollbar on pre sections instead of ugly cutoff/overlap in firefox */
pre { overflow: auto; }

Optimierung für Farbenblinde

/* monobook.css optimiert für Rot-Grün-Schwäche (15.06.04) */
/* Hinweise für weitere Optimierungen bitte an Benutzer:Wolfgangbeyer */

/* Alle Links unterstreichen: */
a { text-decoration: underline; } 

/* Link-Farben: */
a { color: #0000FF; } /* Gewöhnliche Links blau */
a:visited { color: #FF7FFF; } /* Besuchte Links heller */
a:active, a.new { color: #FF0000; } /* Nicht existierende Links rot (=dunkel) */
a.interwiki, a.external { color: #3366BB; } /* der normale Default, noch nicht optimiert */
a.stub { color: #772233; } /* der normale Default, noch nicht optimiert */

/* Texte in Versionlistenvergleich: */
/* Unveränderter Text in modifizierten Absätzen hellblau (background-color=weiß leider wirkungslos)*/
*.diff-addedline {background-color: #FFFFFF; color: #9F9FFF;}
*.diff-deletedline {background-color: #FFFFFF; color: #9F9FFF;}

Referenz

Folgende Elemente, Klassen und IDs sind für Stylesheets relevant.

Body:

• a - verwenden Sie a:link und a:visited, um eine interne Verbindung vom "spezielle Seite" Vorsprung zu unterscheiden, der nicht eine Verbindung ist (sehen Sie Help:Namespace#Tab_labels oder Hilfe:Namensraum)
• a:link, a:visited - example: help:index
• a#contentTop
• a.external - http://example
• a.extiw – interwiki link in page body - en:example
• a.image – link from full image to image description page
• a.internal – link to file itself (Media:), and links from thumbnail and magnifying glass icon to image description page (note that color and font size specified for a.internal are only applicable in the first case) - example
• a.new example
• body.ns-0
• ... (namespaces)
• body.ns-15
• div#bodyContent
• div#column-content
• div#editsection
• div#globalWrapper
• div#tocindent
• div.tocline
• h1.firstHeading
• h2
• h3
• small - example
• table.toc

Interlanguage-Links änderst du über einen Stil für "#p-lang a".

Bearbeiten-Seite

• Editbox: textarea#wpTextbox1
• Zusammenfassung: input#wpSummary

Es ist möglich einen Stil abhängig vom Wert eines Attributs zu definieren. Die folgende Anweisung färbt Links zu "Benutzername" oder "Seitenname" ein:

a[title ="Benutzer:Benutzername"] {color:  white; background: red } 
a[title ="Seitenname"] {color:  white; background: red }

Dieser Artikel basiert auf dem Artikel Hilfe:Eigene_Stylesheets aus dem freien WikiMedia Meta-Wiki und steht unter der GNU-Lizenz für freie Dokumentation. Im Meta-Wiki ist eine Liste der Autoren verfügbar.