Hilfe:Eigene Stylesheets

Diese Seite ist Teil des MediaWiki-Handbuchs. Beschrieben werden die Funktionen der MediaWiki-Software.

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 Styles an: Für Benutzer, die den Skin Monobook benutzen, hieße diese Seite dann zum Beispiel [[Benutzer:Name/monobook.css]], für Benutzer des Skins Blue Cologne heißt die Datei [[Benutzer:Name/cologneblue.css]] (zusammen, nicht cologne_blue.css!). Dort kann man nun nach Belieben CSS-Angaben einfügen und somit das Aussehen des Skins verändern. Nach dem Ändern sollte man aber die Seite neu laden.

Das eigene Stylesheet kann nur vom Benutzer selbst oder von Benutzern mit Administratorrechten bearbeitet werden.

Beispiele

Allgemeines

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

/* Breite und Position des Hauptfeldes einstellen. Beispiel:
#content {width: 800px; left: 4%;} 

/* 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 ändern und Größe für SVG-Dateien festlegen; hier 100px*/
#p-logo a { background: url(http://upload.wikimedia.org/wikipedia/commons/thumb/1/11/Foo.svg/100px-Foo.svg.png) 35% 50% no-repeat !important; }

/* Logo ändern und Größe für andere Dateitypen festlegen; hier 100px*/
#p-logo a { background: url(http://upload.wikimedia.org/wikipedia/commons/thumb/c/ce/Foo.jpg/100px-Foo.jpg) 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, .Unicode, .Unicode1, .Unicode2, .IPA, .IAST, .altitalisch, .gotisch, .hebrew, .spanAr, .music, .polytonic { font: inherit !important; }

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

/* Farbe für Weiterleitungen (Redirects) ändern (Hier: DeepPink) */
a.mw-redirect { color:#FF1493; }

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

/* Unterer Tab-Rahmen verschwindet nicht beim "drüberfahren" */
#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;  
}

/* Schrift im Bearbeiten-Feld ändern: */
textarea {
    font-size: 10pt;
    font-family: "Lucida Grande","Tahoma","Courier New","Verdana";
}

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

