Hilfe:Eigene Stylesheets

← Hilfe:Inhalt

Anmeldung wird benötigt!
Du kannst die hier erläuterten Funktionen nur nutzen und verändern, wenn du angemeldet bist.

Dieser Artikel ist (teilweise) veraltet und muss deshalb überarbeitet werden.

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://de.memory-alpha.org/skins3/monobook/main.css und MediaWiki:Monobook.css
• Classic (Standard): http://de.memory-alpha.org/skins3/common/wikistandard.css und MediaWiki:Standard.css
• Cologne Blue: http://de.memory-alpha.org/style/cologneblue.css und MediaWiki:Cologneblue.css
• Nostalgia: http://de.memory-alpha.org/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://de.memory-alpha.org/index.php/Benutzer:BENUTZERNAME/monobook.css
• Classic (Standard): http://de.memory-alpha.org/index.php/Benutzer:BENUTZERNAME/standard.css
• Cologne Blue: http://de.memory-alpha.org/index.php/Benutzer:BENUTZERNAME/cologneblue.css
• Nostalgia: http://de.memory-alpha.org/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://de.memory-alpha.org/index.php/Benutzer:BENUTZERNAME/monobook.js
• Standard: http://de.memory-alpha.org/index.php/Benutzer:BENUTZERNAME/standard.js
• Cologne Blue: http://de.memory-alpha.org/index.php/Benutzer:BENUTZERNAME/cologneblue.js
• Nostalgia: http://de.memory-alpha.org/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!

Übersicht der Hilfe-Themen

Rund um den Account

Vorherige Seite

Benutzereinstellungen

Nächste Seite

Beobachtungsliste