Help:Eigene Stylesheets

From MozillaWiki
Jump to: navigation, search

Andere Sprachen: Englisch

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 hiesse 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 heisst 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; }

/* 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 - use this in addition to a:link and a:visited to distinguish an internal link from the "Special page" tab, which is not a link (see Help:Namespace#Tab_labels)
  • 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 }

Siehe auch