3 Benutzeroberfläche anpassen

VisuellWikitext
(Die Seite wurde neu angelegt: „{{DISPLAYTITLE:FlexiSkin}} Mit '''FlexiSkin''' können sie Ihr Wiki-Design (z.B. Logo, Farben, Schriftarten) in Minutenschnelle anpassen. ==Wo finde ich Fle…“)
 
Keine Bearbeitungszusammenfassung
 
(22 dazwischenliegende Versionen desselben Benutzers werden nicht angezeigt)
Zeile 1: Zeile 1:
{{DISPLAYTITLE:FlexiSkin}}
{{DISPLAYTITLE:Einstellungen zur Benutzeroberfläche}}
<bookshelf book="Buch:Adminhandbuch" />
==Zugriff==


Mit '''FlexiSkin''' können sie Ihr Wiki-Design (z.B. Logo, Farben, Schriftarten) in Minutenschnelle anpassen.
Die Spezialseite (''Spezial:FlexiSkin''&lt;nowiki&gt;) zum Anpassen der Benutzeroberfläche (Logo, Favicon, Farben und Schrifteinstellungen) erreichen Sie über das Menü:


==Wo finde ich FlexiSkin?==
''{{Icon|bi bi-gear-fill|||middle}} (Globale Aktionen) > Verwaltung > Oberfläche''


Die FlexiSkin-Einstellungen können Sie über die Seite ''Spezial:FlexiSkin'' erreichen (- beachten Sie die Rechtschreibung, da das Wiki zwischen Groß-und Kleinschreibung unterscheidet).
Zum Bearbeiten der Oberfläche benötigen Sie ''admin''-Rechte im Wiki.
[[Datei:FlexiSkin link.png|alternativtext=Link zu den "Einstellungen zur Benutzeroberfläche".|zentriert|mini|650x650px|Link zu den "Einstellungen zur Benutzeroberfläche".]]{{Hinweisbox|boxtype=Wichtig|icon=|Note text=Wenn Sie die Anpassungen nach dem Speichern nicht sehen, müssen Sie Ihren Browers-Cache löschen (<code>Strg</code>+ <code>F5</code>).|bgcolor=}}


==Logo und Favicon==
==Logo und Favicon==
Zeile 12: Zeile 15:
'''So ändern Sie das Logo:'''   
'''So ändern Sie das Logo:'''   


#'''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.  <br />[[Datei:Handbuch:fs-logo hochladen.png|alternativtext=screenshot logo hochladen|zentriert|mini|200x200px|Logo hochladen]]<br />
#'''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.  <span /><span /><span /><span /><span /><span /><span /><span /><br />[[Datei:Handbuch:fs-logo hochladen.png|alternativtext=screenshot logo hochladen|zentriert|mini|200x200px|Logo hochladen]]<span /><span /><span /><span /><span /><span /><span /><span /><br />
#'''Klicken''' Sie die Schaltfläche ''Vorschau''.<br />
#'''Klicken''' Sie die Schaltfläche ''Vorschau'' und überprüfen Sie die Plazierung des Logos.<span /><span /><span /><span /><span /><span /><span /><span /><br />
#'''Überprüfen''' Sie die Vorschau des Logos. <br /><br />
#'''Klicken''' Sie die Schaltfläche ''Speichern & aktivieren.'' Das Logo ist nun für alle Benutzer sichtbar.<span /><span /><span /><span /><span /><span /><span /><span /><br />
#Um  '''ein anderes Logo''' hochzuladen, klicken Sie das x-Symbol im Hochladebereich und wiederholen Sie die vorhergehenden Schritte.<br />[[Datei:Handbuch:logo-delete.png|center|thumb|292x292px|Logo löschen|verweis=Special:FilePath/Handbuch:logo-delete.png]]<br />
Um  '''ein anderes Logo''' hochzuladen, klicken Sie das x-Symbol im Hochladebereich des Logos und wiederholen Sie die vorhergehenden Schritte.
#'''Speichern und aktivieren''' Sie das Logo oder nehmen Sie weitere Anpassungen vor. <br />[[Datei:Handbuch:flexiskin buttons.png|center|thumb|285x285px|Skinänderungen aktivieren|verweis=Special:FilePath/Handbuch:flexiskin_buttons.png]]<br />
#'''Klicken''' Sie ''OK.'' Die Änderungen werden für alle Benutzer unmittelbar gültig.


===Tipps zum Umgang mit dem Logo===
*'''Ausrichtung:''' Das Logo wird auf der linken Seite 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:<br />
<syntaxhighlight lang="css">
.bs-logo a {
background-position: 0 center;
}
</syntaxhighlight>
<br />
{{Box Note|boxtype=note|Note text=Änderungen in ''Free CSS'' werden erst nach dem Speichern sichtbar. Die Vorschau zeigt die ungespeicherten Änderungen nicht an.}}
===Favicon===
===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.
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.
 
