Skip to main content
Edit page
Print whole chapter
Previous page
Next page

Customization

CSS customization

How to define colors, fonts and your own CSS is explained on the page Colors and fonts.

JavaScript customization

For your own JavaScript, it is best to create a separate file and include it in the theme.

Placing elements with your own insert tag

Under MATE Elements you find articles that you can include anywhere on the website with an insert tag. In the back end, go to Articles and scroll all the way down.

In the article settings (wrench icon) you can select the matching Theme Helper Tag under Template settings (see image 2). If you use several website roots with the MATE theme in one Contao installation, you can also select the desired page under Page name.

You then include the article with an insert tag in an HTML element or a template, e.g.:

{{theme::content::MATE02/01}}

The first number stands for the type (Header, Modules or Footer) and the second number for the Theme Helper Tag in the article.

How to create your own Theme Helper Tags is explained in the Theme Helper documentation.

Image 1: Articles under MATE Elements

Image 2: Selecting the Theme Helper Tag in the article

Image 3: Including the article via the Theme Helper Tag

Customizing the header

You find the header content in the articles under MATE Elements – 01 Header. In the back end, open the menu item Articles and scroll all the way down.

  • Opening hours, phone number and email including icons are included in the module Header / Top.
  • Logo, navigation and search are loaded via the module Navigation / Hauptnavigation.

You can replace the logo in the article 01/04 Logo. It contains two logos: the second logo appears when the navigation gets a green background while scrolling. This second logo must have the CSS class fixed-nav.

The footer content is in the articles under MATE Elements – 05 Footer. You find them in the back end under Articles (at the very bottom).

They are included – just like the newsletter box (see Theme elements) – via the module Footer.

Helpful videos (German)

Introductory Contao 4 tutorial

Basic settings in Contao