TYPO3 Module Website Configuration Icon

The Website Configuration module is our design configurator, which allows you to customize the logo, colors, fonts and font size of your online presence without programming knowledge.

With the design configurator you can easily adapt the colour of your page to your corporate design. You create different colour sets and apply them. If the company's font, colours and/or logo change, the design can be easily updated without losing content.

By clicking on the module you will get to a view with five tabs, which are presented in more detail below. Above the tabs you can see options that are always available.

Use the blue button Save Changes to save your settings. You must always do this if you want to see how the change affects the frontend. 

Note: When you exit the module, no save hint is shown! To save changes, you should always save in between.

The Reset Configuration button resets all settings to the default value. To view the page in a new window, click Open Preview in new Window.

TYPO3 Module Website Configuration Options

In the drop-down menu of Preset you will find three color sets: Dark, Default and Ocean. None is the default setting and is automatically selected as soon as you have made changes to a preset. This means that the presets cannot be changed, but can be customized.

The screenshots show the standard color settings and the different modes of our Website-Base.

TYPO3 Website-Base Frontend Light Mode
Light Mode
TYPO3 Website-Base Frontend Dark Mode
Dark Mode
TYPO3 Website-Base Frontend in Contrast Mode
Contrast Mode

Tab Color Sets

Color Sets allow a very individual combination of colors. In this tab you see 10 color sets. But you don't have to use and adjust all of them. Because in the tab Design you then set which Color Set you want to apply where. So theoretically it would be possible to use only one Color Set. Before you adjust the sets, it is best to familiarize yourself with the Design tab!

Each color set has 11 colors that can be adjusted. When you click on a color set, a window for configuring the color appears on the side. You only have to choose a color from the color palette or enter a color code. We will now show you which field causes which changes in the frontend.

TYPO3 Module Website Configuration Color Palette
TYPO3 Module Website Configuration Color Sets 1-2
TYPO3 Module Website Configuration Color Sets 9-10

Background

You can see in the screenshots that this color setting is the main background. For comparison, you can see the page again in the standard setting.

TYPO3 Modul Website Configuration Reiter Color Sets Background
TYPO3 Frontend
TYPO3 Frontend
TYPO3 Frontend
TYPO3 Frontend

Foreground – Text

The text is placed on the main background. For good legibility, the text must have sufficient contrast to the background.

TYPO3 Modul Website Configuration Color Set Foreground Text
TYPO3 Module Website Configuration Text in Frontend

Primary (Accent) Background

Some content elements have titles or lines that are highlighted, such as cards. You can set the background color here. For such elements to be effective, it is important that they contrast with the main background. In the simplest case, you set the main text color here and then choose the text color as the main background color. So you invert the colors.

TYPO3 Modul Website Configuration Reiter Color Sets Primary Accent Background
TYPO3 Frontend

Primary (Accent) Foreground – Text

Select a color for the primary accent foreground, i.e. the text that represents the primary (accent) background above the marker.

TYPO3 Modul Website Configuration Reiter Color Sets Primary Accent Foreground
TYPO3 Frontend

Secondary (Accent) Background

You also determine the brand-representing background color for accent elements, such as a badge.

TYPO3 Module Website Cofiguration Tab Color Sets Secondary Background
TYPO3 Frontend

Secondary (Accent) Foreground – Text over secondary (accent) background

The color of the text of such elements can also be set.

TYPO3 Module Website Configuration Tab Color Sets Secondary Foreground
TYPO3 Frontend

Headline

The headline color is selected separately from the text here.

TYPO3 Module Website Configuration Tab Color Sets Headline
TYPO3 Frontend

Link

Links are often displayed in a different color than the rest of the text for easier recognition. You can set the color of your links here.

TYPO3 Module Website Configuration Tab Color Sets Link
TYPO3 Frontend

Link Hover & Link Background (Hover)

Links can (additionally) be marked with the mouse-over effect. To do this, set these two colors.

TYPO3 Module Website Configuration Tab Color Sets Link Hover
TYPO3 Frontend Link Hover

Border

Specify the border color here, e.g. for quotations.

TYPO3 Modul Website Configuration Reiter Color Sets Border
TYPO3 Frontend

Tab Design

Logo

The page logo will appear in the upper left corner above the menu. The favicon can be seen in the tab bar of your browser and in the bookmarks to the left of the page name. It must be 16x16 pixels in size.

Basic Colors

Body Color is the color of the HTML body behind the content. This color is only visible at higher resolutions.

Content Area Colors

Select the color set for the content area in the frontend. Box Shadow Color is the color of the box shadows in the entire page content.

For best results choose a dark colour.

Top Bar Colors

Select a color set for the Top Bar. The Top Bar is the line containing the logo.

Navigation Colors

Color Set

This is the color to be used for the navigation/menu bar, except for the background color. The latter is defined in the next field.

Background Color

Here, you define the background color that is used for the navigation/menu bar.

TYPO3 Module Website Configuration Tab Design
Background Opacity

