3 Customizing the user interface

No edit summary
No edit summary
Line 1: Line 1:
<bookshelf src="Book:Admin manual" />
<bookshelf src="Book:Admin manual" />
{{DISPLAYTITLE:FlexiSkin}}
{{DISPLAYTITLE:Customizing the user interface (FlexiSkin)}}


With '''FlexiSkin''' you can customize your wiki design '''—''' for example: logo, colors, or fonts — in minutes.
== Where can I customize the skin?==


==Where do I find FlexiSkin?==
You can access the special page (''Special:FlexiSkin)'' for customizing the skin from the menu ''Global actions> Administration > Skin''. To edit this page, you need ''admin'' rights in the wiki.


The FlexiSkin settings are available on the page  ''Special:FlexiSkin.'' (Please note the spelling of FlexiSkin with an uppercase "S".)
[[File:FlexiSkin link.png|alt=Link for customizing the skin|center|thumb|500x500px|Link for customizing the skin]]


==Logo and Favicon==
 
The page ''FlexiSkin'' allows you to customize the logo, favicon, colors and font settings of the wiki.
 
==Logo and Favicon ==


===Logo===
===Logo===
'''To upload your logo:'''
'''To upload your logo:'''


# '''Click''' ''Select a file'' <span style="color: rgb(51, 51, 51)">to choose a file from your file explorer</span> '''or drag the file''' <span style="color: rgb(51, 51, 51)">into the dotted area of the Logo upload area.</span>[[File:Manual:logo-upload-dialog.png|alt=Upload a logo|center|thumb|140x140px|Upload a logo]]
#'''Click''' ''Select a file'' <span style="color: rgb(51, 51, 51)">to choose a file from your file explorer</span> '''or drag the file''' <span style="color: rgb(51, 51, 51)">into the dotted area of the Logo upload area.</span>[[File:Manual:logo-upload-dialog.png|alt=Upload a logo|center|thumb|140x140px|Upload a logo]]
# '''Click''' the ''Preview'' button on the page and check the placement of the logo.
#'''Click''' the ''Preview'' button on the page and check the placement of the logo.
# '''Click''' ''Save & activate''. The logo is now visible for all users.
#'''Click''' ''Save & activate''. The logo is now visible for all users.


To use  '''a different logo''', click the  "x" symbol in the upload area of the logo and repeat the steps above.
To use  '''a different logo''', click the  "x" symbol in the upload area of the logo and repeat the steps above.
Line 28: Line 31:
*'''Header color (3):''' Color settings for the header bar. These colors also apply to the mega menus.[[File:Manual:flexi-headers-EN.png|alt=Mega menu|center|thumb|650x650px|Mega menu]]
*'''Header color (3):''' Color settings for the header bar. These colors also apply to the mega menus.[[File:Manual:flexi-headers-EN.png|alt=Mega menu|center|thumb|650x650px|Mega menu]]
*'''Sidebar colors (4):''' Color settings for the main navigation and the page tools.
*'''Sidebar colors (4):''' Color settings for the main navigation and the page tools.
*'''Footer colors (5):''' Color settings for the footer.<br />
*'''Footer colors (5):''' Color settings for the footer.<span /><br />
The following options to enter a color value are available:
The following options to enter a color value are available:


Line 37: Line 40:
*
*


{| class="wikitable"
{| class="wikitable" style=""
|+Standardfarben des "Discovery"-Skin
|+Standardfarben des "Discovery"-Skin
!
!
Line 56: Line 59:
|Footer
|Footer
|#<span style="color: rgb(32, 33, 34)">d3d3d3</span>
|#<span style="color: rgb(32, 33, 34)">d3d3d3</span>
|#454545
| #454545
| -
| -
|}
|}


==Content==
== Content==
These settings apply to all styles of the content area of a wiki page:<br />
These settings apply to all styles of the content area of a wiki page:<span /><br />


===Colors===
=== Colors===
Here you can adjust the background, font and link colors. Broken links in the wiki are shown in red by default so that they can be easily identified. You should carefully consider whether you want to deviate from this convention. If you want to color visited links differently than standard links, you can insert the following setting in the Free CSS area:<syntaxhighlight lang="css">
Here you can adjust the background, font and link colors. Broken links in the wiki are shown in red by default so that they can be easily identified. You should carefully consider whether you want to deviate from this convention. If you want to color visited links differently than standard links, you can insert the following setting in the Free CSS area:<syntaxhighlight lang="css">
#mw-content-text a:visited,[class^="mw-content-"] a:visited {color: #951b81;}
#mw-content-text a:visited,[class^="mw-content-"] a:visited {color: #951b81;}
</syntaxhighlight>
</syntaxhighlight>


=== Font ===
===Font ===
The font settings only apply to the text in the content area. The text in other areas such as B. in the navigation and toolbars or in the menus is not affected.
The font settings only apply to the text in the content area. The text in other areas such as B. in the navigation and toolbars or in the menus is not affected.


Line 82: Line 85:
For additional customizations that are not possible with the FlexiSkin settings, you can use the ''Free CSS'' field if you are familiar with CSS.  Here are some examples.
For additional customizations that are not possible with the FlexiSkin settings, you can use the ''Free CSS'' field if you are familiar with CSS.  Here are some examples.