::[[Datei:Handbuch:favicon upload area-DE.png|zentriert|mini|220x220px|Favicon hochladen|verweis=Special:FilePath/Handbuch:favicon_upload_area-DE.png]]
::Nach dem Speichern der Seite sehen Sie Ihr Favicon in den Browser-Registerkarten Ihrer Wiki-Seiten.
::[[Datei:Handbuch:favicon-custom.png|center|thumb|294x294px|Neues Favicon|verweis=Special:FilePath/Handbuch:favicon-custom.png]]
 
==Theming==


===Color presets===
==Layout-Farben==
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 Farben der einzelnen Layout-Bereiche können hier angepasst werden.


Die verfügbaren Standardthemen sind folgende:
[[Datei:Handbuch:flexi-main-annotiert.png|alternativtext=screenshot flexiskin|zentriert|mini|650x650px|Flexiskin Layout-Farben]]


<br /><gallery>
*'''Header colors (3):''' Farbeinstellungen für die Kopfleiste. Diese Farben beeinflussen auch die ausklappbaren Megamenüs. [[Datei:Handbuch:flexi-headers.png|alternativtext=screenshot megamenü|zentriert|mini|650x650px|Megamenü]]
Datei:Handbuch:theme-bluespice.png|bluespice
*'''Sidebar colors (4):''' Farbeinstellungen für die Hauptnavigation und die Seitenwerkzeuge.
Datei:Handbuch:theme-turquoise.png|turquoise
*'''Footer colors (5):''' Farbeinstellungen für die Fußleiste.<span /><span /><span /><span /><span /><span /><span /><span /><br />
Datei:Handbuch:theme-orange.png|orange
Es gibt folgende Möglichkeiten, eine Farbe auszuwählen:
Datei:Handbuch:theme-crimson.png|crimson
Datei:Handbuch:theme-lime.png|lime
Datei:Handbuch:theme-turquoise-dark.png|turquoise dark
Datei:Handbuch:theme-sunflower-dark.png|sunflower dark
</gallery>


