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

Colors & Fonts

Colors and fonts

After installing the theme, you find the SCSS files in the file manager under the path mate/sass.

Depending on the installed theme version, there are two ways to make your own customizations:

Older theme versions: You use the files

custom.scss (for SCSS and CSS)
_custom_colors.scss (to change the base colors and choose a color scheme)
_custom_variables.scss (for more detailed adjustments such as fonts or colors of individual elements)

To change a variable, remove the comment characters (slashes) in front of the line in the respective file.

Newer theme versions: As of the latest version there are no SCSS variables anymore, only CSS variables. In addition, _custom_colors.scss was merged into _custom_variables.scss – so you only find one file named _custom_variables.scss. There you can adjust all color and other variables. Here, too, you have to uncomment the lines to activate changes.

In both cases you can still add your own SCSS or CSS in custom.scss.

Tip

If the SCSS file was not edited with the Contao editor but uploaded with an FTP program, you have to purge the script cache under System maintenance in the Contao back end and, if necessary, reload the page with Ctrl + F5.

Note

Do not rename the theme folder mate in the file manager, otherwise the SCSS files will no longer be loaded. You do not have to include the files in the page layout yourself, the theme already loads them automatically.

Color schemes

By default the MATE theme comes with a light layout and a green primary color. You can also choose other color schemes:

Light color scheme / green primary color
Light color scheme / blue primary color
Light color scheme / red primary color
Light color scheme / yellow primary color
Dark color scheme

All of the color schemes above are adjusted for high contrast to ensure good readability and accessibility.

In addition there is a green, blue, yellow and dark color scheme that is not adjusted for high contrast. These come from an earlier theme version and are still included for backward compatibility.

To switch to a different color scheme, uncomment the corresponding line under Colour Schemes in _custom_variables.scss (or _custom_colors.scss in the older theme version) by removing the slashes. You may need to reload the page with Ctrl + F5 for the change to take effect.

@import 'mate_color_schemes/mate_green_colors_contrast';
//@import 'mate_color_schemes/mate_dark_colors_contrast';
//@import 'mate_color_schemes/mate_blue_colors_contrast';
//@import 'mate_color_schemes/mate_yellow_colors_contrast';
//@import 'mate_color_schemes/mate_red_colors_contrast';

//@import 'mate_color_schemes/mate_dark_colors';
//@import 'mate_color_schemes/mate_blue_colors';
//@import 'mate_color_schemes/mate_yellow_colors';

If you want to use several color schemes on one website, follow this guide.

Variables

Important note If you use the latest version of the MATE theme, you may wonder where _custom_colors.scss has gone. Don’t worry: as of MATE version 3.5.0, a new installation of the MATE theme only has _custom_variables.scss, which now contains all color and variable definitions.

What this means for you:

v2 (new installation from version 3.5.0): A new installation of the theme only has _custom_variables.scss with all color and variable settings. Use CSS variables for your customizations.
v1 (version older than 3.5.0 / update from a version older than 3.5.0): If you updated the MATE theme or installed a version older than 3.5.0, both _custom_variables.scss and _custom_colors.scss remain. Use SCSS variables for your customizations.

Tip

ℹ️ How do I update my existing installation to the new version with CSS variables? As of version 3.5.0 the MATE theme was thoroughly adapted for accessibility. If you want to use all current and future features, you should switch to the new version. You find a detailed guide here: Update to CSS variables.

