Entertainment
 

Hilfe:CSS

Aus Lostpedia

 

Dieser Artikel wird direkt aus der Wikia-Hilfe eingebunden. Änderungsvorschläge bitte hier.
Hilfe    Übersicht · Tutorial · Index 
Hilfe

Diese Seite erklärt, wie man den Monaco-Skin nach seinen Wünschen anpassen kann. Ein kurze Übersicht über die neuen Funktionen findest du auf der Seite Hilfe:Monaco-Skin. Vielleicht interessieren dich auch die Beispiele angepasster Monaco-Skins.

Inhaltsverzeichnis

[Bearbeiten] Benutze ein eigenes Logo

Standard-Logo

Neu erstellte Wikis bekommen standardmäßig das rechts eingeblendete Logo. Ein eigenes Logo gibt deinem Wiki ein unverwechselbares Aussehen - und kreativer ist es allemal. Um ein Logo zu erstellen und hochzuladen:

  1. Erstelle dein Logo mit einem beliebigen Grafikprogramm und stelle sicher, dass...
    • die Größe 135x155 Pixel beträgt,
    • das Logo als eine .png-Datei abgespeichert wird (du kannst auch Transparenz im Logo verwenden).
  2. Lade das Logo unter dem Namen Bild:Wiki.png in dein Wiki hoch.

Weitere Informationen findest du auf der Seite Hilfe:Logo.

[Bearbeiten] Passe die Navigation an

Der Monaco-Skin von Wikia hat eine robuste Navigation, die komplett angepasst werden kann. Die Navigation ist in zwei Bereiche aufgeteilt: Die Hauptnavigation, die mehrere hierarchische Ebenen umfasst und den zweispaltigen Werkzeuge-Bereich.

  • Für Administratoren: Du kannst die Standard-Navigation für alle Besucher durch das Ändern von ein paar Artikeln im MediaWiki-Namensraum anpassen.
  • Für Nutzer: Du kannst für dich selbst eine angepasste Navigation erzeugen indem du einige Seiten Unterseiten in deinem Benutzernamensraum bearbeitest.

[Bearbeiten] Hauptnavigation

  • Administratoren: Um das Hauptnavigationsmenü unter dem Suchfeld anzupassen, bearbeite die MediaWiki-Systemnachricht MediaWiki:Monaco-sidebar. Solange du keine eigenen Inhalte dort einstellst, werden automatisch die Standard-Inhalte aus dem Messaging-Wiki genutzt: http://messaging.wikia.com/wiki/MediaWiki:Monaco-sidebar/de (diese Standard-Seite kann nur durch Wikia-Mitarbeiter geändert werden).
  • Benutzer: Um das Hauptnavigationsmenü unter dem Suchfeld anzupassen, bearbeite einfach die Seite Benutzer:<dein_benutzername>/Monaco-sidebar (Special:Mypage/Monaco-sidebar) und erstelle dir eine eigene Hauptnavigation.


Jeder Stern steht für eine Ebene in der Menühierarchie. Im folgenden Beispiel werden die drei Einträge „Superhelden-Wiki“, „Personen“ und „Comics“ auf der obersten Ebene angezeigt.
Bewegt man die Maus über den „Personen“-Eintrag, wird die zweite Ebene des Menüs eingeblendet: „Helden“ und „Schurken“. Die Artikel über Superman, Batman und Spiderman sind wiederum im Untermenü „Helden“ zu finden.
Die Menü-Eintrag linken automatisch zu den gleichnamigen Artikeln. Falls du einen anderen Text für den Menü-Eintrag verwenden willst, gib zuerst den Artikelnamen an, dann ein Pipe-Symbol (|) und dann den gewünschten Text. Du kannst auch MediaWiki-Systemnachrichten verwenden (siehe die Seite Spezial:MediaWiki-Systemnachrichten). 
     * Hauptseite | Superhelden-Wiki
     * #popular# | Ausgewählte Artikel   (siehe folgenden Abschnitt "Zauberwörter")
     * Kategorie:Personen | Personen
     ** Kategorie:Helden | Helden
     *** Superman
     *** Batman
     *** Spiderman
     ** Kategorie:Schurken | Schurken
     *** Lex Luthor
     *** Pinguin
     * Kategorie:Comics | Comics
     ** DC Comics
     ** Marvel Comics
     * #category-Nebendarsteller#   (siehe folgenden Abschnitt „Zauberwörter“)