=== Neutral page tools (right sidebar) ===
===Neutral page tools (right sidebar)===
If you select a color for your left navigation bar, you sometimes don't want the color to be applied to the right sidebar (the page tools). To keep the light-grey background, add the following Free CSS:<syntaxhighlight lang="css">
If you select a color for your left navigation bar, you sometimes don't want the color to be applied to the right sidebar (the page tools). To keep the light-grey background, add the following Free CSS:<syntaxhighlight lang="css">
/*right sidebar*/
/*right sidebar*/
Line 90: Line 93:
[[File:Manual:flexi-free-CSS.png|alt=Example of Free CSS|center|thumb|650x650px|Example of Free CSS]]
[[File:Manual:flexi-free-CSS.png|alt=Example of Free CSS|center|thumb|650x650px|Example of Free CSS]]


=== Neutral top bar backgrounds and hovers ===
===Neutral top bar backgrounds and hovers===
When you set the header hightlight color, it can happen that the automatically calculated values for the searchbar as well as the button hovers and backgrounds don't fit your needs.  
When you set the header hightlight color, it can happen that the automatically calculated values for the searchbar as well as the button hovers and backgrounds don't fit your needs.  
[[File:Manual:flexiskin-highlights-standard.png|alt=Flexiskin highlights standard|center|thumb|650x650px|Flexiskin highlights standard]]
[[File:Manual:flexiskin-highlights-standard.png|alt=Flexiskin highlights standard|center|thumb|650x650px|Flexiskin highlights standard]]
Line 109: Line 112:
@media (min-width: 768px){.dropdown-menu.megamenu .mm-bg {background-color:#747474}}
@media (min-width: 768px){.dropdown-menu.megamenu .mm-bg {background-color:#747474}}
</syntaxhighlight>
</syntaxhighlight>
<br />
<span /><br />
[[Category:BlueSpice Cloud]]
[[Category:BlueSpice Cloud]]
[[de:{{FULLPAGENAME}}]]
[[de:{{FULLPAGENAME}}]]
[[en:Manual:Extension/FlexiSkin]]
[[en:Manual:Extension/FlexiSkin]]

Revision as of 15:38, 2 December 2022


Where can I customize the skin?

You can access the special page (Special:FlexiSkin) for customizing the skin from the menu Global actions> Administration > Skin. To edit this page, you need admin rights in the wiki.

Link for customizing the skin
Link for customizing the skin


The page FlexiSkin allows you to customize the logo, favicon, colors and font settings of the wiki.

Logo and Favicon

To upload your logo:

  1. Click Select a file to choose a file from your file explorer or drag the file into the dotted area of the Logo upload area.
    Upload a logo
    Upload a logo
  2. Click the Preview button on the page and check the placement of the logo.
  3. Click Save & activate. The logo is now visible for all users.

To use a different logo, click the "x" symbol in the upload area of the logo and repeat the steps above.

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.

Layout colors

Here you can adjust the colors of the individual layout areas.

Flexiskin layout colors
Flexiskin layout colors
  • Header color (3): Color settings for the header bar. These colors also apply to the mega menus.
    Mega menu
    Mega menu
  • Sidebar colors (4): Color settings for the main navigation and the page tools.
  • Footer colors (5): Color settings for the footer.

The following options to enter a color value are available:

  • Standard color palette: A standard color can be selected by clicking on a color preview.
    Color picker
    Color picker
  • Pencil symbol: Click on the pencil symbol to select a color from the color mixer.
  • Manually entering a value: To provide a custom value (e.g., your for your CI colors), enter the hex-value for the color.

If you delete a color and FlexiSkin is saved with one or more empty color values, the standard colors of the Discovery skin are saved as values instead.

Standardfarben des "Discovery"-Skin
Background Foreground Highlight
Header #ffffff #252525 #3e5389
Sidebar #f1f3f9 #252525 #3e5389
Footer #d3d3d3 #454545 -

Content

These settings apply to all styles of the content area of a wiki page:

Colors

Here you can adjust the background, font and link colors. Broken links in the wiki are shown in red by default so that they can be easily identified. You should carefully consider whether you want to deviate from this convention. If you want to color visited links differently than standard links, you can insert the following setting in the Free CSS area:

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

Font

The font settings only apply to the text in the content area. The text in other areas such as B. in the navigation and toolbars or in the menus is not affected.

Layout

If you want to change the layout width just test it on many devices to make sure your setting works as intended. Other wiki users work with different display settings and can be negatively affected by this change. Unless you have a specific reason to change the content width, you shouldn't adjust this setting. The standard content width is 61.25 rem.

Headers

You can adjust the color, font size and underlining for all heading levels. You can also change the unit for the font settings (e.g. px instead of rem). If you are not familiar with the differences between these units, just leave the default setting, rem. This is based on the superordinate size setting in the wiki. In contrast, em sizes are in relation to the enclosing container.

Heading levels
Heading levels

Free CSS

Note:If the same styles are defined in both FlexiSkin or FlexiSkin Free CSS and in MediaWiki:Common.css, the styles from Common.css are applied.

For additional customizations that are not possible with the FlexiSkin settings, you can use the Free CSS field if you are familiar with CSS. Here are some examples.

Neutral page tools (right sidebar)

If you select a color for your left navigation bar, you sometimes don't want the color to be applied to the right sidebar (the page tools). To keep the light-grey background, add the following Free CSS:

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

Neutral top bar backgrounds and hovers

When you set the header hightlight color, it can happen that the automatically calculated values for the searchbar as well as the button hovers and backgrounds don't fit your needs.

Flexiskin highlights standard
Flexiskin highlights standard

In this case, you can neutralize them to grey.

Neutral highlight colors
Neutral highlight colors

Add the following Free 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}}




To submit feedback about this documentation, visit our community forum.

Discussions