Hilfe:Eigene Stylesheets

← 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 [1] 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 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:

• 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 [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!