In our theme you can adjust many styles via CSS variables. They are already prepared in the stylesheet, but commented out by default (with //). To activate or override a variable, simply remove the // at the beginning of the line.

📁 Where to find the variables You find the file for adjusting the variables in the file manager under mate/sass/_custom_variables.scss.

✅ Example: activating a variable

// Vorher (nicht aktiv):
//--mateColor2: #86af49;

// Nachher (aktiv):
--mateColor2: #86af49;

🔧 The most important CSS variables Here is an overview of the most important CSS variables that you can adjust in mate/sass/_custom_variables.scss.

Variable	Meaning
`--mateColor1`	Primary color, light shade
`--mateColor2`	Primary color
`--mateColor3`	Primary color, dark shade
`--mateColor4`	Secondary color
`--mateColor6`	Secondary color, light shade

`--mateColorWhite`	White
`--mateColorBlack`	Black
`--mateColorGreyLight`	Light grey
`--mateColorGreyDark`	Dark grey
`--pageBackground`	Background color of the website

`--primary-text-color`	Primary text color
`--secondary-text-color`	Secondary text color
`--mateColor2-text-color`	Text in the primary color – e.g. for links or headlines on a light background
`--mateColor3-text-color`	Text in the dark shade of the primary color – e.g. for links or headlines on a light background
`--mateColor4-text-color`	Text in the secondary color – e.g. for links or headlines on a light background

`--boxes-background`	Background color of boxes (e.g. teaser, contact, news, event, form, breadcrumbs)
`--boxes-text-color`	Text color in boxes (e.g. teaser, contact, news, event, form, breadcrumbs)

`--rgba-mateColor2`	Primary color as an rgb value
`--rgba-boxes-background`	Box background as an rgb value

Variables in _custom_colors.scss

Base colors:

$mateColor1: Primary color, light shade $mateColor2: Primary color $mateColor3: Primary color, dark shade $mateColor4: Secondary color $mateColor6: Secondary color, light shade

$mateColorWhite: White $mateColorBlack: Black $mateColorGreyLight: Light grey $mateColorGreyDark: Dark grey $pageBackground: Background color of the website

Text colors:

$primary-text-color: Primary text color $secondary-text-color: Secondary text color

Boxes:

$boxes-background: Background color of the boxes (e.g. content box, teaser box, news, events, login, newsletter, etc.) $boxes-text-color: Font color of the boxes (e.g. content box, teaser box, news, events, login, newsletter, etc.)

Content box:

$contentbox-first-background: Background color of the first content box $contentbox-second-background: Background color of the second content box

Adding a font

If you want to use your own font, you can include it at the very top of _custom_variables.scss.

🔗 Recommendation: fonts via Google Webfonts Helper

A great way to include a font quickly and easily is the site:

👉 Google Webfonts Helper

There you can:

choose a font from the Google Fonts library,
select the font styles you need,
download a ZIP file with the font files,
and generate the matching @font-face CSS code right away.
Important: Under “Customize Folder prefix”, enter the path to your fonts folder, e.g. /files/mate/fonts/.

📄 Example: adding the CSS to _custom_variables.scss Copy the generated CSS code from the website (e.g. for the font “Ubuntu”) and paste it at the very top of _custom_variables.scss:

/* ubuntu-regular - latin */
@font-face {
  font-display: swap;
  font-family: 'Ubuntu';
  font-style: normal;
  font-weight: 400;
  src: url('/files/mate/fonts/ubuntu-v20-latin-regular.woff2') format('woff2');
}

Then assign the font in the CSS variables in _custom_variables.scss as follows:

:root {
  --font1: 'Ubuntu'; // Text light
  --font2: 'Ubuntu'; // Überschriften
  --font3: 'Ubuntu'; // Text normal
}

  $font1: 'Ubuntu'; // Text light
  $font2: 'Ubuntu'; // Überschriften
  $font3: 'Ubuntu'; // Text normal

Examples of changing colors

To change the navigation colors, edit the variables under the heading Header and Navigation in _custom_variables.scss. To activate a variable, simply remove the // at the beginning of the line.

Example: The following example changes the colors and backgrounds of the main navigation.

:root {
    --navbar-bg-color: #437d4f; // Hintergrundfarbe der Navigation
    --navbar-color: #fff; // Schriftfarbe der Links
    --navbar-active-color: #000; // Schriftfarbe des aktiven Menüpunkts und bei Mouse-Hover
    --navbar-dropdown-hover-bg-color: lighten(#437d4f, 10%); // Hintergrundfarbe des Dropdown-Menü bei Mouse-Hover
    --navbar-dropdown-hover-color: #000; // Schriftfarbe des Dropdown-Menü bei Mouse-Hover
    --navbar-dropdown-bg: #437d4f; // Hintergrundfarbe des Dropdown-Menü
    --navbar-dropdown-color: #fff; // Schriftfarbe der Links im Dropdown-Menü
    --navbar-search-color: #fff; // Farbe des Suchicons
}

$navbar-bg-color: #437d4f; // Hintergrundfarbe der Navigation
$navbar-color: #fff; // Schriftfarbe der Links
$navbar-active-color: #000; // Schriftfarbe des aktiven Menüpunkts und bei Mouse-Hover
$navbar-dropdown-hover-bg-color: lighten(#437d4f, 10%); // Hintergrundfarbe des Dropdown-Menü bei Mouse-Hover
$navbar-dropdown-hover-color: #000; // Schriftfarbe des Dropdown-Menü bei Mouse-Hover
$navbar-dropdown-bg: #437d4f; // Hintergrundfarbe des Dropdown-Menü
$navbar-dropdown-color: #fff; // Schriftfarbe der Links im Dropdown-Menü
$navbar-search-color: #fff; // Farbe des Suchicons

The following example changes the colors and backgrounds of the main navigation when scrolling down (when the navigation sticks to the top of the screen).

:root {
    --navbar-stuck-bg-color: rgba(#437d4f, .8); // Hintergrundfarbe der Navigation
    --navbar-stuck-color: #fff; // Schriftfarbe der Links
    --navbar-stuck-active-color: #000; // Schriftfarbe des aktiven Menüpunkts und bei Mouse-Hover
    --navbar-stuck-dropdown-hover-bg-color: lighten(#437d4f, 10%); // Hintergrundfarbe des Dropdown-Menü bei Mouse-Hover
    --navbar-stuck-dropdown-hover-color: #000; // Schriftfarbe des Dropdown-Menü bei Mouse-Hover
    --navbar-stuck-dropdown-color: #fff; // Hintergrundfarbe des Dropdown-Menü
    --navbar-stuck-dropdown-bg: #437d4f; // Schriftfarbe der Links im Dropdown-Menü
    --navbar-stuck-search-color: #fff; // Farbe des Suchicons
}

$navbar-stuck-bg-color: rgba(#437d4f, .8); // Hintergrundfarbe der Navigation
$navbar-stuck-color: #fff; // Schriftfarbe der Links
$navbar-stuck-active-color: #000; // Schriftfarbe des aktiven Menüpunkts und bei Mouse-Hover
$navbar-stuck-dropdown-hover-bg-color: lighten(#437d4f, 10%); // Hintergrundfarbe des Dropdown-Menü bei Mouse-Hover
$navbar-stuck-dropdown-hover-color: #000; // Schriftfarbe des Dropdown-Menü bei Mouse-Hover
$navbar-stuck-dropdown-color: #fff; // Hintergrundfarbe des Dropdown-Menü
$navbar-stuck-dropdown-bg: #437d4f; // Schriftfarbe der Links im Dropdown-Menü
$navbar-stuck-search-color: #fff; // Farbe des Suchicons

The following example changes the colors and backgrounds of the mobile navigation.

:root {
    --navbar-mobile-menu-icon-color: #fff; // Farbe des mobilen Burgermenu-Icons
    --navbar-stuck-mobile-menu-icon-color: #fff; // Farbe des mobilen Burgermenu-Icons, wenn die Navigation am oberen Bildschirmrand stehen bleibt
    --navbar-mobile-background: #437d4f; // Hintergrundfarbe
    --navbar-mobile-color: #fff; // Schriftfarbe der Links
    --navbar-mobile-dropdown-background: lighten(#437d4f, 10%); // Hintergrundfarbe der weiteren Menüebenen
    --navbar-mobile-dropdown-color: #fff; // Schriftfarbe der weiteren Menüebenen
}

$navbar-mobile-menu-icon-color: #fff; // Farbe des mobilen Burgermenu-Icons
$navbar-stuck-mobile-menu-icon-color: #fff; // Farbe des mobilen Burgermenu-Icons, wenn die Navigation am oberen Bildschirmrand stehen bleibt
$navbar-mobile-background: #437d4f; // Hintergrundfarbe
$navbar-mobile-color: #fff; // Schriftfarbe der Links
$navbar-mobile-dropdown-background: lighten(#437d4f, 10%); // Hintergrundfarbe der weiteren Menüebenen
$navbar-mobile-dropdown-color: #fff; // Schriftfarbe der weiteren Menüebenen

To change the footer colors, edit the variables under the heading Footer in _custom_variables.scss. Remove the // at the beginning of the line to activate the variable.

💡 Note: Some variables are only available from MATE version 2.11.0. It is best to update the theme to the latest version to be able to use all options.

:root {
    --footer-newsletter-bg-color: #f1f1f1; // Hintergrundfarbe des Newsletter-Bereich
    --footer-newsletter-color: #000; // Schriftfarbe des Newsletter-Bereich
    --footer-newsletter-button-background: #b50000; // Hintergrundfarbe des Buttons im Newsletter-Bereich
    --footer-newsletter-button-background-hover: lighten(#b50000,10%); // Hintergrundfarbe des Buttons bei Mouseover im Newsletter-Bereich
    --footer-input-bg-color: rgba(#b50000,.3); // Hintergrundfarbe des Eingabefelds im Newsletter-Bereich
    --footer-input-color: #000; // Schriftfarbe des Eingabefelds im Newsletter-Bereich
    
    --footer-primary-bg-color: #dedede; // Hintergrundfarbe im Footer-Bereich unter dem Newsletter
    --footer-primary-color: #000; // Schriftfarbe im Footer-Bereich unter dem Newsletter
    --footer-primary-link-color: #b50000; // Linkfarbe im Footer-Bereich unter dem Newsletter
    --footer-primary-link-color-hover: lighten(#b50000,10%); // Linkfarbe bei Mouseover im Footer-Bereich unter dem Newsletter
    --footer-headline-border-color: #000; // Farbe der Rahmen unter den Überschriften
    --footer-news-events-time-color: #7d7d7d; // Schriftfarbe des Datum bei News-/Eventsbeiträgen
    
    --footer-secondary-bg-color: #b50000; // Hintergrundfarbe des Copyright-Bereich
    --footer-secondary-color: #fff; // Schriftfarbe im Copyright-Bereich
    --footer-secondary-link-color: #f7f7f7; // Linkfarbe im Copyright-Bereich
    --footer-secondary-link-color-hover: darken(#f7f7f7,10%); // Linkfarbe bei Mouseover im Copyright-Bereich
}

$footer-newsletter-bg-color: #f1f1f1; // Hintergrundfarbe des Newsletter-Bereich
$footer-newsletter-color: #000; // Schriftfarbe des Newsletter-Bereich
$footer-newsletter-button-background: #b50000; // Hintergrundfarbe des Buttons im Newsletter-Bereich
$footer-newsletter-button-background-hover: lighten(#b50000,10%); // Hintergrundfarbe des Buttons bei Mouseover im Newsletter-Bereich
$footer-input-bg-color: rgba(#b50000,.3); // Hintergrundfarbe des Eingabefelds im Newsletter-Bereich
$footer-input-color: #000; // Schriftfarbe des Eingabefelds im Newsletter-Bereich

$footer-primary-bg-color: #dedede; // Hintergrundfarbe im Footer-Bereich unter dem Newsletter
$footer-primary-color: #000; // Schriftfarbe im Footer-Bereich unter dem Newsletter
$footer-primary-link-color: #b50000; // Linkfarbe im Footer-Bereich unter dem Newsletter
$footer-primary-link-color-hover: lighten(#b50000,10%); // Linkfarbe bei Mouseover im Footer-Bereich unter dem Newsletter
$footer-headline-border-color: #000; // Farbe der Rahmen unter den Überschriften
$footer-news-events-time-color: #7d7d7d; // Schriftfarbe des Datum bei News-/Eventsbeiträgen

$footer-secondary-bg-color: #b50000; // Hintergrundfarbe des Copyright-Bereich
$footer-secondary-color: #fff; // Schriftfarbe im Copyright-Bereich
$footer-secondary-link-color: #f7f7f7; // Linkfarbe im Copyright-Bereich
$footer-secondary-link-color-hover: darken(#f7f7f7,10%); // Linkfarbe bei Mouseover im Copyright-Bereich

Changing the colors of content boxes

To change the colors of content boxes (e.g. teaser boxes, news, events), edit the variables in _custom_colors.scss. Remove the // at the beginning of the line to activate the variable.

:root {
    --boxes-background: #333; // Hintergrundfarbe
    --boxes-text-color: #fff; // Schriftfarbe
}

$boxes-background: #333; // Hintergrundfarbe
$boxes-text-color: #fff; // Schriftfarbe

Changing the colors of the content box

To change the content box, edit the variables in the Content Box section of _custom_variables.scss. Simply remove the // at the beginning of the line to activate and adjust the variable.

:root {
    --contentbox-first-color: #fff; // Schriftfarbe der 1. Content Box
    --contentbox-second-color: #fff; // Schriftfarbe der 2. Content Box
    --contentbox-first-background: #2d2d2d; // Hintergrundfarbe der 1. Content Box
    --contentbox-second-background: #191919; // Hintergrundfarbe der 2. Content Box
}

$contentbox-first-color: #fff; // Schriftfarbe der 1. Content Box
$contentbox-second-color: #fff; // Schriftfarbe der 2. Content Box
$contentbox-first-background: #2d2d2d; // Hintergrundfarbe der 1. Content Box
$contentbox-second-background: #191919; // Hintergrundfarbe der 2. Content Box

Layouts

All possible layouts are already created under Themes - Page layouts. Example integrations can be found on the Layouts page. You select the layout in the page under Layout settings.

One-column layout

For the one-column layout, select the page template fe_page_mate and enter the body class default-col. You set the page template and the body class in the page layout under Expert settings.

Layout with left column

For the layout with a left column, select the page template fe_page_mate_left and enter the body class left-col.

Layout with right column

For the layout with a right column, select the page template fe_page_mate_right and enter the body class right-col.

Layout with left and right column

For the layout with a left and right column, select the page template fe_page_mate_leftright and enter the body class left-right-col.

Multidomain

If you want to use several domains with the MATE theme for Contao and each should have its own custom.scss, _custom_colors.scss and _custom_variables.scss, you need a few adjustments. This guide shows you how. You should have at least MATE theme version 2.9.1 installed.

Note

As of Contao 4.12 the publicly accessible subfolder was renamed from /web to /public. If your installation has a /web directory, use web instead of public in the following code examples.

Important note

If you use the latest version of the MATE theme, you may wonder where _custom_colors.scss has gone. Don’t worry: as of MATE version 3.5.0, a new installation of the MATE theme only has _custom_variables.scss, which now contains all color and variable definitions.

What this means for you:

v1 (update from a version older than 3.5.0): If you updated the MATE theme, both _custom_variables.scss and _custom_colors.scss remain.
v2 (new installation from version 3.5.0): A new installation of the theme only has _custom_variables.scss with all color and variable settings.

1) Create the SCSS files

Create a folder in the file manager under mate/sass (e.g. domain2). Copy the files custom.scss and _custom_variables.scss into this folder.

In _custom_variables.scss, adjust the path of the color schemes as follows.

//@import '../../../../public/bundles/contaothemesnetmatetheme/sass/v2/mate_color_schemes/mate_green_colors_contrast';
@import '../../../../public/bundles/contaothemesnetmatetheme/sass/v2/mate_color_schemes/mate_dark_colors_contrast';
//@import '../../../../public/bundles/contaothemesnetmatetheme/sass/v2/mate_color_schemes/mate_blue_colors_contrast';
//@import '../../../../public/bundles/contaothemesnetmatetheme/sass/v2/mate_color_schemes/mate_yellow_colors_contrast';
//@import '../../../../public/bundles/contaothemesnetmatetheme/sass/v2/mate_color_schemes/mate_red_colors_contrast';

//@import '../../../../public/bundles/contaothemesnetmatetheme/sass/v2/mate_color_schemes/mate_dark_colors';
//@import '../../../../public/bundles/contaothemesnetmatetheme/sass/v2/mate_color_schemes/mate_blue_colors';
//@import '../../../../public/bundles/contaothemesnetmatetheme/sass/v2/mate_color_schemes/mate_yellow_colors';

/* ============================= */
/*     Automatic Dark Mode       */
/* ============================= */

//@import '../../../../public/bundles/contaothemesnetmatetheme/sass/v2/mate_color_schemes/mate_dark_mode';

Create a folder in the file manager under mate/sass (e.g. domain2). Copy the files custom.scss, _custom_colors.scss and _custom_variables.scss into this folder.

In _custom_colors.scss, adjust the path of the color schemes as follows.

//@import '../../../../public/bundles/contaothemesnetmatetheme/sass/mate_color_schemes/mate_dark_colors';
//@import '../../../../public/bundles/contaothemesnetmatetheme/sass/mate_color_schemes/mate_blue_colors';
//@import '../../../../public/bundles/contaothemesnetmatetheme/sass/mate_color_schemes/mate_yellow_colors';

Create a folder in the file manager under mate/sass (e.g. domain2). Copy the files custom.scss, _custom_colors.scss and _custom_variables.scss into this folder.

In _custom_colors.scss, adjust the path of the color schemes as follows.

//@import '../../../../public/bundles/matetheme/sass/mate_color_schemes/mate_dark_colors';
//@import '../../../../public/bundles/matetheme/sass/mate_color_schemes/mate_blue_colors';
//@import '../../../../public/bundles/matetheme/sass/mate_color_schemes/mate_yellow_colors';

In the same folder, also create a file mate.scss with the following content. If you installed the MATE theme in a local development environment, the file must be named mate_win.scss.

// variables;
@import "../../../../public/bundles/contaothemesnetmatetheme/sass/v2/_mate_variables";
@import "_custom_variables";

// color
@import "../../../../public/bundles/contaothemesnetmatetheme/sass/components/color-variables";
@import "../../../../public/bundles/contaothemesnetmatetheme/sass/components/color-classes";

// variables;
@import "../../../../public/bundles/contaothemesnetmatetheme/sass/components/variables";

// reset
@import "../../../../public/bundles/contaothemesnetmatetheme/sass/components/normalize";

// components
@import "../../../../public/bundles/contaothemesnetmatetheme/sass/components/global";
@import "../../../../public/bundles/contaothemesnetmatetheme/sass/components/badges";
@import "../../../../public/bundles/contaothemesnetmatetheme/sass/components/icons-material-design";
@import "../../../../public/bundles/contaothemesnetmatetheme/sass/components/grid";
@import "../../../../public/bundles/contaothemesnetmatetheme/sass/components/navbar";
@import "../../../../public/bundles/contaothemesnetmatetheme/sass/components/typography";
@import "../../../../public/bundles/contaothemesnetmatetheme/sass/components/transitions";
@import "../../../../public/bundles/contaothemesnetmatetheme/sass/components/cards";
@import "../../../../public/bundles/contaothemesnetmatetheme/sass/components/toast";
@import "../../../../public/bundles/contaothemesnetmatetheme/sass/components/tabs";
@import "../../../../public/bundles/contaothemesnetmatetheme/sass/components/tooltip";
@import "../../../../public/bundles/contaothemesnetmatetheme/sass/components/buttons";
@import "../../../../public/bundles/contaothemesnetmatetheme/sass/components/dropdown";
@import "../../../../public/bundles/contaothemesnetmatetheme/sass/components/waves";
@import "../../../../public/bundles/contaothemesnetmatetheme/sass/components/modal";
@import "../../../../public/bundles/contaothemesnetmatetheme/sass/components/collapsible";
@import "../../../../public/bundles/contaothemesnetmatetheme/sass/components/chips";
@import "../../../../public/bundles/contaothemesnetmatetheme/sass/components/materialbox";
@import "../../../../public/bundles/contaothemesnetmatetheme/sass/components/forms/forms";
@import "../../../../public/bundles/contaothemesnetmatetheme/sass/components/table_of_contents";
@import "../../../../public/bundles/contaothemesnetmatetheme/sass/components/sidenav";
@import "../../../../public/bundles/contaothemesnetmatetheme/sass/components/preloader";
@import "../../../../public/bundles/contaothemesnetmatetheme/sass/components/slider";
@import "../../../../public/bundles/contaothemesnetmatetheme/sass/components/carousel";
@import "../../../../public/bundles/contaothemesnetmatetheme/sass/components/tapTarget";
@import "../../../../public/bundles/contaothemesnetmatetheme/sass/components/pulse";
@import "../../../../public/bundles/contaothemesnetmatetheme/sass/components/datepicker";
@import "../../../../public/bundles/contaothemesnetmatetheme/sass/components/timepicker";

// theme and custom styles
@import '../../../../public/bundles/contaothemesnetmatetheme/sass/v2/style';
@import 'custom';

// variables;
@import "../../../../public/bundles/contaothemesnetmatetheme/sass/_mate_colors";
@import "_custom_colors";
@import "../../../../public/bundles/contaothemesnetmatetheme/sass/_mate_variables";
@import "_custom_variables";

// color
@import "../../../../public/bundles/contaothemesnetmatetheme/sass/components/color-variables";
@import "../../../../public/bundles/contaothemesnetmatetheme/sass/components/color-classes";

// variables;
@import "../../../../public/bundles/contaothemesnetmatetheme/sass/components/variables";

// reset
@import "../../../../public/bundles/contaothemesnetmatetheme/sass/components/normalize";

// components
@import "../../../../public/bundles/contaothemesnetmatetheme/sass/components/global";
@import "../../../../public/bundles/contaothemesnetmatetheme/sass/components/badges";
@import "../../../../public/bundles/contaothemesnetmatetheme/sass/components/icons-material-design";
@import "../../../../public/bundles/contaothemesnetmatetheme/sass/components/grid";
@import "../../../../public/bundles/contaothemesnetmatetheme/sass/components/navbar";
@import "../../../../public/bundles/contaothemesnetmatetheme/sass/components/typography";
@import "../../../../public/bundles/contaothemesnetmatetheme/sass/components/transitions";
@import "../../../../public/bundles/contaothemesnetmatetheme/sass/components/cards";
@import "../../../../public/bundles/contaothemesnetmatetheme/sass/components/toast";
@import "../../../../public/bundles/contaothemesnetmatetheme/sass/components/tabs";
@import "../../../../public/bundles/contaothemesnetmatetheme/sass/components/tooltip";
@import "../../../../public/bundles/contaothemesnetmatetheme/sass/components/buttons";
@import "../../../../public/bundles/contaothemesnetmatetheme/sass/components/dropdown";
@import "../../../../public/bundles/contaothemesnetmatetheme/sass/components/waves";
@import "../../../../public/bundles/contaothemesnetmatetheme/sass/components/modal";
@import "../../../../public/bundles/contaothemesnetmatetheme/sass/components/collapsible";
@import "../../../../public/bundles/contaothemesnetmatetheme/sass/components/chips";
@import "../../../../public/bundles/contaothemesnetmatetheme/sass/components/materialbox";
@import "../../../../public/bundles/contaothemesnetmatetheme/sass/components/forms/forms";
@import "../../../../public/bundles/contaothemesnetmatetheme/sass/components/table_of_contents";
@import "../../../../public/bundles/contaothemesnetmatetheme/sass/components/sidenav";
@import "../../../../public/bundles/contaothemesnetmatetheme/sass/components/preloader";
@import "../../../../public/bundles/contaothemesnetmatetheme/sass/components/slider";
@import "../../../../public/bundles/contaothemesnetmatetheme/sass/components/carousel";
@import "../../../../public/bundles/contaothemesnetmatetheme/sass/components/tapTarget";
@import "../../../../public/bundles/contaothemesnetmatetheme/sass/components/pulse";
@import "../../../../public/bundles/contaothemesnetmatetheme/sass/components/datepicker";
@import "../../../../public/bundles/contaothemesnetmatetheme/sass/components/timepicker";

// theme and custom styles
@import '../../../../public/bundles/contaothemesnetmatetheme/sass/style';
@import 'custom';

// variables;
@import "../../../../public/bundles/matetheme/sass/_mate_colors";
@import "_custom_colors";
@import "../../../../public/bundles/matetheme/sass/_mate_variables";
@import "_custom_variables";

// color
@import "../../../../public/bundles/matetheme/sass/components/color-variables";
@import "../../../../public/bundles/matetheme/sass/components/color-classes";

// variables;
@import "../../../../public/bundles/matetheme/sass/components/variables";

// reset
@import "../../../../public/bundles/matetheme/sass/components/normalize";

// components
@import "../../../../public/bundles/matetheme/sass/components/global";
@import "../../../../public/bundles/matetheme/sass/components/badges";
@import "../../../../public/bundles/matetheme/sass/components/icons-material-design";
@import "../../../../public/bundles/matetheme/sass/components/grid";
@import "../../../../public/bundles/matetheme/sass/components/navbar";
@import "../../../../public/bundles/matetheme/sass/components/typography";
@import "../../../../public/bundles/matetheme/sass/components/transitions";
@import "../../../../public/bundles/matetheme/sass/components/cards";
@import "../../../../public/bundles/matetheme/sass/components/toast";
@import "../../../../public/bundles/matetheme/sass/components/tabs";
@import "../../../../public/bundles/matetheme/sass/components/tooltip";
@import "../../../../public/bundles/matetheme/sass/components/buttons";
@import "../../../../public/bundles/matetheme/sass/components/dropdown";
@import "../../../../public/bundles/matetheme/sass/components/waves";
@import "../../../../public/bundles/matetheme/sass/components/modal";
@import "../../../../public/bundles/matetheme/sass/components/collapsible";
@import "../../../../public/bundles/matetheme/sass/components/chips";
@import "../../../../public/bundles/matetheme/sass/components/materialbox";
@import "../../../../public/bundles/matetheme/sass/components/forms/forms";
@import "../../../../public/bundles/matetheme/sass/components/table_of_contents";
@import "../../../../public/bundles/matetheme/sass/components/sidenav";
@import "../../../../public/bundles/matetheme/sass/components/preloader";
@import "../../../../public/bundles/matetheme/sass/components/slider";
@import "../../../../public/bundles/matetheme/sass/components/carousel";
@import "../../../../public/bundles/matetheme/sass/components/tapTarget";
@import "../../../../public/bundles/matetheme/sass/components/pulse";
@import "../../../../public/bundles/matetheme/sass/components/datepicker";
@import "../../../../public/bundles/matetheme/sass/components/timepicker";

// theme and custom styles
@import '../../../../public/bundles/matetheme/sass/style';
@import 'custom';

2) Create a template

Under Templates, create a new template fe_page_mate.html5 and rename it (e.g. fe_page_mate_domain2.html5).

In line 15, add the newly created folder from the file manager to getCombinedStylesheet().

<link rel="stylesheet" type="text/css" media="all" href="<?= ContaoThemesNet\MateThemeBundle\ThemeUtils::getCombinedStylesheet('domain2'); ?>">

3) Create a layout

Go to Themes and Edit the page layouts of the theme (4th icon from the right) and duplicate any layout (e.g. default). You can name it e.g. “default - domain2”. Edit the layout and select the fe_page template you just created under Expert settings (at the very bottom) in Page template.

4) Assign the layout to the page

Finally, assign the layout to a page.

FAQ

Images

Why is an image not displayed?

The folder in the file manager may not be set to public. You can check this by editing the folder. Public must be ticked, otherwise the image is not displayed in the front end.

Why doesn’t the large view of an image open in a lightbox when I click it?

The theme has to load jQuery and the jQuery template j_colorbox. You can edit the layout in the back end under Themes via the third-to-last icon Edit the page layouts of theme ID 1.

Why are animated GIFs not displayed?

For animated GIFs, do not set an image size in the image settings, otherwise the animation is lost.

Why are some images not displayed? (WEBP support)

If newer browsers try to load a WEBP image and it is not supported, an error may occur.

The error message may look something like this:

request.CRITICAL: Uncaught PHP Exception RuntimeException: "Image format "webp" is not supported in Imagine\Imagick\Imagine on this environment. Consider removing this format from contao.image.valid_extensions or switch the contao.image.imagine_service to an implementation that supports it.

Possible solutions:

#1 Update Imagine or have your host do it (use the latest version)

#2 Use an alternative image processing service

You can specify a different image processing service in config.yml; afterwards the cache has to be cleared. This often solves the problem already. If WEBP is supported, you should also be able to select it in the image sizes.

contao:
    image:
        imagine_service: 'contao.image.imagine.gd'

contao:
    image:
        imagine_service: 'contao.image.imagine.gmagick'

#3 Remove WEBP from the allowed file extensions

Add the following to config.yml and then clear the cache.

contao:
    image:
        valid_extensions:  
            - jpg
            - jpeg
            - gif
            - png
            - tif
            - tiff
            - bmp
            - svg
            - svgz

#4 Adjust the .htaccess

<IfModule mod_mime.c>
   AddType image/webp .webp
</IfModule>

Content elements

How do I nest accordions?

Duplicate the template j_accordion with the following content:

<script src="<?= $this->asset('js/jquery-ui.min.js', 'contao-components/jquery-ui') ?>"></script>
<script>
  jQuery(function($) {
    $(document).accordion({
      // Put custom options here
      heightStyle: 'content',
      header: '.toggler',
      collapsible: true,
      create: function(event, ui) {
        ui.header.addClass('active');
        $('.toggler').attr('tabindex', 0);
      },
      activate: function(event, ui) {
        ui.newHeader.addClass('active');
        ui.oldHeader.removeClass('active');
        $('.toggler').attr('tabindex', 0);
      }
    });
$(&#39;.toggler-inner&#39;).parent().accordion({
  // Put custom options here
  heightStyle: &#39;content&#39;,
  header: &#39;.toggler-inner&#39;,
  collapsible: true,
  active: false,
  create: function(event, ui) {
    ui.header.addClass(&#39;active&#39;);
    $(&#39;.toggler-inner&#39;).attr(&#39;tabindex&#39;, 0);
  },
  activate: function(event, ui) {
    ui.newHeader.addClass(&#39;active&#39;);
    ui.oldHeader.removeClass(&#39;active&#39;);
    $(&#39;.toggler-inner&#39;).attr(&#39;tabindex&#39;, 0);
  }
});

$(&#39;.toggler-outer&#39;).parent().accordion({
  // Put custom options here
  heightStyle: &#39;content&#39;,
  header: &#39;.toggler-outer&#39;,
  collapsible: true,
  //active: false,
  create: function(event, ui) {
    ui.header.addClass(&#39;active&#39;);
    $(&#39;.toggler-outer&#39;).attr(&#39;tabindex&#39;, 0);
  },
  activate: function(event, ui) {
    ui.newHeader.addClass(&#39;active&#39;);
    ui.oldHeader.removeClass(&#39;active&#39;);
    $(&#39;.toggler-outer&#39;).attr(&#39;tabindex&#39;, 0);
  }
});
});
</script>

With active: false or active: true you control whether the accordions are closed or open by default.

Add the class toggler-outer under class names to the outer accordions and the class toggler-inner to the inner accordions.

Outer accordions:

Inner accordions:

Example:

How do I keep all accordions closed?

Go to the menu item Templates and duplicate the template j_accordion.html5. Add the following line to the parameters:

active: false,

The template should then look like this:

<script src="<?= $this->asset('js/jquery-ui.min.js', 'contao-components/jquery-ui') ?>"></script>
<script>
  jQuery(function($) {
    $(document).accordion({
      // Put custom options here
      heightStyle: 'content',
      header: '.toggler',
      collapsible: true,
      active: false,
      create: function(event, ui) {
        ui.header.addClass('active');
        $('.toggler').attr('tabindex', 0);
      },
      activate: function(event, ui) {
        ui.newHeader.addClass('active');
        ui.oldHeader.removeClass('active');
        $('.toggler').attr('tabindex', 0);
      }
    });
  });
</script>

How do I hide the “More” button in the news slider on the home page if the news item has no content?

Adjust the template news_mate_slider.html5.

Replace the code in line 16, where the headline is set, with the following line:

<h2><?php if($this->hasText) { echo $this->linkHeadline; } else { echo $this->headline; } ?></h2>

In line 22, remove the following part: || $this->hasTeaser.

To display the headline in white as well, add the following lines to custom.scss:

.slider.mod_newslist h2 {
  color: #fff;
}

How do I change the font sizes in the news slider navigation?

You can do this with an adjustment in custom.scss:

#wrapper .slider.mod_newslist .indicators .indicator-item .subheadline {
  font-size: 16px;
}
#wrapper .slider.mod_newslist .indicators .indicator-item .headline {
font-size: 16px;
}

How do I link the image in the news slider?

Edit the template news_mate_slider.html5 and replace the following line (line 2) …

<div class="img" <?php if ($this->addImage): ?>style="background-image:url('<?= $this->picture['img']['src'] ?>');"<?php endif; ?>></div>`

… with the following lines:

<a href="<?= $this->link ?>" class="img">
  <div <?php if ($this->addImage): ?>style="background-image:url('<?= $this->picture['img']['src'] ?>');"<?php endif; ?>></div>
</a>

Also add some CSS to custom.scss.

#wrapper .slider.mod_newslist .img {
  position: relative;
}
#wrapper .slider.mod_newslist .img div {
position: absolute;
top: 0;
width: 100%;
height: 100%;
left: 0;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}

How do I remove or change the icons of an unordered list?

You can do this with an adjustment in custom.scss.

Remove icons:

.ce_list ul:not(.browser-default) li:before,
.ce_text ul:not(.browser-default) li:before {
  display: none;
}

Change icons:

.ce_list ul:not(.browser-default) li:before,
.ce_text ul:not(.browser-default) li:before {
  content: "+";
}

Forms

How do I customize the date picker?

You can customize the date picker with some JavaScript. For example, create a JS file in the file manager and include it via the page layout.

Example:

jQuery(document).ready(function ($) {
    $('input.datepicker').datepicker({
        selectMonths: true, // Creates a dropdown to control month
        selectYears: '150', // Creates a dropdown of 15 years to control year,
        maxDate: new Date(new Date().getFullYear() + 30, new Date().getMonth(), new Date().getDate()),
        autoClose: true, // Close upon selecting a date,
        format: 'dd.mm.yyyy',
        container: 'div.datepicker',
        firstDay: 1,
        yearRange: [1900, new Date().getFullYear() + 30],
        i18n: {
            nextMonth: 'Nächster Monat',
            previousMonth: 'Vorheriger Monat',
            labelMonthSelect: 'Monat wählen',
            labelYearSelect: 'Jahr wählen',
            months: ['Januar', 'Februar', 'März', 'April', 'Mai', 'Juni', 'Juli', 'August', 'September', 'Oktober', 'November', 'Dezember'],
            monthsShort: ['Jan', 'Feb', 'Mär', 'Apr', 'Mai', 'Jun', 'Jul', 'Aug', 'Sep', 'Okt', 'Nov', 'Dez'],
            weekdays: ['Sonntag', 'Montag', 'Dienstag', 'Mittwoch', 'Donnerstag', 'Freitag', 'Samstag'],
            weekdaysShort: ['So', 'Mo', 'Di', 'Mi', 'Do', 'Fr', 'Sa'],
            weekdaysAbbrev: ['S', 'M', 'D', 'M', 'D', 'F', 'S'],
            today: 'Heute',
            clear: 'Löschen',
            done: 'OK',
            cancel: 'Abbrechen',
            format: 'dd.mm.yyyy'
        },
    });
});

You find all options in the Materialize documentation.

Only Saturday and Sunday selectable

With the function disableDayFn() you can control which days are selectable. With the following example, only Saturdays and Sundays are selectable.

disableDayFn(date) {
    if(date.getDay() === 0 || date.getDay() === 6)
        return false
    else
        return true
}

Complete JavaScript code:

jQuery(document).ready(function ($) {
	$('input.datepicker').datepicker({
        selectMonths: true, // Creates a dropdown to control month
        selectYears: '150', // Creates a dropdown of 15 years to control year,
        maxDate: new Date(new Date().getFullYear() + 30, new Date().getMonth(), new Date().getDate()),
        autoClose: true, // Close upon selecting a date,
        format: 'dd.mm.yyyy',
        container: 'div.datepicker',
        firstDay: 1,
        yearRange: [1900, new Date().getFullYear() + 30],
        i18n: {
            nextMonth: 'Nächster Monat',
            previousMonth: 'Vorheriger Monat',
            labelMonthSelect: 'Monat wählen',
            labelYearSelect: 'Jahr wählen',
            months: ['Januar', 'Februar', 'März', 'April', 'Mai', 'Juni', 'Juli', 'August', 'September', 'Oktober', 'November', 'Dezember'],
            monthsShort: ['Jan', 'Feb', 'Mär', 'Apr', 'Mai', 'Jun', 'Jul', 'Aug', 'Sep', 'Okt', 'Nov', 'Dez'],
            weekdays: ['Sonntag', 'Montag', 'Dienstag', 'Mittwoch', 'Donnerstag', 'Freitag', 'Samstag'],
            weekdaysShort: ['So', 'Mo', 'Di', 'Mi', 'Do', 'Fr', 'Sa'],
            weekdaysAbbrev: ['S', 'M', 'D', 'M', 'D', 'F', 'S'],
            today: 'Heute',
            clear: 'Löschen',
            done: 'OK',
            cancel: 'Abbrechen',
            format: 'dd.mm.yyyy'
        },
        disableDayFn(date) {
            if(date.getDay() === 0 || date.getDay() === 6)
                return false
            else
                return true
        },
    });
});

Only weekdays selectable

To make only weekdays selectable, it is enough to set the option disableWeekends to true.

disableWeekends: true

How do I show the top bar of the header in the mobile view?

With some CSS in custom.scss you can show the bar in the mobile view.

@media (max-width: 767px) {
  .sectionTop {
    display: block;
.inside {
   height: inherit;
   overflow: hidden;
}
}
}

Layout

How do I display a full-width content area in the middle of the content?

To display a full-width content area (e.g. a full-width image), a few template adjustments are necessary.

Adjust fe_page_mate.html5

Edit the template fe_page_mate.html5 and remove the line <div class="container"> and the closing </div> inside <?php $this->block('container'); ?>.

<?php $this->block('container'); ?>
    <?php $this->parent(); ?>
<?php $this->endblock(); ?>

Adjust mod_article.html5

Edit the template mod_article.html5 and insert the following line after the opening <div>, at around line 24: <div class="container">. Before the last closing </div>, insert another </div>. In the line before that you can also add the class fullwidth to set some spacing at the top and bottom with your own CSS.

<div class="<?= $this->class ?> block fullwidth"<?= $this->cssID ?><?php if ($this->style): ?> style="<?= $this->style ?>"<?php endif; ?>>
    <div class="container">
    ...
    </div>
</div>

Create a customized mod_article template

Now duplicate the template mod_article and name it e.g. mod_article_without_container.html5. Then simply remove the two lines you just added.

Adjustments for multi-column layouts

If you use multi-column layouts (with a left/right column), the corresponding templates have to be adjusted as well.

In the templates fe_page_mate_left.html5, fe_page_mate_leftright.html5 and fe_page_mate_right.html5, insert the line <div class="container"> and the closing </div> inside <?php $this->block('container'); ?>.

<?php $this->block('container'); ?>
    <div class="container">
        <?php $this->parent(); ?>
    </div>
<?php $this->endblock(); ?>

Assigning templates in articles

If content should be displayed across the full width, edit the article settings (the wrench icon after the pencil) and assign the article template mod_article_without_container in the template settings.

You would also have to assign the template mod_article_without_container to all articles with the header image.

In addition, all articles under MATE Elements - 01 Header, 02 Modules and 03 Footer must be assigned the template mod_article_without_container.

Custom CSS

To get some more spacing at the top and bottom, edit custom.scss:

#main .mod_article.fullwidth {
	margin-top: 50px;
	margin-bottom: 50px;
}

Example

Can all subfolders of the subpage navigation be expanded automatically?

You can achieve this with the following adjustment in custom.scss.

.subnav .dropdown-content {
    display: block;
    visibility: visible;
    height: inherit;
    position: relative;
}

How do I disable the uppercase text in the navigation?

You can achieve this with the following adjustment in custom.scss.

#header .nav-wrapper ul li {
  text-transform: none;
}

Other

How do I prevent the theme CSS file from being cached?

Visitors who have already visited the website are usually served a cached file. If you want to prevent this, you can adjust the fe_page template.

Adjust the following template: fe_page_mate.html5.

To prevent the CSS file from being cached, you can append a timestamp to the file name, for example. In the line echo $combiner->getCombinedFile(); ?>">, insert the following before the quotation marks: ?date=<?= time() ?>

It should look like this:

<link rel="stylesheet" type="text/css" media="all" href="<?php
// add stylesheets
$combiner = new Combiner();
if (strtoupper(substr(PHP_OS, 0, 3)) === 'WIN') {
$combiner->add('bundles/matetheme/sass/mate_win.scss');
} else {
$combiner->add('bundles/matetheme/sass/mate.scss');
}
echo $combiner->getCombinedFile(); ?>?date=<?= time() ?>">

Helpers

If you add the following line to custom.scss, you can use various classes on content elements to adjust the spacing (margin/padding).

@import 'spacing-helpers';

Classes	Explanation
for all screen sizes
`m-10`, `m-20` … `m-100`	Margin (10px, 20px … 100px)
`mt-10`, `mt-20` … `mt-100`	Margin top (10px, 20px … 100px)
`mb-10`, `mb-20` … `mb-100`	Margin bottom (10px, 20px … 100px)
`ml-10`, `ml-20` … `ml-100`	Margin left (10px, 20px … 100px)
`mr-10`, `mr-20` … `mr-100`	Margin right (10px, 20px … 100px)
`p-10`, `p-20` … `p-100`	Padding (10px, 20px … 100px)
`pt-10`, `pt-20` … `pt-100`	Padding top (10px, 20px … 100px)
`pb-10`, `pb-20` … `pb-100`	Padding bottom (10px, 20px … 100px)
`pl-10`, `pl-20` … `pl-100`	Padding left (10px, 20px … 100px)
`pr-10`, `pr-20` … `pr-100`	Padding right (10px, 20px … 100px)
only for screen size > 600px
`m-m-10`, `m-m-20` … `m-m-100`	Margin (10px, 20px … 100px)
`mt-m-10`, `mt-m-20` … `mt-m-100`	Margin top (10px, 20px … 100px)
`mb-m-10`, `mb-m-20` … `mb-m-100`	Margin bottom (10px, 20px … 100px)
`ml-m-10`, `ml-m-20` … `ml-m-100`	Margin left (10px, 20px … 100px)
`mr-m-10`, `mr-m-20` … `mr-m-100`	Margin right (10px, 20px … 100px)
`p-m-10`, `p-m-20` … `p-m-100`	Padding (10px, 20px … 100px)
`pt-m-10`, `pt-m-20` … `pt-m-100`	Padding top (10px, 20px … 100px)
`pb-m-10`, `pb-m-20` … `pb-m-100`	Padding bottom (10px, 20px … 100px)
`pl-m-10`, `pl-m-20` … `pl-m-100`	Padding left (10px, 20px … 100px)
`pr-m-10`, `pr-m-20` … `pr-m-100`	Padding right (10px, 20px … 100px)
only for screen size > 992px
`m-l-10`, `m-l-20` … `m-l-100`	Margin (10px, 20px … 100px)
`mt-l-10`, `mt-l-20` … `mt-l-100`	Margin top (10px, 20px … 100px)
`mb-l-10`, `mb-l-20` … `mb-l-100`	Margin bottom (10px, 20px … 100px)
`ml-l-10`, `ml-l-20` … `ml-l-100`	Margin left (10px, 20px … 100px)
`mr-l-10`, `mr-l-20` … `mr-l-100`	Margin right (10px, 20px … 100px)
`p-l-10`, `p-l-20` … `p-l-100`	Padding (10px, 20px … 100px)
`pt-l-10`, `pt-l-20` … `pt-l-100`	Padding top (10px, 20px … 100px)
`pb-l-10`, `pb-l-20` … `pb-l-100`	Padding bottom (10px, 20px … 100px)
`pl-l-10`, `pl-l-20` … `pl-l-100`	Padding left (10px, 20px … 100px)
`pr-l-10`, `pr-l-20` … `pr-l-100`	Padding right (10px, 20px … 100px)
only for screen size > 1200px
`m-xl-10`, `m-xl-20` … `m-xl-100`	Margin (10px, 20px … 100px)
`mt-xl-10`, `mt-xl-20` … `mt-xl-100`	Margin top (10px, 20px … 100px)
`mb-xl-10`, `mb-xl-20` … `mb-xl-100`	Margin bottom (10px, 20px … 100px)
`ml-xl-10`, `ml-xl-20` … `ml-xl-100`	Margin left (10px, 20px … 100px)
`mr-xl-10`, `mr-xl-20` … `mr-xl-100`	Margin right (10px, 20px … 100px)
`p-xl-10`, `p-xl-20` … `p-xl-100`	Padding (10px, 20px … 100px)
`pt-xl-10`, `pt-xl-20` … `pt-xl-100`	Padding top (10px, 20px … 100px)
`pb-xl-10`, `pb-xl-20` … `pb-xl-100`	Padding bottom (10px, 20px … 100px)
`pl-xl-10`, `pl-xl-20` … `pl-xl-100`	Padding left (10px, 20px … 100px)
`pr-xl-10`, `pr-xl-20` … `pr-xl-100`	Padding right (10px, 20px … 100px)

Update to CSS variables

With version 3.5.0 the MATE theme was made accessible and all SCSS variables were switched to CSS variables. This means a manual intermediate step is necessary when updating from an older version (< 3.5.0) to a newer version (≥ 3.5.0).

Requirements

Existing installation of the MATE theme < 3.5.0
Update to Contao 5

1. Update the theme

Open the Contao Manager.
Update the MATE theme to 3.5.0 or higher (recommended: latest version).

2. Changes to the SCSS files

As of version 3.5.0 the file _custom_colors.scss no longer exists. All color definitions are now in _custom_variables.scss.

📂 Old structure (< 3.5.0)

mate/sass/
├── custom.scss
├── _custom_variables.scss
└── _custom_colors.scss

📂 New structure (≥ 3.5.0)

mate/sass/
├── custom.scss
└── _custom_variables.scss

3. Create the new theme files

After the update to 3.5.0 or higher the site still works, but not all new features are available right away. You should therefore create the current theme files.

Complete re-import of the theme folder

In the file manager, rename the folder mate, e.g. to mate-alt.
In the Contao Manager, open System maintenance → Check database and run the database update.
The migration that creates the new theme files is now offered – run it.
A new folder mate with the current files is created.

Moving images: If there were images in the old mate folder, move them either into the new folder or into a separate image folder. References are kept if the images were added in Contao via “Add an image”.

4. Transfer your own customizations

If you made changes in custom.scss, _custom_colors.scss or _custom_variables.scss, you have to transfer them manually to the new files.

Important: V2 uses CSS variables instead of SCSS variables.

Example color variable

Before (V1 – SCSS):

$mateColor1: #b6cf92;

New (V2 – CSS variables):

:root {
  --mateColor1: #b6cf92;
}

CSS variables are used in code like this:

color: var(--mateColor1);

5. Update SCSS customizations

If your custom.scss still uses SCSS variables ($variable), change them to the CSS variable format (var(--variable)).

Example:

/* Vorher */
color: $mateColor1;

/* Neu */
color: var(--mateColor1);

Accessibility

You find detailed tips, new features from version 3.5.0 and best practices for accessible design here: ♿ Accessibility in the MATE theme

Direct download of the new variables file

You find the current _custom_variables.scss here: 📄 GitHub: _custom_variables.scss

If you want to adjust the files manually, the sass folder must also contain an empty file named .v2 to activate the V2 structure.

Accessibility

Accessibility in the MATE theme (version 3.5.0 and later)

With version 3.5.0 the MATE theme was thoroughly revised with regard to accessibility and switched to CSS variables. To use these features, a manual intermediate step is necessary when updating from an older version (< 3.5.0) to a newer version (≥ 3.5.0). ➡️ Guide: Update to CSS variables

1. Header icons for contrast mode and font size

Version 3.2.0 adds controls to the header to:

toggle contrast mode (high contrast)
adjust the font size (links to the accessibility statement by default)

Settings

Edit the website root in the site structure.
Under WCAG settings (Web Content Accessibility Guidelines) you find two checkboxes:
- “Allow switching to high contrast mode”
- “Allow displaying the icon for changing the font size” These options are active by default in a fresh installation.

If you installed the theme from scratch

If you install the MATE theme from version 3.2.0 and import the demo, the icons are already in the header.

If you have an existing installation

Create an article
- Under Articles, create a new article, e.g. “01/06 contrast and size” under Nature Theme Elemente -> 01_Header.
- In the article settings, select the Theme Helper Tag MATE01/06 under Template settings.
- Add the CSS class contrast-size-switcher to the article.

Add content
- Create a text element in the article with the following content:
```
{{comp::contrast}} {{comp::size::barrierefreiheit.html#fontSize}}
```
- Add the CSS class wcag.

Including it in the template
- The article with the Theme Helper Tag MATE01/06 is included automatically via the navigation template.
- If you have customized your own mod_navigation_nature.html5, add the insert tag there manually.

<?php if($this->showMobileMenu == 1): ?>
  <ul id="mobile-menu<?= $this->id ?>" class="mobile-menu sidenav hc-bg-black-ter <?= $this->level ?>">
    <?= $this->mobileNav ?>
    <li>
      <!-- contrast and size switcher -->
      {{theme::content::MATE01/06}}
    </li>
  </ul>
<?php endif; ?>

2. New accessible templates (version 3.5.0 and later)

To avoid redundant links (e.g. image, headline and button all linked), it is enough to link only the button. This improves keyboard navigation.

Adapted templates are available for various content elements such as teaser box, content box etc. These templates have the suffix _bf (German “barrierefrei”, accessible).

3. General accessibility tips

When creating content, pay attention to the following:

Provide alternative texts (alt tags) for images
Use meaningful link texts (not just “click here”)
Mind the contrast (text color/background color)
Use headings in a correct hierarchy
Use tables only for tabular data (not for layout)
Give forms label elements

4. Tools for testing accessibility

pdir Website Check – automatic check for accessibility and SEO.
WAVE Web Accessibility Evaluation Tool – browser extension for analyzing accessibility problems.
axe DevTools – developer tools for accessibility testing.
Contrast Checker – checks color contrast.

Customization

CSS customization

JavaScript customization

Placing elements with your own insert tag

Customizing the header

Customizing the footer

Helpful videos (German)

Subsections of Customization

Colors & Fonts

Colors and fonts

Color schemes

Variables

Base colors:

Text colors:

Boxes:

Content box:

Adding a font

Examples of changing colors

Changing the navigation colors

Changing the footer colors

Changing the colors of content boxes

Changing the colors of the content box

Layouts

One-column layout

Layout with left column

Layout with right column

Layout with left and right column

Multidomain

Important note

1) Create the SCSS files

2) Create a template

3) Create a layout

4) Assign the layout to the page

FAQ

Images

Possible solutions:

Content elements

Forms

Only Saturday and Sunday selectable

Only weekdays selectable

Header

Layout

Adjust fe_page_mate.html5

Adjust mod_article.html5

Create a customized mod_article template

Adjustments for multi-column layouts

Assigning templates in articles

Custom CSS

Example

Navigation

Other

Helpers

Update to CSS variables

Requirements

1. Update the theme

2. Changes to the SCSS files

3. Create the new theme files

Complete re-import of the theme folder

4. Transfer your own customizations

Example color variable

5. Update SCSS customizations

Accessibility

Direct download of the new variables file

Accessibility

Accessibility in the MATE theme (version 3.5.0 and later)

1. Header icons for contrast mode and font size

Settings

If you installed the theme from scratch

If you have an existing installation

2. New accessible templates (version 3.5.0 and later)

3. General accessibility tips

4. Tools for testing accessibility