Handbuch:Erweiterung/FlexiSkin

Diese Erweiterung wurde bis Version 2.27 verwendet und ist kein Bestandteil von BlueSpice 3

Unterstützt in:BlueSpice pro Cloud„pro Cloud“ befindet sich nicht in der Liste (free, pro, all, Farm, Cloud) zulässiger Werte für das Attribut „BSSupportedversion“.

Mit FlexiSkin können Sie das Erscheinungsbild Ihres Wikis anpassen. Sie können das Design Ihres Wikis über eine spezielle Seite und mit einer Vorschaufunktion ändern. Fügen Sie einfach Ihr eigenes Logo und Favicon ein. Definieren Sie dann die Farben und Schriftarteinstellungen, mit denen Sie ein individuelles Erscheinungsbild erzielen möchten.

Wichtig! FlexiSkin ist nur in BlueSpice pro Cloud enthalten. Um das Logo in BlueSpice 3 anzupassen, folgen Sie den Schritten aus der Konfigurationsverwaltung.

Was ist

Wo finde ich FlexiSkin?

FlexiSkin erlaubt ihnen das Layout ihres Wikis zu ändern. Sie können das Design ihres Wikis mithilfe des Endes und er Vorschaufunktion ändern. Sie können zwischen verschiedenen Farben wählen, ihr eigenes logo einfügen und entscheiden ob sie die Navigation auf der linken oder rechten Seite haben wollen.

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). Die Benutzeroberfläche steht derzeit erst in Englisch zur Verfügung.

Logo und Favicon

Flexiskin ist eine spezielle Seite. Der häufigste Weg, den Flexiskin zu öffnen, ist der Klick auf "Skin" in der Admin-Navigation

Durch Klicken auf "Skin" gelangen Sie in den Dialog, in dem Sie einen neuen Skin hinzufügen können:

Geben Sie Titel und Beschreibung des neuen Skins ein. Sie können auch eine entsprechende Vorlage in der Dropdown-Liste auswählen und auf "Ok" klicken, um den neuen Skin zu erstellen

Skin anpassenLogo

So laden Sie ihr Wiki hoch:

1. Klicken Sie 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 Preview.
   
   

   Logovorschau
   
   
3. Überprüfen Sie die Vorschau des Logos.
   
   

   Logo in der Topleiste
   
   
4. Um ein anderes Logo hochzuladen, klicken Sie das x-Symbol im Hochladebereich und wiederholen Sie die vorhergehenden Schritte.
   
   

   Logo löschen
   
   
5. Speichern und aktivieren Sie das Logo oder nehmen Sie weitere Anpassungen vor.
   
   

   Skinänderungen aktivieren
   
   
6. Klicken Sie OK. Die Änderungen werden für alle Benutzer unmittelbar gültig.

Tipps zum Umgang mit dem Logo

Auf

• Ausrichtung: Das Logo wird auf der linken Seite

finden Sie die Bearbeitungsfunktionen auf der rechten Seite eine Vorschau. Vergessen Sie nicht, oben im Editorbereich auf die Schaltfläche "Speichern" zu klicken.

Achtung: Die Schaltfläche Reset setzt nur den zuletzt eingestellten Wert zurück.

Um den Skin-Editor zu schließen, klicken Sie auf "Schließen". Bitte bestätigen Sie das Popup, um den Editor wirklich zu schließen.

Skin-Änderungen

• in der Kopfleiste mit etwas Abstand zum linken Rand plaziert. Um den Abstand zu entfernen, geben Sie folgende css-Deklaration im Feld Free CSS ein:
  

                    .bs-logo a {
		background-position: 0 center;
	}

                

Hinweis: Änderungen in Free CSS werden erst nach dem Speichern sichtbar. Die Vorschau zeigt die ungespeicherten Änderungen nicht an.

Favicon

Sie können auch Ihr eigenes Favicon hochladen. 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.

Favicon hochladen

Nach dem Speichern der Seite sehen Sie Ihr Favicon in den Browser-Registerkarten Ihrer Wiki-Seiten.

Neues Favicon

Theming

Sie können auch ein Bild als Hintergrundbild einfügen. Laden Sie das Bild, das Sie im Hintergrund haben möchten, hoch und geben Sie an, ob Sie Wiederholungen wünschen (keine Wiederholung, horizontale, vertikale Wiederholung). Nachdem Sie das Bild hochgeladen haben, klicken Sie oben im Skin-Editor auf "Speichern".

Wählen Sie, ob die Navigation links oder rechts neben dem Inhalt erscheinen soll. Position bedeutet, dass Sie den Inhalt links, zentriert oder rechts im Browser anzeigen können. Sie können auch die gesamte Breite ändern. Standard für den Skin ist die Navigation auf der linken Seite, Inhalt in der Mitte und Breite 1000px.

Achtung: Der Logobereich in BlueSpice ist mit 276 x 60px definiert. Sie können das Logo auch in den Admin-Einstellungen ändern (in der Admin-Navigation auf "Einstellungen" klicken) und den Logo-Pfad im Untermenü "Flexiskin" eingeben.

Einen Skin löschen

Sie möchten einen Skin komplett löschen? Markieren Sie den Skin in der Übersicht und klicken Sie auf das Symbol "Entfernen". Bitte bestätigen Sie, dass Sie die Haut entfernen möchten. Oder Sie können das Symbol "löschen" verwenden. Bitte bestätigen Sie, dass Sie den Skin löschen möchten. 

Siehe auch

Unsere Referenz-Seite.

Color presets

Wählen Sie ein Thema aus, um Ihr Wiki schnell anzupassen. Sie können jedes Thema nach Bedarf optimieren, indem Soe die eine oder andere Farbe manuell ändern.

Die verfügbaren Standardthemen sind folgende:

• 

  bluespice

• 

  turquoise

• 

  orange

• 

  crimson

• 

  lime

• 

  turquoise dark

• 

  sunflower dark

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.

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

Hintergrundfarben

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

Angepasstes Farbschema

Das Resultat sieht so aus:

Angepasstes Farbschema

Content

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

Body (1) und Content (2) Hintergrundfarben

Hinweis: Alle Änderungen an Content-Einstellungen müssen zuerst gespeichert werden. Die Vorschau reflektiert ungespeicherte Einstellungen nicht.

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

Ü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.

Hinweis: Um Änderungen in Free CSS zu sehen, muss die Seite gespeichert werden. Die Vorschau reflektiert diese ungespeicherten Änderungen nicht.

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;
}

                

Verwandte Themen

• Referenz:FlexiSkin