Hauptnavigation - Zauberwörter
Zusätzlich haben wir einige „Zauberwörter“ erstellt, die du in der Hauptnavigation verwenden kannst. Diese Zauberwörter sind im Einzelnen:
  • #category1# = Erstellt einen Menü-Eintrag mit mehreren Ebenen der den Namen der Kategorie mit den meisten Artikeln anzeigt, zu den 7 am häufigsten aufgerufenen Seiten verlinkt und einen "mehr ..."-Link zur Kategorie-Seite enthält.
  • #category2# = Genau wie oben, aber für die zweitgrößte Kategorie.
  • #category-<Kategoriename_eintragen># = Du kannst auf diese Weise eine bestimmte Kategorie auswählen (zum Beispiel #category-Nebendarsteller#).
  • #popular# = Hier kannst du eine Liste von ausgesuchten Artikeln angeben, die du besonders empfehlenswert findest. Administratoren können Artikel auf der Seite MediaWiki:Most popular articles hinzufügen. Wenn auf dieser Seite keine (oder weniger als 7) Einträge sind, wird der Rest automatisch mit den Artikel aufgefüllt, die in jeweiligen Wiki die höchsten Aufrufzahlen haben.
  • #visited# = Eine Liste der Artikel mit den höchsten Aufrufzahlen im Wiki.
  • #voted# = Eine Liste der am besten bewertesten Artikel (mit der Stern-Funktion)
  • #newlychanged# = Artikel, die als letztes geändert wurden.
  • #topusers# = Eine Liste von ausgesuchten Benutzern.
