Bearbeiten von „Hilfe:Eigene Stylesheets“

'''&larr; [[Hilfe:Inhalt]]'''

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 [http://www.w3.org/TR/REC-CSS2/selector.html] der HTML-Elementen werden Cascading Style Sheets (CSS) und JavaScript (JS) im HTML-Code eingesetzt.

==Cascading style sheets (CSS)==
Die voreingestellten Style Sheets findet man an folgenden Orten:

* '''Monobook:''' http://www.memory-alpha.org/de/style/monobook/main.css und [[MediaWiki:Monobook.css]]
* '''Classic (Standard):''' http://www.memory-alpha.org/de/style/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 [[Memory Alpha:Administratoren|Administratoren]] dürfen die oben angegebenen Seiten bearbeiten. Normale Benutzer können ihr eigenes Stylesheet auf folgenden Seiten anlegen:

* '''Monobook:''' <nowiki>http://www.memory-alpha.org/de/index.php/Benutzer:BENUTZERNAME/monobook.css</nowiki>
* '''Classic (Standard):''' <nowiki>http://www.memory-alpha.org/de/index.php/Benutzer:BENUTZERNAME/standard.css</nowiki>
* '''Cologne Blue:''' <nowiki>http://www.memory-alpha.org/de/index.php/Benutzer:BENUTZERNAME/cologneblue.css</nowiki>
* '''Nostalgia:''' <nowiki>http://www.memory-alpha.org/de/index.php/Benutzer:BENUTZERNAME/nostalgia.css</nowiki>

===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 nru 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:''' <nowiki>http://www.memory-alpha.org/de/index.php/Benutzer:BENUTZERNAME/monobook.js</nowiki>
* '''Standard:''' <nowiki>http://www.memory-alpha.org/de/index.php/Benutzer:BENUTZERNAME/standard.js</nowiki>
* '''Cologne Blue:''' <nowiki>http://www.memory-alpha.org/de/index.php/Benutzer:BENUTZERNAME/cologneblue.js</nowiki>
* '''Nostalgia:''' <nowiki>http://www.memory-alpha.org/de/index.php/Benutzer:BENUTZERNAME/nostalgia.js</nowiki>

===Beispiele===
Man kann ein Set von gespiegelten Reitern am unteren Rand der #content Sektion hinzufügen:

* http://meta.wikimedia.org/wiki/User_Styles/bottom_tabs

Man kann die Kurzwahltasten verändern wenn man einige Elemente im "ta" Array verändert (siehe [http://www.memory-alpha.org/de/index.php?title=-&action=raw&gen=js]). Zum Beispiel:

     ta['ca-nstab-main'] = new Array('c','Betrachte Artikelinhalt');

==Siehe auch==
* [[Hilfe:Benutzereinstellungen]]
* [http://meta.wikimedia.org/wiki/Help:User_style Meta-Wikipedia: User styles help] - More examples here.
* [http://meta.wikimedia.org/wiki/Gallery_of_user_styles Meta-Wikipedia: Gallery of user styles] - Even more examples!