No results found. Please refine your search criteria or contact us.
MoreMenu

Designs

The heart of Veello Theme which makes it so powerful are the designs. They determine the look and feel of your website. You can find them in the Designs backend module.

Every design contains a detailed information about the design of your website. It's a starting point for every page defining everything that will be visible on the screen – colors, fonts, header, headlines, lightbox, etc. You can find more on the available settings later in this article.

Hint

The general page layout – that is number of columns and page sections – are still defined in Themes > Page layouts. The design contains mostly information about general look and feel. It is still a page layout's responsibility to arrange the content, though.

Adding designs to the page

Designs go hand in hand together with page layouts. That means, they are also defined in page settings and are also inherited for subpages.

Once you have created a design, you should assign it to the desired page the same way as a page layout.

Designs are set in the page settings together next to page layout.

Design inheritance

More than often there are cases where pages across one website look a bit different, e.g. homepage compared to a regular subpage can have a different logo or header type. Due to the fact that they still share the same overall look and feel, it would be against good rules of maintenance to duplicate the whole large record in order to change just a few values.

This is where the design inheritance comes handy. When creating a new similar design, you can choose it to have a parent design which would be used as a reference point for any value in it. Basically it would be like if you were using the selected parent design itself, yet you are still able to override any value simply by selecting the Override checkbox next to a field widget.

Every design can inherit settings from another one.

General settings

The starting point when creating a design are the general settings. They define basic global values such as main color, default button style and general design styles. The last one contains important information about typography on your website such as font family, font size, etc.

Layout settings

This section allows you to optionally override various values of the layout such as:

  • custom breakpoints;
  • custom container widths;
  • custom grid gutter;
  • custom section padding;
  • custom content margin;
  • custom paragraph margin.

Most of those settings are fully responsive and you can set different values per different breakpoints.

Logo settings

This is a place to set your header logo. You can also have different logos for the mobile header as well as for the sticky header.

Here you can also adjust the logo style, such as margin, padding or background color. This, of course, can be individual for every context listed above.

Hint

If you don't choose any logo for mobile or sticky header, the default logo will be used.

Favicon settings

In this section you can set the favicon as well as its optional tile color. Right now only PNG format is supported. For the best results you should upload at least a 310x310 pixels square image, which will be resized dynamically to appropriate sizes.

An example generated code that is added to the <head> section:

<link rel="apple-touch-icon" sizes="180x180" href="assets/images/d/favicon-5d67d8d3.png">
<link rel="icon" type="image/png" sizes="32x32" href="assets/images/1/favicon-c22e62b5.png">
<link rel="icon" type="image/png" sizes="16x16" href="assets/images/8/favicon-46bf6cf7.png">
<meta name="theme-color" content="#eeeeee">
<link rel="manifest" href="assets/css/manifest-f4c76513.json">
<meta name="msapplication-config" content="assets/css/browserconfig-f4c76513.xml">

Header settings

One of the most important parts of the website is definitely its header, which you can configure in this section. There are two main settings that you should configure here:

Header type
One of the predefined header layout types. Pick up the one that works for you best.
Mobile header breakpoint
A breakpoint in pixels from which the mobile version of header appears and regular main menu desktop will be displayed instead of a mobile menu trigger.

In addition to that you can also configure other settings such as whether the header should be sticky or static, have a transparent or solid background, etc. Please note that each header type has its own layout and placement of the elements is different. The settings of individual header elements are defined in the next section.

Use variety of options to configure the header the way you want it.

Header elements

In this section you can specify which elements – apart from logo and main menu – are to be also included in the header. Every element has its own settings and can be toggled any time. In addition to that, most of the elements can have a little separator from other header elements, and they can be optionally hidden in the sticky header.

The placement of header elements is determined by the header type you selected before. Order of the elements however, can be configured at the bottom of this section.

Header elements can be separated by one of multiple separator types.

Language switcher

Once enabled, you can choose its type and adjust it using the style presets. The language switcher is powered by terminal42/contao-changelanguage extension.

A must-have component for multilingual websites can be easily added to the header.

Search

A simple search form can also be added to the header. You can configure its type, icon and style. By default this element is also available in mobile header, but you can hide it on demand by toggling an appropriate field.

Allow to search your website straight from the header by adding a simple search form.

Member button

Apart from the search icon and Isotope buttons, you can also add a new button to the header – the member button. In fact, it's a simple link, so it can be used for the login page for your members.

Point your members to a login page by adding the member button.

Social media links

If you created some social links, they can be added to the header as well. You can choose which links should be displayed and how they should look like. Similar to search, this element is also optionally visible in the mobile version of the header.

Stay in touch with your users by adding social links to the header.

Header buttons

Your header can also contain multiple buttons that can perform various actions – launch a modal, open a panel or be a regular hyperlink. Their style is managed in the Buttons backend module, yet the content can be set directly here.

