Hilfe:Eigene Stylesheets

aus AtmWiki, dem Teleskop Selbstbau Wiki

Wechseln zu: Navigation, Suche

Themenportale  -  0-9 A B C D E F G H I J K L M N O P Q R S T U V W X Y Z  -  Kategorien

 

Hilfe für Benutzer
Hilfe für Autoren

Der AtmWiki 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.

Inhaltsverzeichnis

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

/* 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;  
}
#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;
Persönliche Werkzeuge

Google Translate