Handbuch:Erweiterung/FlexiSkin

Mit FlexiSkin können sie Ihr Wiki-Design (z.B. Logo, Farben, Schriftarten) in Minutenschnelle anpassen.

Wo finde ich FlexiSkin?

Die FlexiSkin-Einstellungen können Sie über die Seite Spezial:FlexiSkin erreichen (- beachten Sie die Rechtschreibung, da das Wiki zwischen Groß-und Kleinschreibung unterscheidet).

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.

• Header colors (3): Farbeinstellungen für die Kopfleiste. Diese Farben beeinflussen auch die ausklappbaren Megamenüs.
• Sidebar colors (4): Farbeinstellungen für die Hauptnavigation und die Seitenwerkzeuge.
• Footer colors (5): Farbeinstellungen für die Fußleiste.

Es gibt folgende Auswahlmöglichkeiten:

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

  

  Farbpicker

• Stift-Symbol: Über einen Farbmischer können zusätzliche Farben ausgewählt werden.
• Manuelle Eingabe: Für die Eingabe z.B Ihrer CI-Farben können Sie einen Farbwert in Hex-Format direkt eingeben.

Standardfarben des "Discovery"-Skin

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

Custom color scheme

Klicken Sie zunächst auf das Bearbeitungssymbol neben einem Farbschema. In meinem Beispiel möchte ich Text und einen neutralen Hintergrund in meiner Navigation haben, also wähle ich "Sonnenblume dunkel" und bearbeite ihn dann. Aber zuerst schauen wir uns die Farbzuweisungen an.

Datei:Handbuch:customscheme-pick.png

Customizing a color scheme

Background color	Foreground (=text) color	Elemente der Benutzeroberfläche
Color 1	Color 1	Linke Navigationsleiste, Schaltflächen "bearbeiten" und "erstellen" mit Dropdown-Menüs im Topmenü , Benutzerprofil-Menü
Color 2	Color 2	Seitenwerkzeuge, Werkzeuge zum Qualitätsmanagement
Color 3	Color 3	Kopfleiste (da hier kein Text existiert, werden nur die Umschalter eingefärbt)
Color 4	Color 4	Topmenü mit Untermenüs
Body background	-	Sseitenhintergrund. Dieser ist hauptsächlich in der Fußleiste sichtbar und wenn die Navigations- und Werkzeugleisten eingeklappt sind

Datei:Handbuch:customscheme-bgcolors.png

Hintergrundfarben

Als Beispiel ändern wir nun die Hauptfarben des Wiki-Layouts:

Datei:Handbuch:customscheme-example-settings.png

Angepasstes Farbschema

Das Resultat sieht so aus:

Datei:Handbuch:customscheme-example.png

Angepasstes Farbschema

Content

Unter Content können Sie Stile anpassen, die sich auf den tatsächlichen Inhaltsbereich (2) der Wiki-Seite beziehen:

Datei:Handbuch:bg-body-content.png

Body (1) und Content (2) Hintergrundfarben

Vorlage:Box Note

Colors

Background color	Foreground (=text) color	User interface elements
Content background		Seitenhintergrund. Dieser ist hauptsächlich in der Fußleiste sichtbar und wenn die Navigations- und Werkzeugleisten eingeklappt sind.
Content background	Content color	Farbe des Fließtexts im Inhaltsbereich.
	Valid link	Farbe von Standardlinks.
	Broken link	Farbe von Links zu Seiten und Dateien, die nicht existieren ("Redlinks").
	Header 1-6	Farbe für die individuellen Überschriftsebenenen: (1) Header 1: Seitentitel (z.B. bei Portalseiten) (2) Header 2: Überschrift, Überschrift des Inhaltsverzeichnisses (3) Header 3: Unterüberschrift 1 (4) Header 4: Unterüberschrift 2 (5) Header 5: Unterüberschrift 3 (6) Header 6: Unterüberschrift 4 (7) FirstHeading: Automatisch angezeigter Seitentitel im Titelbereich (nur über Free CSS anpassbar)
	Color 4	Topmenü mit Untermenüs

Datei:Handbuch:headings.png

Überschriften

Font

Sie können auch die Schriftart für die Wiki-Seiten ändern. Diese Einstellungen gelten nur für den Text im Inhaltsbereich. Der Text in anderen Bereichen, wie z. B. in den Navigations- und Werkzeugleisten oder in den oberen Menüs, ist nicht betroffen.

Layout

Sie können auch die Breite des Inhaltsbereichs ändern. Testen Sie es einfach auf vielen Geräten, um sicherzustellen, dass es 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.

Headings

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.

Free CSS

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. Wir haben bereits gesehen, wie Sie Ihre Logo Position mit CSS anpassen können.

Beispiel: Farbe des Seitentitels ändern

Um die Farbe des automatisch generierten Seitentitels zu ändern, können Sie folgenden Code in das Feld Free CSS kopieren:

/* Farbe für Seitentitel ändern*/
#content #firstHeading {
    color: #3f51b5;
}

Weiterführende Links

• Referenz:FlexiSkin

Technische Referenz: FlexiSkin

---

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