The buttons can also be limited to a certain language. It can be very useful if you have a multilingual website and would like to provide different buttons per language.

Make headers more interactive by adding buttons.

Custom HTML

When all the above elements are still not enough, you can always add your custom HTML code. This element can also be hidden in mobile or sticky header, as well as it can have a separator from other elements.

You can extend header elements with your custom HTML.

Order of header elements

Finally, you can re-arrange header elements according to your needs by changing their order in the following field:

Customize order of header element using drag and drop.

You can also change the order of elements for sticky and mobile headers. If not specified, then the default elements order specified above will be used.

Advanced settings allow you to order elements in sticky and mobile header.

Dropdown settings

Here you can define the look and behavior of dropdowns. They are used in the desktop main menu but also in some variants of e.g. language switcher. In addition to the type, you can also specify the dropdown animation and optionally enable its shadow.

Dropdowns are used for main menus as well as for some certain types of other components.

Menu settings

Within this section you can configure everything related to main menu on the desktop devices. Starting from menu type and its style, you can decide on showing icons, menu sub indicators or menu item separators. Advanced configuration allows you to specify things like menu show timeout, submenus width or submenus offsets.

Individualize your website with a custom menu type of your choice.

Mobile settings

This is a place where you can define the mobile settings of your website. Here you can adjust the settings such as:

  • mobile menu type;
  • menu trigger type;
  • menu trigger hover effect;
  • menu trigger style;
  • mobile menu style.
Mobile settings allow you to define the behavior of mobile menu.

Content settings

This section includes several field of style presets that allow you to define the following settings:

  • main column style;
  • main column inside style;
  • left column style;
  • left column inside style;
  • right column style;
  • right column inside style.

Headline settings

Here you can define the type and style for every headline level (h1-h6) individually. Veello Theme comes out of the box with several types of headings which you can enhance using style presets. Using those you can also create your custom types.

You can choose one of many predefined headline types.

Links settings

Similar to headline settings, you can also define a global design type for links and set an image hover effect. These can also be enhanced by style presets.

Pick one of the many predefined link types to enhance your design.

Tables settings

Default table styles can be adjusted globally using style presets.

Pagination settings

Default pagination styles can be adjusted globally using style presets.

Forms settings

Default form styles can be adjusted globally using style presets.

Comments settings

This section allows you to adjust several things about the comments on your website:

  • how many columns with comments are displayed per breakpoint;
  • comments meta fields type;
  • comments type;
  • comments style preset.
The comments type and style can be set in the design settings.

Footer settings

In this section you can decide whether a footer should be sticky or not.

Lightbox settings

This is a place where you can enable or disable lightbox on the website. Once enabled, you can set its style and a few extra options such as:

  • lightbox open/close animation type;
  • lightbox animation duration;
  • lightbox transition between slides type;
  • lightbox transition duration.
Adjust lightbox to your needs by configuring its variety of settings.

Include settings

As mentioned in other guides, here you can include things like icon sets and fonts. Most of the times they are  included automatically whenever you use them, but including them explicitly may come in handy if you would like to use them e.g. in custom CSS code.

Include icon sets and fonts to use them manually in your custom CSS code.

Style settings

Although the theme comes with a lot of configuration and styling options, sometimes it may be necessary to adjust the design by writing your own custom CSS code. The design settings come with multiple options to face this problem:

Hint

All SCSS variables can be found in the /vendor/veello/theme/src/Resources/public/theme/styles/_variables.scss file.

Included style files

The field "Included style files" allows you to include your custom CSS/SCSS files. In the SCSS files you are able to use the theme variables as well as include the partials of the basic styles:

// Import dropdown animations
@import '/veello-theme/dropdown-animations';

.my-element {
    @include animation-reverse($dropDownAnimation, false);
}

// Import mixins
@import '/veello-theme/mixins';

@include media-breakpoint-up(sm) {
    .my-element {
        width: 100%;
    }
}

// The variables are available out of the box
.my-element {
    color: $mainColor;
}

Custom CSS inline styles

In this field you can enter a custom CSS stuff that will be added on every page with this design. The styles will be added as inline <style> tag inside the <head> tag. Note this field does not accept the SCSS code!

Custom SCSS variables

The design settings affect certain SCSS variables that are used internally to generate the necessary CSS code for your website. However sometimes you may want to override them in a different way than the design settings offer. This is where the "Custom SCSS variables" field comes in handy:

$defaultLineHeight: 1.5rem;
Hint

You can also use the global CSS variables. A full list of available variables is described in the Style presets section.

Script settings

Should you need to add any extra JS to your website, in this section you can include it as a local file or as an inline script, which will be included in the <head> section. Please note that the selected local files will be bundled in one bigger JS file with other scripts.

Include custom JS using local files or inline code.