Boxes

Application #

Adjust the boxes accordingly for each background. Define, in accordance with the corporate design, which colors your surfaces (boxes) should receive. These colors are used for elements such as the big slider, tabs, flip cards, tables, or the accordion.

Find overview of boxes #

To customize and manage your boxes, click on the fifth item, „Boxes“.

1
Find boxes
Select boxes to see further settings.

Box Overview #

In the box overview, there are three areas: the box colors, the special colors, and the overlay color adjustment. We will go through all areas step by step so that in the end we can design an appealing frontend where all the settings are correct.

Step 1 – Box colors #

1
Colors
Click on one of your backgrounds to customize the colors and other properties of the boxes placed on it.

Step 2 – Customize box colors #

1
Color
Use the color picker to set a color value for your boxes, such as here on a primary light background. This can once again be either a solid area or a gradient.
2
Contour
Determine whether your boxes should have a outline or not, and additionally, what color and outline width (thickness) they should have.
3
Shadow
Set the color of the shadows. You can change the depth again in the style settings if you want it to be different.
4
Text
Determine the color of the text. The values are inherited from the typography settings.

Spot colors #

Click on the „Spot colors“ tab. There you will see three values: „Positive“, „Negative“, and „Neutral“. These colors are particularly important because they are used in quizzes for the evaluation. This allows you to define which colors should be displayed upon passing, failing, or for general hints or warnings. In addition, these colors are also available for the „Box“ element.

1
Edit spot color
Click on a color to open and edit it.

Step 1 – Edit spot colors #

1
Color
Set a color value for the positive value using the color picker. This can be either a solid area or a gradient here again.
2
Color
Determine whether this value gets an outline or not, and additionally, what color and outline thickness (width) it has.
3
Shadow
Determine the color of the shadows. The depth is determined by the style settings.
4
Text
Determine the color of the shadows. The depth is determined by the style settings.

Step 2 – Check spot colors #

After you have processed all spot colors, check whether your entries are correct. To do this, proceed as follows:

1
Review
Create a sample WBT and assign your theme. This allows you to assign and check the colors for the box element.

Overlay #

Determine how the overlay visually looks in your theme. You have the option to assign all your background colors, which you set in step 4, to the overlay.