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 Nova 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: MediaWiki:Monobook.css
• Vector (Standard): MediaWiki:Vector.css
• Timeless: MediaWiki:Timeless.css
• MinervaNeue: MediaWiki:Mobile.css

Nur Administratoren dürfen die oben angegebenen Seiten bearbeiten. Normale Benutzer können ihr eigenes Stylesheet auf folgenden Seiten anlegen:

• Monobook: Spezial:Meine Benutzerseite/monobook.css
• Vector (Standard): Spezial:Meine Benutzerseite/vector.css
• Timeless: Spezial:Meine Benutzerseite/timeless.css
• MinervaNeue: Spezial:Meine Benutzerseite/mobile.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 Nova-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: Spezial:Meine Benutzerseite/monobook.js
• Vector: Spezial:Meine Benutzerseite/vector.js
• Timeless: Spezial:Meine Benutzerseite/timeless.js
• MinervaNeue: Spezial:Meine Benutzerseite/mobile.js

Beispiele

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

• https://meta.m.wikimedia.org/wiki/Help:User_style/bottom_tabs

Siehe auch

• Hilfe:Benutzereinstellungen
• [2] - Beispiele.
• [3] - Mehr Beispiele!

Übersicht der Hilfe-Themen

Rund um den Account

Vorherige Seite

Benutzereinstellungen

Nächste Seite

Beobachtungsliste