Quelltext der Seite Hilfe:Eigene Stylesheets


''Andere Sprachen: [[help:user style|Englisch]]''

MediaWiki erlaubt es Benutzern, eigene Stylesheets zu definieren. Dazu legt man unterhalb seiner Benutzerseite eine Seite mit dem Namen des in den [[Hilfe:Einstellungen|Einstellungen]] gewählten Stils an: Für Benutzer, die den Skin ''Monobook'' benutzen, hieße diese Seite dann zum Beispiel <tt><nowiki>[[Benutzer:Name/monobook.css]]</nowiki></tt>, für Benutzer des Skins ''Blue Cologne'' heißt die Datei <tt><nowiki>[[Benutzer:Name/cologneblue.css]]</nowiki></tt> (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 ===
<pre>
/* 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 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; }

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

=== Optimierung für Farbenblinde ===

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

===Gestaltung der deutschen Wikipedia-Hauptseite===
<pre>
 /* 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; }
</pre>

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

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

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

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

== 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 - <small>example</small>
*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 [[mw:Help:Configuration settings|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;

== Siehe auch ==
* [[Gallery of user styles]]