Hauptmenü öffnen

Memory Alpha Nova β

Hilfe:Eigene Stylesheets

Version vom 30. März 2015, 15:29 Uhr von imported>ME47 (Navileiste ergänzt)

← 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:

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:

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

Abgerufen von „http://memory-alpha.wiki/mediawiki/index.php?title=Hilfe:Eigene_Stylesheets&oldid=683736“