Hinweis: Bei den Zauberwörtern #category1# und #category2# werden eine Reihe von Kategorien ausgeblendet, falls sie bestimmte Schlüsselwörter enthalten. Dazu gehören unter anderem: Image/images, Stub/stubs, Screenshot/screenshots, Screencap/screencaps, Article/articles, Copy edit, Fair use, File/files, Panel/panels, Redirect/redirects, Template/templates, Delete/deletion und TagSynced. Wir versuchen diese Wörter so gut es geht auch in anderen Sprachen herauszufiltern, so dass diese Funktionalität möglichst relevante Kategorien auswählt. Falls du eine bestimmte Kategorie mit einem dieser Schlüsselworte in die Hauptnavigation einfügen möchtest, dann benutze dazu #category-<Kategoriename_eintragen># und ersetzte "<Kategoriename_eintragen>" mit dem entsprechenden Namen der Kategorie.
Falls du eine Kategorie mit einem Leerzeichen im Namen aufrufen willst (z.B. „Wikia Widgets“) dann ersetzte das Leerzeichen durch einen Unterstrich (im Beispiel #category-Wikia_Widgets#).

[Bearbeiten] Werkzeuge-Bereich

  • Administratoren: Um den Werkzeuge-Bereich unterhalb der Hauptnavigation anzupassen, bearbeite die Seite MediaWiki:Monaco-toolbox in deinem Wiki.
  • Benutzer: Um den Werkzeuge-bereich unterhalb der Hauptnavigation anzupassen, bearbeite die Seite Benutzer:<dein_benutzername>/Monaco-toolbox (Special:Mypage/Monaco-toolbox) und verlinke deine eigenen Lieblingswerkzeuge.


Bis du in deinem Wiki eigene Einträge vornimmst, benutzen wir die Standard-Einstellungen von dieser Seite im Messaging-Wiki: http://messaging.wikia.com/wiki/MediaWiki:Monaco-toolbox/de (diese Standard-Seite kann nur durch Wikia-Mitarbeiter geändert werden).

Die Liste der Links wird automatisch in zwei Spalten aufgeteilt. Die Link-Formatierung erfolgt genau wie in der Hauptnavigation. 
     * randompage-url|Zufällige Seite
     * upload-url|Hochladen
     * whatlinkshere|Verweise
     * recentchanges-url|Zuletzt geändert
     * specialpages-url|Spezialseiten
     * helppage|Hilfe
Zusätzlich fügen wir auf Benutzer-Seiten, Benutzerdiskussions-Seiten und Benutzerprofil-Seiten automatisch 3 zusätzliche Links hinzu. Diese lauten Benutzerbeiträge, E-Mail an diesen Benutzer und Benutzer sperren wobei der letzte Link nur Admins angezeigt wird.

[Bearbeiten] Passe die Farben an

[Bearbeiten] Vordefinierte Farbanpassungen

Wir haben einige vordefinierten Möglichkeiten zur Anpassung des Farbschema für Monaco erstellt. Jeder kann in seinen Einstellungen auf den „Skin“-Reiter klicken und eines der vorgefertigten Farbschemata auswählen. Zusätzlich können Admins bestimmen, welches davon standardmäßig allen Nutzern angezeigt werden soll. Dies kann am unteren Ende der entsprechenden Seite in den „Admin-Optionen“ eingestellt werden (dieser Bereich wird nur eingeblendet, wenn du Admin im jeweiligen Wiki bist).

[Bearbeiten] Eigene Farbanpassungen

Um den Nutzern als Standard ein eigenes Farbschema anzuzeigen, wähle in den Admin-Optionen "Angepasst" und füge zur Seite MediaWiki:Monaco.css deine eigenen CSS-Befehle hinzu. Die einfachste Möglichkeit eine Farbanpassung vorzunehmen ist es, eine neue Farbe für die „color1“ und „color2“ Klassen zu definieren. Alleine durch die Änderung dieser zwei Klassen, bekommt dein Wiki einen eigenen Stil. 

.color1, .color1 a {
   background-color: Green;
   color:            White;
}

.color2 {
   background-color: PapayaWhip;
}


Ein Leitfaden zur kompletten CSS-Anpassung findet sich im Folgenden.

[Bearbeiten] Leitfaden zur kompletten CSS-Anpassung

Die Bearbeitung der Klassen „color1“ und „color2“ (wie oben beschrieben) ist der beste Start einer eigenen Anpassung. Dieser Leitfaden hilft dir bei der weiteren Anpassung deines Wikis. Die folgenden Elemente können auf der Seite MediaWiki:Monaco.css hinzugefügt werden.

Falls du ein Administrator bist, der den Monaco-Skin anpassen möchte, aber die Änderungen nicht direkt sichtbar sein sollen, gibt es zwei Möglichkeiten:

Änderungen an MediaWiki:Monaco.css werden Besuchern nicht angezeigt, bis das Standard-Farbschema auf Angepasst gesetzt wird. Lasse in beiden Fällen die Voreinstellung auf einem vorgegebenen Farbschema bis das angepasste Farbschema fertig ist.

[Bearbeiten] Allgemeine Anpassungen, die sich auf die gesamte Oberfläche auswirken

[Bearbeiten] Linkfarben ändern 

a:link { color : #ffffff } (Ändert die Farbe des normalen unbesuchten Links) 

a:visited { color : #ffffff } (Ändert die Farbe des bereits besuchten Links) 

a:hover { color : #ffffff } (Ändert die Farbe des Links, während man mit dem Mauszeiger darüberfährt)

a.new:link { color:#ffffff !important; } (Ändert die Farbe des nicht erstellten unbesuchten Links)

a.new:visited { color:#ffffff !important; } (Ändert die Farbe des nicht erstellen besuchten Links)

a.new:hover { color:#ffffff !important; } (Ändert die Farbe des nicht erstellten Links, während man mit dem Mauszeiger darüberfährt)

[Bearbeiten] Anpassung des Kopfbereichs

Im Kopfbereich des Monaco-Skins gibt es verschiedene Elemente. Dieser Abschnitt hilft dir bei der Anpassung des Kopfbereichs, des Wikia-Logos, der Menü-Knöpfe und des Widget-Cockpits.

[Bearbeiten] Hintergrund des Kopfbereichs

Der Stil des Kopfbereichs wird hauptsächlich durch die Klasse „color2“ bestimmt. 

#wikia_header {
   background-color: Red;
   border-color:     Black;
}

Bild:Monaco_wikia_logo_template.png

Dateiname: Media:Monaco_wikia_logo_template.psd
Größe: 64Kb

[Bearbeiten] Wikia-Logo

Um die Farbe des Wikia-Logos anzupassen, musst du die Vorlage für das Monaco-Wikia-Logo herunterladen, die Farbe anpassen und die neu erstellte Datei in deinem Wiki hochladen.

Einige farblich angepasst Kopfbereiche kannst du auf der Seite Hilfe:Anpassung des Monaco-Skins/Kopfbereich-Farben anschauen. 

#wikia_logo {
   background-image: url(URL_ZU_DEINEM_BILD);
}
* html #wikia_logo {
   background-image: none;
   filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='URL_ZU_DEINEM_BILD', sizingMethod='crop');
}


Bild:Monaco_header_button_template.png

Dateiname: Datei:Monaco header button template.psd
Größe: 52Kb

[Bearbeiten] Menü-Knöpfe des Kopfbereichs

Wie auch das Wikia-Logo bestehen die Menü-Knöpfe des Kopfbereichs aus Grafiken, die du mit einem Bildverarbeitungsprogramm anpassen kannst. 

.headerMenuButton dt, .headerMenuButton dd {
   background-image: url(URL_ZU_DEINEM_BILD);
}
* html .headerMenuButton dt, * html .headerMenuButton dd  {
   background-image: none;
   filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='URL_ZU_DEINEM_BILD', sizingMethod='crop');
}


[Bearbeiten] Menüs im Kopfbereich

Die Menüs im Kopfbereich weisen eine sehr geringe Transparenz auf. Die Transparenz-Eigenschaften sind im folgenden Code-Beispiel enthalten. Der Style der Menüs im Kopfbereich wird hauptsächlich durch die Klasse „color1“ bestimmt. 

.headerMenu, .headerMenu a {
   background-color: red;
   color:            White;
   -moz-opacity:     .95;
   opacity:          .95;
}

[Bearbeiten] Widget-Cockpit 

#widget_cockpit {
   background-color: red;
}

[Bearbeiten] Logo-Bereich

Der Logo-Bereich ist der breite Streifen, der das Wiki-Logo enthält (direkt unter dem Kopfbereich). 

#background_strip {
   background-color: red;
}

