Style presets

Probably one of the most useful features you can find in Veello Theme are the style presets which are managed in the Style presets backend module. Practically, every element that is displayed in the frontend can be styled individually using style presets. They are a simple records that store the style data which is later used to generate the necessary CSS code.

In its nature, the style presets are similar to the Contao internal style sheet editor, except that instead of passing a CSS selector, you simply assign a preset to the element you want to style. It also means that everything you can style will have different styling options. Elements will share most of the settings, yet some are unique to certain types.

In addition to that, many settings are fully responsive, which means you can set different values for different breakpoints. If that is not enough, there is always a dedicated field for your custom CSS at the end of the form.

Simple yet powerful user interface provides a lot of options.

Types of style presets

There are basically two types of the style presets:

Individual presets
Style presets that are strictly assigned to one record (e.g. content element). By default they are not visible in the backend list until you toggle them using a button at the top. They can be saved as global presets anytime.
Global presets
Style presets that are available globally and can be assigned to multiple records (e.g. content elements). They are visible out of the box in the backend list.
You can choose a custom style or a predefined global style.

Backend list interface

The backend module offers a way to list and manage all style presets in the system. Next to each record you can see its type as well as number of the source records it is assigned to.

Backend listing gives you an overview of all available style presets.

From this view you can also check which records are assigned to a every preset by clicking the last icon next to the style preset record.

You can quickly check where each style preset is being used.

Variables usage

It is possible to use variables in style presets. You can find the list of available variables below. Some of them can be configured in the design settings.

Global CSS variables
Variable name Default value
--vee-bodyBackgroundColor #fff
--vee-borderColor #ededed
--vee-borderRadius 4px
--vee-contentMargin 32px
--vee-darkFontColor #333
--vee-dividerColor #ededed
--vee-fontColor #656565
--vee-fontFamily 'Roboto', sans-serif
--vee-fontWeight normal
--vee-headlineColor #333
--vee-headlinesFontFamily 'Roboto', sans-serif
--vee-lightBackground #f8f8f8
--vee-lightFontColor #999
--vee-lineHeight 1.5
--vee-linkColor #10cfbd
--vee-linkColorHover #10cfbd
--vee-mainColor #10cfbd
--vee-paragraphMargin 1rem
--vee-secondaryColor #6c757d
--vee-sectionPaddingLarge 144px
--vee-sectionPaddingNormal 96px
--vee-sectionPaddingSmall 48px

You can also use the read-only SCSS variables:

Read-only SCSS variables
Variable name Default value Override in design settings
$bodyBackgroundColor #fff no
$borderColor #ededed no
$darkFontColor #333 no
$dividerColor #ededed no
$errorTextColor #f00 no
$fontColor #656565 no
$headlineColor #333 no
$lightBackground #f8f8f8 no
$lightFontColor #999 no
$mainColor #10cfbd yes
$secondaryColor #6c757d yes