The navigation bar is always visible, no matter how far a user scrolls down. The bar overlaps contents that are located in the upper part of the page. In order to separate the navigation bar from the contents, a transparency can be set here. Valid values are in the range 0.0 - 1.0, the lower the value, the higher the transparency.

Megamenu Colors

Color Set

This is the color to be used for the mega menu, except for the background color. The background color of the mega menu is set in the next field.

Background Color

Select a background color for the mega menu here.

Background Opacity

Since the navigation bar is always visible, the mega menu can also be opened at any time so that it appears above the content. At this point you can decide on the degree of transparency or leave the mega menu non-transparent. Valid values are in the range 0.0 - 1.0. The lower the value, the higher the transparency. A value of 1.0 means that the mega menu is not transparent.

Responsive Side Menu Colors

Select the color set to be used for the menu in the mobile view. For a uniform image of the website it should not differ too much from the colors of the navigation bar.

Area Colors

Dark Color Set

Select the color set that is to apply to all dark areas and the footer.

Light Color Set

Specify the color set for light areas, job detail pages and breadcrumb navigation. The latter is the link bar above the content that shows the user where he/she is hierarchically located on a page.

Component Colors

Color Set

Here you decide on the colors of most components, e.g. cards, teasers, tabs, accordions or the Twitter stream.

TYPO3 Module Website Configuration Tab Design
Slider Overlay Color

Sliders can be created with an overlay, i.e. a transparent color that is placed over the slider. For best results, choose a dark color. Use black (#00000000) if you are not sure.

Lightbox Backdrop Color

The lightbox is a way of presenting images, which is a standard feature of our website base. When you click on an image, it is enlarged and displayed in the middle of the page, while the rest of the page is darkened/covered. You can choose the colour of the cover here.

Button, Box, Alert, Label and Badge Colors

The Website-Base allows to display content in a variety of ways, e.g. boxes, buttons, labels and similar are used. Again and again you will also encounter the settings: Default, Primary, Success, Info, Warning, Danger. In this context, it is worthwhile to adjust several color sets, because the buttons and boxes can only differ in color if a different set is selected for each. In the Color Set, the background color and the text color (Foreground) determine these elements.

Button Shape Settings

Define the radius of the corners of small, large and standard buttons. The higher the number, the more rounded are the corners of the buttons.

Special Text Colors

In the Rich Text Editor (RTE), you can set other colors for the text than the color set by default. There are six colors to choose from: Muted, Primary, Success, Info, Warning, Danger - you specify which colors are used in each case. Click on the color field and simply select or enter the desired color from the color palette that appears.

Head

Here, it is possible to enter an individual HTML code for the head. Among other things, the head contains metadata and information on the presentation of the page, but is not displayed in the frontend, i.e. the website.

Font Sources

All fonts that you want to use on the website must be defined here. You can either specify a font name or insert a link to a hosted font file (as shown in the screenshot). If you want to use multiple fonts (e.g. to differentiate between text and headline), you must insert multiple links/names here.

Fonts

Copy Font
Select the font to be used for normal text.
Headline Font

Select the font to be used for headings.

Font Sizing

Base Font size
Enter the font size for normal text.
H1, H2, H3, H4, H5, H6 Font size

Determine how large the respective headings should be.

TYPO3 Module Website Configuration Tab Design

Sizing

Default Element Distance
Enter how large the distance between content elements should be.
Vertical inner distance

Define the vertical inner spacing for base size elements. This applies to buttons, for example, which are changed in height as a result.

Horizontal inner distance

Define the horizontal inner spacing for base sized elements. This applies for example to buttons, which are changed in width as a result.

Vertical inner distance [lg], [sm], [xs] & Horizontal inner distance [lg], [sm], [xs]

Define the vertical and horizontal inner distance for large [lg], small [sm] and extra small [xs] elements.

Tab Website Configuration

Basics – Page Title

The page title you enter here will always be appended to the title of the subpage in the browser tab, e.g. Demo - Website-Base.

API Keys

APIs are interfaces for applications, e.g. on a website. The API Key provides authorized access to the tools - you need it especially for Google applications like ReCaptcha, Vimeo or Google Maps.

Social Media Accounts

If you want to allow users to share content via social media, you can configure this here. You can activate Facebook, X (formerly Twitter), WhatsApp, Mail, Telegram, Xing & LinkedIn.

TYPO3 Module Website Configuration Tab Website Configuration

Tab Backend Configuration

In this tab you customize the backend of your page.

Basics

Specify the e-mail address and name that you want the system to use by default for sending e-mail.

Backend Login

Customize here the page for logging into the backend. Upload your logo and a background image of your choice and define a highlight color.

TYPO3 Module Website Configuration Tab Backend Configuration

Tab Custom CSS and JavaScript

Create custom CSS stylesheets and JavaScript in this tab.

TYPO3 Module Website Configuration Tab Custom CSS and JavaScript

Would you like to know more?

All information about the available editions can be found on the webpage for our TYPO3 Website-Base. You have the possibility to get a Website at a Fixed Price or you decide for a Website as a Service package, with which no further costs for hosting or security and function updates will come up to you.

Website at a Fixed Price
Website as a Service