Handbuch:Erweiterung/FlexiSkin

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

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.

Was ist

Where to find 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?

The FlexiSkin settings can be adjusted on the page Special:FlexiSkin (- watch the spelling as the wiki is case-sensitive).

Logo und Favicon

Logo

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 anpassen

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

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.

Laden Sie zuerst ihr Logo ins Wiki hoch.

Hinweis: Die maximale Größe für das Logo ist 300 x 64 pixels. Wenn Sie ein größeres Bild hochladen, wird es abgeschnitten.

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.
   
   Datei:Manual:logo-upload-dialog.png

   Upload area
   
   
2. Klicken Sie Preview.
   
   Datei:Manual:logo-preview-button.png

   Preview logo
   
   
3. Überprüfen Sie die Vorschau des Logos.
   
   Datei:Manual:logo-preview.png

   Logo in the topbar
   
   
4. Um ein anderes Logo hochzuladen, klicken Sie das x-Symbol im Hochladebereich und wiederholen Sie die vorhergehenden Schritte.
   
   Datei:Manual:logo-delete.png

   Delete logo
   
   
5. Speichern und aktivieren Sie das Logo oder nehmen Sie weitere Anpassungen vor.
   
   Datei:Manual:flexiskin buttons.png

   Save and activate skin changes
   
   
6. Klicken Sie OK. Die Änderungen werden für alle Benutzer unmittelbar gültig.

Tipps zum Umgang mit dem Logo

• Alignment: The logo is placed at the left side of the top bar without any padding or margin applied. The easiest way to make your logo fit: Put it on a 300 x 64 pixel canvas in an image editor and position the actual logo with the desired padding within that area. Then upload your logo.
• Adjusting placement and size: If you have a standard logo that you don't want to reposition on a canvas before uploading, simply upload your logo and add the following to the Free CSS area in FlexiSkin and save the page.

                    @media (min-width: 1001px) {
header nav.navbar {
    padding-left:0; /*add a padding to the left of your logo, e.g. change from 0 10px*/
 }
.bs-logo {
        width:300px; /*sets available logospace to the entire width of the main navigation*/
 }
.bs-logo a {
    background-size: auto 100%; /* width is set to automatically resize based on height. Set height to up to 90% */
 }
}

                

You can adjust the background size and left-padding as needed.

Hinweis: You first have to save the page to view the logo changes made in Free Css. The preview does not reflect these changes.

Favicon

You can also upload your own favicon. The favicon is the image that is shown in the browser tabs. Follow the steps for uploading a logo, just use the favicon upload area instead.

Datei:Manual:favicon upload area.png

Favicon upload

After saving the page, you will see your custom image in the browser tabs of your wiki pages.

Datei:Manual:favicon-custom.png

Custom favicon

Theming

Color presets

The fastest way to customize your wiki colors is to pick a color preset from the available themes. You can fine-tune each theme as needed if one or another color requires tweaking.

The available standard themes are shown here.

• theme-bluespice.png

  bluespice

• theme-turquoise.png

  turquoise

• theme-orange.png

  orange

• theme-crimson.png

  crimson

• theme-lime.png

  lime

• theme-turquoise-dark.png

  turquoise dark

• theme-sunflower-dark.png

  sunflower dark

Custom color scheme

Starting with a custom color scheme, you can further adjust individual skin colors to match your own color scheme.

To get started, click on the edit icon next to a color scheme. In my example, I want to have text and a neutral background in my navigation, so I pick "sunflower dark" and then edit it. But first, let's look at the color assignments.

Datei:Manual:customscheme-pick.png

Customizing a color scheme

Background color	Foreground (=text) color	User interface elements
Color 1	Color 1	left navigation, edit and create buttons with drop down menus, user profile menu
Color 2	Color 2	page tools / quality management tools
Color 3	Color 3	top bar (since there is no text in the top bar, the foreground color only sets the color of the toggle icons)
Color 4	Color 4	custom menuwith drop down menus
Body background	-	Page background. It is mainly visible when the navigation pane and the tools pane are minimized.

Datei:Manual:customscheme-bgcolors.png

Custom background color assignments

As an example, we make some color changes.

Datei:Manual:customscheme-example-settings.png

Custom color settings

This results in the following color scheme:

Datei:Manual:customscheme-example.png

Custom color scheme

Content

In the content settings, you can adjust styles related to the actual content area (2) of the wiki page:

Datei:Manual:bg-body-content.png

Body (1) and content (2) background

Hinweis: You first have to save the page to view the changes made to the content settings. The preview does not reflect these changes.

Colors

Background color	Foreground (=text) color	User interface elements
Content background		Page background. It is mainly visible when the navigation pane and the tools pane are minimized.
Content background	Content color	Color of the flowtext of the wiki page.
	Valid link	Link color that indicates that a linked page exists (standard link).
	Broken link	Link color that indicates that the linked page doesn't exist ("redlink") .
	Header 1-6	Color for the individual heading levels. Header 1: Page title Header 2: Heading, ToC heading Header 3: Sub-heading 1 Header 4: Sub-heading 2 Header 5: Sub-heading 3 Header 6: Sub-heading 4
	Color 4	custom menuwith drop down menus

Font

You can also change the font settings for the wiki pages. These settings only apply to the text in the content area. The text in other areas, such as the navigation and the tools panels or the top menus, is not affected.

Layout

You can also change the width of the content area, if you want to. Just make sure to test it on many devices to make sure that it works as intended, since wiki users work with different display settings. Unless you have a specific reason to change the content width, there is no need to make adjustments to this setting.

Headings

For all heading levels, you can adjust color, font size and underlining of the different heading levels. You can also change the unit type for your font-settings (e.g, px instead of rem). If you are not familiar with the differences between the unit types, simply leave the default setting of rem.

Free CSS

For additional adjustments that are not possible with the FlexiSkin settings, you can use the Free CSS field if you are familiar with CSS. We already looked at how you can adjust your logo size and position with CSS.

Here, we look at two more examples: Adjusting the margin around headings and using an external font.

Hinweis: You first have to save the page to view the logo changes made in Free Css. The preview does not reflect these changes.

Example1 : Increase margin of main heading

To add some extra space before the main headings, add this code to the Free CSS field:

                    /* add bigger margin before main heading */
#content h2 {
    margin-top: 3rem; /*adjust as needed*/
}

                

Example 2: Use external font (Google font)

If you prefer to use a different font, you can also add this to Free CSS. Make sure that these lines are added at the beginning of the CSS.

There are two steps necessary. First, you need to import the fonts. Here we use the Google fonts Roboto and Lato. Then you need to define which skin elements should use which font. You can define them separately for the content area and the navigation panel. To achieve this, copy the following code to the top of Free CSS:

                    /*Only import the fonts you want to use*/
@import url(https://fonts.googleapis.com/css?family=Roboto:400,700);
@import url(https://fonts.googleapis.com/css?family=Lato:400,700);

/*Use fonts - they have to be defined with @import at the beginning of this CSS*/
body.mediawiki, body.mediawiki.x-body, #content #bodyContent , #firstHeading, #content #firstHeading 
{font-family: 'Roboto',"arial",sans-serif;} /*Content and top menus*/
.panel .list-group a.list-group-item span, .bs-panel .list-group a.list-group-item span, #bs-globalactions a.list-group-item span 
{font-family: 'Roboto',"arial",sans-serif;} /*Main navigation*/