Styles#

With Styles you control the complete appearance of your WoltLab Suite installation. A style consists of colors, images, typography settings, templates and optional individual CSS declarations.

WoltLab Suite is delivered with a default style called WoltLab Suite Core. You can change this style as you like, but you can also create a completely new style. If you wish, you can use several styles in your installation and let your users choose which style they want to use.

Import Styles#

Styles for WoltLab Suite can be exported as a single file. This style file can then be imported in another installation or given to other people. In the official Plugin-Store you can find a large number of ready made styles - both free of charge and with costs.

To import a style file, go to the admin panel Customization → Styles → Styles and click on the button Import Style. Then you can upload the style file from your computer.

Manage Styles#

Style management can be found in the admin panel under Customization → Styles → Styles.

Set Default Style#

If you have multiple styles installed, you can make one style the default by clicking on the icon shown:

Change Logo#

When editing a style, you will find the settings for the logo under Global Settings → Page Logo. You can upload the desired logo directly from your computer. You can also define a separate logo for display on mobile devices such as smartphones.

Change Font#

When editing a style, you will find the settings for the font under Global Settings → Type Face. You have the possibility to define the font sizes and the font style.

Change Colors#

The color palette can be found under the Color Palette tab when editing a style. Here you have the possibility to adjust all colors and get a direct preview of your changes at the same time.

First select a specific area that you want to customize. To do this, click on the Category Direct Selection button on the right side. Then click in the preview on the desired area that you want to customize. On the right side, all colors that can be customized for the respective area are listed. Click on one of the colored squares to adjust the color value.