Color settings

In this theme section you'll find all settings you need to make your website unique, using your choice of color.

Tab: »Color«

Step by step guide Pieces of advice

Step by step

Background color

Click the Color tab.
At Background Colors use HTML code to set the background color of your website. For the hashtag and number/digit combinations of the table of colors you will find adequate color charts on the web.
Click on the Save button above the workspace.

Font color

At Recommendations for font colors you define whether you use your own color variant (Custom) or the preset font colors black or gray blue.
Custom: Use the input fields for Base Font Color, Light Font Color and Dark Font Color to specify the colors for different font categories.
Click on the Save button above the workspace.

Primary colors

At Recommendations for primary colors use a color from the drop-down list to set the main color of the website.
Custom: Alternatively select the main colors of the website in the input fields Base Light and Dark Primary Color.
Click on the Save button above the workspace.

Secondary colors

As with the primary colors, at Recommendations for secondary colors you use the drop-down list to set the »secondary color« of the website.
Custom: Alternatively select the secondary colors of the website with the input fields Base, Light and Dark Secondary Color.
Click on the Save button above the workspace.

Signal colors

Certain types of dialog and system messages can be highlighted in color, here in the entry fields Success Color, Warning Color and Error Color.
Click on the Save button above the workspace.

Desktop and mobile navigation

Here you determine which of the color sets is used for navigation on the desktop as well as on mobile devices. For Desktop Navigation the values Primary Colors, Secondary Colors and Font Colors are offered, for Mobile Navigation only Primary Colors and Secondary Colors.
Click on the Save button above the workspace.

Pieces of advice

toujou is based on TYPO3 and anyone familiar with TYPO3 knows that there are many different options to use to reach your desired results. We would like to point out important information and little tricks that can assist you when you’re creating and editing your website.

At the bottom of the tab »Color« within the theme settings you will find an overview of your current color settings.

The pre-set color suggestions in toujou come as a triple: a basic color, a lighter version of the basic color and a darker version of it. The different shades serve to illustrate interaction (like mouse-over to links) or to visualize graphical depth in design. Feel free to decide whether up to three color options are created.

The source of these color sets is basically Google's Material Design ↗. These guidelines are largely considered as a »standard work« in web design.

In toujou, you determine the color value for the font (Font Color). Different color settings apply to headlines which use primary and secondary additionally:

Headline 1: Font color

Headline 2: Primary color

Headline 3: Secundary color

Headline 4: Font color

Headline 5: Font color

Linked elements

Elements from the toujou element library that are connected to this tutorial.

Headline Element