Handbuch:Erweiterung/FlexiSkin

Zugriff

Die Spezialseite (Spezial:FlexiSkin<nowiki>) zum Anpassen der Benutzeroberfläche (Logo, Favicon, Farben und Schrifteinstellungen) erreichen Sie über das Menü:

(Globale Aktionen) > Verwaltung > Oberfläche

Zum Bearbeiten der Oberfläche benötigen Sie admin-Rechte im Wiki.

Link zu den "Einstellungen zur Benutzeroberfläche".

Wichtig!Wenn Sie die Anpassungen nach dem Speichern nicht sehen, müssen Sie Ihren Browers-Cache löschen (Strg+ F5).

Logo und Favicon

Logo

So ändern Sie das Logo:

1. Klicken Sie im Logo-Bereich auf Eine Datei auswählen um ein Logo über Ihren Datei-Explorer zu suchen oder ziehen Sie die Datei in den umrandeten Hochladebereich.
   
   

   Logo hochladen
   
   
2. Klicken Sie die Schaltfläche Vorschau und überprüfen Sie die Plazierung des Logos.
   
3. Klicken Sie die Schaltfläche Speichern & aktivieren. Das Logo ist nun für alle Benutzer sichtbar.
   

Um ein anderes Logo hochzuladen, klicken Sie das x-Symbol im Hochladebereich des Logos und wiederholen Sie die vorhergehenden Schritte.

Favicon

Das Favicon ist das Bild, das auf den Registerkarten des Browsers angezeigt wird. Befolgen Sie die Schritte zum Hochladen eines Logos. Verwenden Sie stattdessen einfach den Favicon-Upload-Bereich.

Layout-Farben

Die Farben der einzelnen Layout-Bereiche können hier angepasst werden.

Flexiskin Layout-Farben

• Header colors (3): Farbeinstellungen für die Kopfleiste. Diese Farben beeinflussen auch die ausklappbaren Megamenüs.
  

  Megamenü
• Sidebar colors (4): Farbeinstellungen für die Hauptnavigation und die Seitenwerkzeuge.
• Footer colors (5): Farbeinstellungen für die Fußleiste.
  

Es gibt folgende Möglichkeiten, eine Farbe auszuwählen:

• Standard-Farbpalette: Per Klick auf eine Farbvorschau kann eine Standardfarbe ausgewählt werden.
  

  Farbpicker
• Stift-Symbol: Per Klick auf das Stift-Symbol können über einen Farbmischer zusätzliche Farben ausgewählt werden.
• Manuelle Eingabe: Für die Eingabe zum Beispiel Ihrer CI-Farben können Sie einen Farbwert in Hex-Format direkt eingeben.

Wird eine Farbe gelöscht und FlexiSkin mit einem oder mehreren leeren Farbwerten gespeichert, so werden für die leeren Farbwerte die Standardfarben des Discovery-Skins als Werte gespeichert.

Standardfarben des "Discovery"-Skin

	Background	Foreground	Highlight
Header	#ffffff	#252525	#3e5389
Sidebar	#f1f3f9	#252525	#3e5389
Footer	#d3d3d3	#454545	-

Inhalt

Diese Einstellungen beziehen sich auf alle Stile des Inhaltsbereiches einer Wikiseite:

Farben

Hier können Sie die Hintergrundfarbe, Schriftfarbe, die Farbe der Links sowie die Farbe von gebrochenen Links anpassen. Gebrochene Links im Wiki werden standardmäßig rot dargestellt, damit Sie leicht zu erkennen sind. Sie sollten sich genau überlegen, ob Sie von dieser Konvention abweichen wollen. Sollten Sie besuchte Links anders als Standardlinks einfärben wollen, können Sie im Free CSS-Bereich folgende Einstellung einfügen:

#mw-content-text a:visited,[class^="mw-content-"] a:visited {color: #951b81;}

Schriftart

Die Einstellungen zur Schriftart gelten nur für den Text im Inhaltsbereich. Der Text in anderen Bereichen wie z. B. in den Navigations- und Werkzeugleisten oder in den Menüs ist nicht betroffen.

Layout

Wenn Sie die Layout-Breite ändern wollen, testen Sie es einfach auf vielen Geräten, um sicherzustellen, dass Ihre Einstellung wie vorgesehen funktioniert. Andere Wiki-Benutzer arbeiten mit unterschiedlichen Anzeigeeinstellungen und können durch diese Änderung negativ betroffen sein. Sofern Sie keinen bestimmten Grund haben, die Inhaltsbreite zu ändern, sollten Sie diese Einstellung nicht anpassen. Die Standard-Inhaltsbreite beträgt 61,25 rem.

Headers

Für alle Überschriftenebenen können Sie Farbe, Schriftgröße und Unterstreichung anpassen. Sie können auch die Einheit für die Schrifteinstellungen ändern (z. B. px anstelle von rem). Wenn Sie mit den Unterschieden zwischen diesen Einheiten nicht vertraut sind, belassen Sie einfach die Standardeinstellung rem. Diese orientiert sich an der übergeordneten Größeneinstellung im Wiki. Im Gegensatz dazu werden em-Größen im Verhältnis zum umschließenden Container.

Header-Ebenen

Free CSS

Hinweis:Wenn die gleichen Stile sowohl in FlexiSkin bzw. FlexiSkin Free CSS und in MediaWiki:Common.css definiert sind, werden die Stile von Common.css angewandt.

Für zusätzliche Anpassungen, die mit den FlexiSkin-Einstellungen nicht möglich sind, können Sie das Feld Free CSS verwenden, wenn Sie mit CSS vertraut sind.

Neutrale Werkzeugleiste (rechte Seitenleiste)

/*right sidebar*/
#sb-sec-cnt {background-color:#efefef; color:#252525;}
#sb-sec-cnt .card-header.menu-title {color:#747474;}

Beispiel Free CSS

Neutraler Kopfleistenhintergrund

Wenn Sie die Header-Highlight-Farbe festlegen, kann es vorkommen, dass die automatisch berechneten Werte für die Suchleiste sowie die Schaltflächen-Hover und -Hintergründe nicht Ihren Vorstellungen oder CI-Anforderungen entsprechen.

Flexiskin Standard-Highlights

In diesem Fall können Sie diese Werte nachträglich neutralisieren.

Neutrale Highlights

Fügen Sie folgendes Free CSS hinzu:

/*top bar neutral search box, button backgrounds and hovers */
#nb-pri form input, #nb-pri form button{border-color:#f1f3f3}
#nb-pri form input, #nb-pri form button,#sb-pri-tgl-btn, #sb-pri-tgl-btn:hover,.mws-dropdown-primary.dropdown-menu a:hover,a.ico-btn:hover, a#sb-sec-tgl-btn, #nb-pri form .bs-extendedsearch-searchbar-clear   {background:#f1f3f3}
.mws-button-primary:hover {background-color:#747474; color:#fff}
/*top bar neutral bottom border*/
#nb-pri {box-shadow: 0 0 4px 0 #747474}
.card.mega-menu {box-shadow: inset 0 2px 3px -2px #747474}
/*mega menu neutral bottom overlay*/
@media (min-width: 768px){.dropdown-menu.megamenu .mm-bg {background-color:#747474}}

Cascading Style Sheets. Eine Computersprache für die Gestaltung digitaler, vorwiegend webbasierter Dokumente.

Technische Referenz: FlexiSkin

---

Feedback zur Dokumentation ist im Community-Forum möglich.