Der Logo-Bereich enthält zwei div-Bereiche die für zusätzliche Akzentgrafiken benutzt werden können. Die div-Bereiche sind bereits absolut zum Logo-Bereich positioniert, so dass du nur eine Bilddatei, Höhe, Breite und eine Positionierung angeben musst. 

#accent_graphic1 {
   background-image: url(URL_ZU_DEINEM_BILD);
   height: 155px;
   width: 300px;
}

#accent_graphic2 {
   background-image: url(URL_ZU_DEINEM_BILD);
   height: 155px;
   width: 1000px;
   top: 20px;
   right: 20px;
}

[Bearbeiten] Anpassung der Widgets

Alle Widgets setzten auf der Klasse „widget“ auf. Eine Änderung dieser Klasse wirkt sich auf alle Widgets aus. 

.widget {
   background-color: red;
}

[Bearbeiten] Widget-Titel

Der Kopfbereich des Widget-Styles wird hauptsächlich durch die Klasse „color1“ definiert. 

.widget dt {
   background-color: red;
}

[Bearbeiten] Suchfeld

Eine leichte Schattierung wird automatisch zur gewählten Hintergrund-Farbe hinzugefügt. Um das Schattieren zu verhindern, setzte background-image: none. Der Style des Suchfelds wird hauptsächlich durch die Klasse „color1“ bestimmt. 

#search_box {
   background-color: red;
}

Bild:Monaco_search_button_template.png

Dateiname: Datei:Monaco search button template.psd
Größe: 60Kb

Der Text im Suchfeld lautet per Default „{{SITENAME}} durchsuchen“ - du kannst ihn über die Systemnachricht MediaWiki:Tooltip-search anpassen.

[Bearbeiten] Suchknopf

Wie auch das Wikia-Logo und die Menü-Knöpfe des Kopfbereichs ist der Suchknopf eine Grafik, die mit einem Bildverarbeitungsprogramm angepasst werden kann. 

