Hilfe:Eigene Stylesheets
Bei allen MediaWiki Skins können Benutzer eigene Modifikationen an dem Aussehen von Memory Alpha anbringen (zum Beispiel unterschiedliche Schriften, Farben oder Linkpositionen). Für die Referenzierung auf Selektoren [1] der HTML-Elementen werden Cascading Style Sheets (CSS) und JavaScript (JS) im HTML-Code eingesetzt.
Inhaltsverzeichnis
Cascading style sheets (CSS)
Die voreingestellten Style Sheets findet man an folgenden Orten:
- Monobook: http://www.memory-alpha.org/de/skins3/monobook/main.css und MediaWiki:Monobook.css
- Classic (Standard): http://www.memory-alpha.org/de/skins3/common/wikistandard.css und MediaWiki:Standard.css
- Cologne Blue: http://www.memory-alpha.org/de/style/cologneblue.css und MediaWiki:Cologneblue.css
- Nostalgia: http://www.memory-alpha.org/de/style/nostalgia.css und MediaWiki:Nostalgia.css
Nur Administratoren dürfen die oben angegebenen Seiten bearbeiten. Normale Benutzer können ihr eigenes Stylesheet auf folgenden Seiten anlegen:
- Monobook: http://www.memory-alpha.org/de/index.php/Benutzer:BENUTZERNAME/monobook.css
- Classic (Standard): http://www.memory-alpha.org/de/index.php/Benutzer:BENUTZERNAME/standard.css
- Cologne Blue: http://www.memory-alpha.org/de/index.php/Benutzer:BENUTZERNAME/cologneblue.css
- Nostalgia: http://www.memory-alpha.org/de/index.php/Benutzer:BENUTZERNAME/nostalgia.css
Beispiele
Man kann die Hintergrundfarbe des Hauptbereichs verändern um sie dunkler zu machen und so einen höheren Kontrast zur hellen Schrift zu erzielen:
/* dunklere Hintergrundfarbe im Hauptbereich */
body {
background-image: url(/graphics/background_monobook.gif);
background-repeat: repeat;
background-color: #202020;
}
#content, #footer {
background-color: #202020;
color: #FFFFFF;
}
.pBody {
background-color: #202020;
color: #FFFFFF;
}
Man kann die Art der Links verändern, sodass sie nur unterstrichen sind, wenn man mit der Maus darüber fährt:
/* Links nur unterstrichen wenn die Maus darüber ist */
a { text-decoration: none; }
a:hover { text-decoration: underline; }
Man kann die Farbe von verschiedenen Unterarten der Links ändern, so zum Beispiel Links zu externen oder nicht vorhandenen Seiten:
/* ändere voreingestellte Linkfarbe */
a.new { color:#ff6633; }
a.stub { color: #772233; }
a.external, a.extiw { color:#999999; }
a.mailto { color: #FFCC00; }
#p-personal { color: #00CCFF !important; }
Man kann das "Person" Icon neben dem Benutzernamen ausblenden:
/* unterdrücke das Person Icon neben dem Benutzernamen */
li#pt-userpage { background: none }
Man kann das Memory Alpha-Logo verstecken:
/* verwende kein Logo, stelle stattdessen den Kasten dorthin */
#p-logo { display: none }
#column-one { padding-top: 0; }
Wenn du einen Browser mit Gecko-Unterstützung verwendest, wie etwa Mozilla, Firebird/Firefox oder Camino, kannst du "runde Ecken" anzeigen lassen:
/* runde einige Ecke, nur für Gecko-Browser */
#p-cactions ul li, #p-cactions ul li a {
-moz-border-radius-topleft: 1em;
-moz-border-radius-topright: 1em;
}
#content {
-moz-border-radius-topleft: 1em;
-moz-border-radius-bottomleft: 1em;
}
div.pBody {
-moz-border-radius-topright: 1em;
-moz-border-radius-bottomright: 1em;
}
/* das selbe in CSS3-Spezifikation; gibt's Browser, die das unterstützen? */
#p-cactions ul li, #p-cactions ul li a {
border-radius-topleft: 1em;
border-radius-topright: 1em;
}
#content {
border-radius-topleft: 1em;
border-radius-bottomleft: 1em;
}
div.pBody {
border-radius-topright: 1em;
border-radius-bottomright: 1em;
}
Man kann spezifische Optimierungen an der Oberfläche anbringen, die nur auf gedrucken Seiten auftauchen:
/*
** Platziere alle Druck-spezifischen Regeln in einen @media print Block.
*/
/* spare Tinte und Papier mit sehr kleinen Schriftarten */
@media print {
#footer,
#content,
body { font-size: 8pt !important; }
h1 { font-size: 17pt }
h2 { font-size: 14pt }
h3 { font-size: 11pt }
h4 { font-size: 9pt }
h5 { font-size: 8pt }
h6 {
font-size: 8pt;
font-weight: normal;
}
}
/* Fortgeschrittene Sache: Man kann :before und :after verwenden um Formatierungen hinzuzufügen
Diese Regel fügt einen vollständigen href eines Links dahinter (wird nicht gebraucht
in der jetzigen Version): */
@media print {
#content a:link:after,
#content a:visited:after {
content: " <" attr(href) "> ";
}
}
JavaScript
Benutzer können auch angepasste JavaScripts in folgenden Seiten importieren und verwenden:
- Monobook: http://www.memory-alpha.org/de/index.php/Benutzer:BENUTZERNAME/monobook.js
- Standard: http://www.memory-alpha.org/de/index.php/Benutzer:BENUTZERNAME/standard.js
- Cologne Blue: http://www.memory-alpha.org/de/index.php/Benutzer:BENUTZERNAME/cologneblue.js
- Nostalgia: http://www.memory-alpha.org/de/index.php/Benutzer:BENUTZERNAME/nostalgia.js
Beispiele
Man kann ein Set von gespiegelten Reitern am unteren Rand der #content Sektion hinzufügen:
Man kann die Kurzwahltasten verändern wenn man einige Elemente im "ta" Array verändert (siehe [2]). Zum Beispiel:
ta['ca-nstab-main'] = new Array('c','Betrachte Artikelinhalt');
Siehe auch
- Hilfe:Benutzereinstellungen
- Meta-Wikipedia: User styles help - More examples here.
- Meta-Wikipedia: Gallery of user styles - Even more examples!