===Custom color scheme===
*'''Standard-Farbpalette:''' Per Klick auf eine Farbvorschau kann eine Standardfarbe ausgewählt werden. [[Datei:Handbuch:fs-colorpicker.png|alternativtext=screenshot farbpicker|zentriert|mini|174x174px|Farbpicker]]
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.
*'''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.
*


<br />[[Datei:Handbuch:customscheme-pick.png|center|thumb|550x550px|Customizing a color scheme|verweis=Special:FilePath/Handbuch:customscheme-pick.png]]
{| class="wikitable" style=""
<br />
|+Standardfarben des "Discovery"-Skin
{| class="wikitable" style="width:100%;"
!
|+
!Background
!Background color
!Foreground
!Foreground (=text) color
!Highlight
!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
|Header
|Color 2
|<span style="color: rgb(32, 33, 34)">#ffffff</span>
|Seitenwerkzeuge, Werkzeuge zum Qualitätsmanagement
|#252525
|#3e5389
|-
|-
|Color 3
| Sidebar
|Color 3
|<span style="color: rgb(32, 33, 34)">#f1f3f9</span>
|Kopfleiste (da hier kein Text existiert, werden nur die Umschalter eingefärbt)
|#252525
|#3e5389
|-
|-
|Color 4
| Footer
|Color 4
|#<span style="color: rgb(32, 33, 34)">d3d3d3</span>
|Topmenü mit Untermenüs
|#454545
|-
|Body background
| -
| -
|Sseitenhintergrund. Dieser ist hauptsächlich in der Fußleiste sichtbar und wenn die Navigations- und Werkzeugleisten eingeklappt sind
|}
|}
<br />
[[Datei:Handbuch:customscheme-bgcolors.png|center|thumb|650x650px|Hintergrundfarben|verweis=Special:FilePath/Handbuch:customscheme-bgcolors.png]]
<br />


:Als Beispiel ändern wir nun die Hauptfarben des Wiki-Layouts:
:
:[[Datei:Handbuch:customscheme-example-settings.png|center|thumb|650x650px|Angepasstes Farbschema|verweis=Special:FilePath/Handbuch:customscheme-example-settings.png]]<br />
:Das Resultat sieht so aus:
:[[Datei:Handbuch:customscheme-example.png|center|thumb|650x650px|Angepasstes Farbschema |verweis=Special:FilePath/Handbuch:customscheme-example.png]]


==Content==
==Inhalt==
Unter ''Content'' können Sie Stile anpassen, die sich auf den tatsächlichen Inhaltsbereich (2) der Wiki-Seite beziehen:<br />
Diese Einstellungen beziehen sich auf alle Stile des Inhaltsbereiches einer Wikiseite:<span /><span /><span /><span /><span /><span /><span /><span /><br />
[[Datei:Handbuch:bg-body-content.png|center|thumb|650x650px|Body (1) und Content (2) Hintergrundfarben|verweis=Special:FilePath/Handbuch:bg-body-content.png]]
<br />
{{Box Note|boxtype=note|Note text=Alle Änderungen an Content-Einstellungen müssen zuerst gespeichert werden. Die Vorschau reflektiert ungespeicherte Einstellungen nicht.}}
===Colors===
{| class="wikitable" style="width:100%;" data-ve-attributes="{&quot;style&quot;:&quot;width:100%;&quot;}"
!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.
|-
| rowspan="5" |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
===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:<syntaxhighlight lang="css">
#mw-content-text a:visited,[class^="mw-content-"] a:visited {color: #951b81;}
</syntaxhighlight>


(3) Header 3: Unterüberschrift 1
===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.


(4) Header 4: Unterüberschrift 2
===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.


(5) Header 5: Unterüberschrift 3
===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 e''m''-Größen im Verhältnis zum umschließenden Container.


(6) Header 6: Unterüberschrift 4
[[Datei:Handbuch:fs-headings.png|alternativtext=screenshot header levels|zentriert|mini|349x349px|Header-Ebenen]]


(7) FirstHeading: Automatisch angezeigter Seitentitel im Titelbereich (nur über [[#Free CSS|Free CSS]] anpassbar)
==Free CSS==
|-
{{Hinweisbox|boxtype=Hinweis|icon=|Note text=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.|bgcolor=}}
|Color 4
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.
|Topmenü mit Untermenüs
|}
[[Datei:Handbuch:headings.png|zentriert|mini|650x650px|Überschriften|verweis=Special:FilePath/Handbuch:headings.png]]


===Font===
===Neutrale Werkzeugleiste (rechte Seitenleiste)===
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.
<syntaxhighlight lang="css">
/*right sidebar*/
#sb-sec-cnt {background-color:#efefef; color:#252525;}
#sb-sec-cnt .card-header.menu-title {color:#747474;}
</syntaxhighlight>[[Datei:Handbuch:flexi-free-CSS.png|alternativtext=screenshot Free CSS Bereich|zentriert|mini|650x650px|Beispiel Free CSS]]


===Layout===
===Neutraler Kopfleistenhintergrund===
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.
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.


===Headings===
[[Datei:Handbuch:flexiskin-highlights-standard (1).png|alternativtext=Flexiskin Standard-Highlights|zentriert|mini|650x650px|Flexiskin Standard-Highlights]]
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''.
In diesem Fall können Sie diese Werte nachträglich neutralisieren.
[[Datei:Handbuch:flexiskin-highlights-neutral.png|alternativtext=Neutrale Highlights|zentriert|mini|650x650px|Neutrale Highlights]]


==Free CSS==
<span><span /><span /><span /><span /><span /><span /><span /><br /></span>
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|Logo Position mit CSS anpassen]] können.
Fügen Sie folgendes Free CSS hinzu:<syntaxhighlight lang="css">
/*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}}
</syntaxhighlight><span /><span /><span /><span /><span /><span /><span /><span /><br />


{{Box Note|boxtype=note|Note text=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:<syntaxhighlight lang="css">
/* Farbe für Seitentitel ändern*/
#content #firstHeading {
    color: #3f51b5;
}
</syntaxhighlight>
<br />{{Box Links|Thema1=[[Referenz:FlexiSkin]]}}
[[Category:BlueSpice Cloud]]
[[de:{{FULLPAGENAME}}]]
[[de:{{FULLPAGENAME}}]]
[[en:Manual:Extension/FlexiSkin]]
[[en:Manual:Extension/FlexiSkin]]
[[Category:Administration]]

Aktuelle Version vom 9. Juni 2023, 07:45 Uhr

Zugriff[Bearbeiten | Quelltext bearbeiten]

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".
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[Bearbeiten | Quelltext bearbeiten]

[Bearbeiten | Quelltext bearbeiten]

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.
    screenshot logo hochladen
    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[Bearbeiten | Quelltext bearbeiten]

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[Bearbeiten | Quelltext bearbeiten]

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

screenshot flexiskin
Flexiskin Layout-Farben
  • Header colors (3): Farbeinstellungen für die Kopfleiste. Diese Farben beeinflussen auch die ausklappbaren Megamenüs.
    screenshot megamenü
    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.
    screenshot farbpicker
    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[Bearbeiten | Quelltext bearbeiten]

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

Farben[Bearbeiten | Quelltext bearbeiten]

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[Bearbeiten | Quelltext bearbeiten]

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[Bearbeiten | Quelltext bearbeiten]

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[Bearbeiten | Quelltext bearbeiten]

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.

screenshot header levels
Header-Ebenen

Free CSS[Bearbeiten | Quelltext bearbeiten]

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)[Bearbeiten | Quelltext bearbeiten]

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

Neutraler Kopfleistenhintergrund[Bearbeiten | Quelltext bearbeiten]

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
Flexiskin Standard-Highlights

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

Neutrale Highlights
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.

Abgerufen von „https://de.wiki.bluespice.com/w/index.php?title=Handbuch:Erweiterung/FlexiSkin&oldid=7581“