#search_button {
   background-image: url(URL_ZU_DEINEM_BILD);
}
* html #search_button {
   background-image: none;
   filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='URL_ZU_DEINEM_BILD', sizingMethod='crop');
}



[Bearbeiten] Navigation

Falls du eine Farbe für die Einträge in der Hauptnavigation benutzen möchstest, die von der Hintergrundfarbe der Widgets unabhängig ist, benutze den folgenden Selector. 

#navigation a {
   background-color: red;
}

Verwende dieses Selektor um die „Schwebe-Farbe“ der Navigation festzulegen. 

#navigation a:hover, .navigation-hover {
   background-color: red;
}

[Bearbeiten] Werkzeuge-Box

Die Werkzeuge-Box befindet direkt unter der Hauptnavigation im ersten Widget. 

#link_box {
   background-color: red;
}

[Bearbeiten] Anpassung des Artikel-Bereichs

[Bearbeiten] Bedienleiste

Die Bedienleiste enthält die Seite/Diskussion-Reiter sowie die Aktivitäten für die Seite (Bearbeiten, Versionen, etc.) Der jeweiligen Hintergrundfarbe wird eine leichte Schattierung hinzugefügt. Um dieses Schattierung zu entfernen, setze background-image: none. Der Stil der Bedienleiste wir hauptsächlich durch die Klasse „color1“ bestimmt. 

#page_bar {
   background-color: red;
}

#page_controls a {
   color:            White !important;
}

[Bearbeiten] Seiten-Reiter

Die Seiten-Reiter sind in den meisten Fällen die Seite- und Diskussion-Reiter in der Bedienleiste. Der zweite Selektor setzt die Farbe des momentan ausgewählten Reiters. 

#page_tabs li {
   background-color: red;
}

#page_tabs li.selected {
   background-color: White;
}

Es bietet sich an, die Hintergrundfarbe des gewählten Reiters auf die Hintergrundfarbe des Artikels zu setzten.

[Bearbeiten] Artikel 

#wikia_page {
   background-color: red;
}
[Bearbeiten] Farbe des Textes im Artikel-Bereich

Wird in der zweiten Zeile angefügt, um die Farbe des Textes zu ändern, color: White; färbt den Text weiß. 

.color2 {
   color: White;
}

[Bearbeiten] Anpassung der Startseite und des Mastheads (Navigationsleiste auf Benutzerseiten)

Die Startseite und der Seitenkopf für Benutzerseiten benutzen einige neue Farbklassen.

  • Accent definiert die Hintergrundfarbe im Seitenkopf. 
.accent {
 background-color: White;
}
  • User_masthead h2 definiert die Textfarbe im Benutzer-Seitenkopf. 
#user_masthead h2 {
 color: black;
}
  • Dark_text_1 definiert die Farbe, in der der Bearbeitungszähler in der oberen rechten Ecke des Benutzer-Seitenkopfs angezeigt wird. 
.dark_text_1 {
 color: Firebrick;
}
  • Dark_text_2 definiert die Farbe für die Überschriften auf der Startseite. 
.dark_text_2 {
 color: #006400;
}

[Bearbeiten] Reiter

  • Die Hintergrundfarbe von inaktiven Reitern wird mit color2 gesetzt. Die Farbe für den Text wird mit #user_masthead li a für inaktive Reiter und mit #user_masthead li.selected a für aktive Reiter definiert. 
/* Textfarbe inaktiver Reiter */
 #user_masthead li a {
  color: #000000;
 }

 /* Textfarbe aktiver Reiter */
 #user_masthead li.selected a {
  color: #ffffff;
 }

[Bearbeiten] Testen der Anpassungen

Um die Anpassungen zu testen bevor sie für alle Nutzer als Standard eingestellt werden, benutze die useskin and usetheme CGI-Parameter in der URL am auf das Wiki zuzugreifen. So kann zum Beispiel das angepasst Monaco-Farbschema im WoWWiki durch die URL 

 http://www.wowwiki.com/index.php?title=Main_Page&useskin=monaco&usetheme=custommay

aufgerufen werden, unabhängig von deinem persönlichen Skin und der Farbschema-Wahl des Standard-Skins.

Von „http://de.lostpedia.wikia.com/wiki/Hilfe:CSS“