Gestaltung der deutschen Wikipedia-Hauptseite

 /* Hintergrundfarbe und Rahmenfarbe ändern */
 #hauptseite h2 { background-color:#eeffee; border-color:#000000; }
 #hauptseite .inhalt { background-color:#ffffdd; border-color:#000000; }
 
 /* Trennstrich bei "In den Nachrichten" umfärben */
 #hauptseite .inhalt hr { background-color:#000000; color:#000000; }
 
 /* Abgerundete Ecken im Firefox */
 #hauptseite h2 { -moz-border-radius-topleft:0.5em; -moz-border-radius-topright:0.5em; }
 #hauptseite .inhalt { -moz-border-radius-bottomleft:0.5em; -moz-border-radius-bottomright:0.5em; }
 
 /* Keine Portalicons */
 .hauptseite-oben .inhalt .portale .icon { display:none; }

 /* Beispiel 1 – schlichtes Design */
 #hauptseite h2 { background-color:#ffffff; border:none; border-bottom:solid 1px #4682B4; font-family:sans-serif; font-size:130%; margin-bottom:5px; }
 #hauptseite .inhalt { border:none; padding:0.3em 0em 0.4em 0em; }
 #hauptseite .inhalt hr { background-color:#ffffff; color:#ffffff; }
 .hauptseite-links h2, .hauptseite-rechts h2 { text-indent:0.2em; }

 /* Beispiel 2 – buntes Design */
 #hauptseite h2 { border-bottom:0px solid white; padding-top: 0.5em; }
 #hauptseite-willkommen h2 { background-color:#f0f7ff; border-color:#c6c9ff; }
 #hauptseite-wikipedia h2 { background-color:#f8f8ff; border-color:#c6cdd5; }
 #hauptseite-artikel h2 { background-color:#fff2f2; border-color:#ffc9c9; }
 #hauptseite-wissenswertes h2 { background-color:#faf9ec; border-color:#d9d3ba; }
 #hauptseite-nachrichten h2 { background-color:#ffffd5; border-color:#ffcc66; }
 #hauptseite-verstorbene h2 { background-color:#ffffd5; border-color:#ffcc66; }
 #hauptseite-ereignisse h2 { background-color:#f8f8ff; border-color:#c6cdd5; }
 #hauptseite-schwesterprojekte h2 { background-color:#f9f9f9; border-color:#cccccc; }
 #hauptseite-willkommen .inhalt { background-color:#f0f7ff; border-color:#c6c9ff; }
 #hauptseite-wikipedia .inhalt { background-color:#f8f8ff; border-color:#c6cdd5; }
 #hauptseite-artikel .inhalt { background-color:#fff2f2; border-color:#ffc9c9; }
 #hauptseite-wissenswertes .inhalt { background-color:#faf9ec; border-color:#d9d3ba; }
 #hauptseite-nachrichten .inhalt { background-color:#ffffd5; border-color:#ffcc66; }
 #hauptseite-verstorbene .inhalt { background-color:#ffffd5; border-color:#ffcc66; }
 #hauptseite-ereignisse .inhalt { background-color:#f8f8ff; border-color:#c6cdd5; }
 #hauptseite-schwesterprojekte .inhalt { background-color:#f9f9f9; border-color:#cccccc; }
 #hauptseite .inhalt hr { background-color:#ffcc66; color:#ffcc66; }

 /* Beispiel 3 – farbiges Design */
 #hauptseite-willkommen h2 { background-color: #ddd; border-color: #bbb; color: #222; }
 #hauptseite-willkommen .inhalt { background-color: #f7f7f7; border-color: #bbb; }
 #hauptseite-nachrichten h2 { background-color: #ecd; border-color: #d9b; color: #402; }
 #hauptseite-nachrichten .inhalt { background-color: #fbf3f7; border-color: #d9b; }
 #hauptseite-nachrichten .inhalt hr { background-color: #d9b; color: #d9b; }
 #hauptseite-verstorbene h2 { background-color: #dce; border-color: #b9d; color: #204; }
 #hauptseite-verstorbene .inhalt { background-color: #f7f3fb; border-color: #b9d; }
 #hauptseite-wissenswertes h2 { background-color: #cde; border-color: #9bd; color: #024; }
 #hauptseite-wissenswertes .inhalt { background-color: #f3f7fb; border-color: #9bd; }
 #hauptseite-schwesterprojekte h2 { background-color: #ddd; border-color: #bbb; color: #222; }
 #hauptseite-schwesterprojekte .inhalt { background-color: #f7f7f7; border-color: #bbb; }
 #hauptseite-ereignisse h2 { background-color: #ced; border-color: #9db; color: #042; }
 #hauptseite-ereignisse .inhalt { background-color: #f3fbf7; border-color: #9db; }
 #hauptseite-artikel h2 { background-color: #dec; border-color: #bd9; color: #240; }
 #hauptseite-artikel .inhalt { background-color: #f7fbf3; border-color: #bd9; }
 #hauptseite-wikipedia h2 { background-color: #edc; border-color: #db9; color: #420; }
 #hauptseite-wikipedia .inhalt { background-color: #fbf7f3; border-color: #db9; }
 #hauptseite-wikipedia .inhalt hr { background-color: #db9; color: #db9; }

 /* Beispiel 4 – Commons Design*/
 #hauptseite h2 { font-size:110%; padding:0.2em 0.5em 0.2em 0.5em; text-indent:0; }
 .hauptseite-oben h2, .hauptseite-unten h2 { background-color:#eeeeee !important; border-color:#cccccc !important; }
 .hauptseite-links h2 { background-color:#faecc8 !important; border-color:#fad67d !important; }
 .hauptseite-rechts h2 { background-color:#d0e5f5 !important; border-color:#abd5f5 !important; }
 #hauptseite .inhalt { padding:0.4em 1em 0.3em 1em; }
 .hauptseite-oben .inhalt, .hauptseite-unten .inhalt { background-color:#f9f9f9 !important; border-color:#cccccc !important; }
 .hauptseite-links .inhalt { background-color:#faf6ed !important; border-color:#fad67d !important; }
 .hauptseite-rechts .inhalt { background-color:#f1f5fc !important; border-color:#abd5f5 !important; }
 .hauptseite-oben .inhalt .portale .icon { display:none; }
 .hauptseite-oben .inhalt .intern { display:none; }
 #hauptseite .inhalt hr { background-color:#d0e5f5; color:#d0e5f5; margin:0.4em 0; }
 .hauptseite-links .inhalt .mehr { border-top:1px solid #faecc8 !important; padding-top:0.4em; }
 .hauptseite-rechts .inhalt .mehr { border-top:1px solid #d0e5f5 !important; padding-top:0.4em; }

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;