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.
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.
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.
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.
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.
| 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:
| 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 |