Hilfe:Eigene Stylesheets
Diese Seite ist Teil des MediaWiki Handbuchs. Beschrieben werden die Funktionen der MediaWiki-Software.
Benoetigt ihr weitere Hilfe geht bitte auf http://meta.wikipedia.org.
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) - Media: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 }
Erlauben der Benutzerstylesheets
Hinweis für Administratoren: Seit Version 1.3.9 sind benutzerdefinierte Stylesheets per Voreinstellung in DefaultSettings.php deaktiviert. Zur Aktivierung ist folgender Eintrag in die LocalSettings.php hinzuzufügen:
$wgAllowUserCss = true;
Um benutzerdefinierte JavaScript-Dateien zu aktivieren, kann folgende Zeile verwendet werden:
$wgAllowUserJs = true;