Contao 4

Steps

Follow these steps to install the MATE theme. At the end of the guide you also find a helpful video.

1) Install the MATE Theme Bundle

First open the Contao Manager at the following URL: www.your-domain.com/contao-manager.phar.php. Select Discover, enter mate theme in the search field and add the package MATE Theme.

Then switch to Packages, enter the version ^2.20 via the gear icon and start the installation of the theme with the button Apply changes. With the latest version the Contao Manager would otherwise install version 3.x, which is only compatible with Contao 5 and later.

Then open the install tool and update the database.

2) Synchronize the theme files and empty the table ’tl_files'

Log in to the back end with the user account you created and select the menu item Mate Theme Setup under MATE THEME in the left navigation. Then click the button Synchronize theme files (see image 2). This creates all files in the file manager under the folder mate and copies the SQL files for the database import into the templates folder.

Then empty the database table ’tl_files’ by clicking the button Empty table ’tl_files’. This step must be carried out before importing the database.

Image 2: Synchronizing the theme files

3) Import the database

Now open the install tool. Under the tab Import a template (see the following screenshot) you can import an .sql file from the templates directory. Select the file for your Contao version and tick Do not truncate tables. Then click Import a template.

If you chose the minimal Contao installation in the Contao Manager (without news, calendar, newsletter, comments, listing, FAQ), select the SQL file named minimal_installtool.sql.

If the database was imported successfully, you should get a message that a template was imported, as in the following screenshot.

Alternatively, you can import the sql file with phpMyAdmin.

Image 3: Importing a template

4) Recreate the symlinks

Then switch back to the Contao back end, select the menu item System maintenance and recreate the symlinks by ticking Recreate the symlinks and then clicking the button Purge data.

5) Settings

In the Settings, activate Auto_item and Use folder URLs under Front end settings. As of Contao 4.7 the setting to activate auto_item no longer exists in the back end; it is always active by default. As of Contao 4.11 the option “Use folder URLs” is no longer in the settings but in the website root under URL settings.

Image 4: Front end settings

Under Advanced CSS settings, select the class set materialize.json (see image 5).

Image 5: Advanced CSS settings

Notes

Error: This page isn’t working / The page redirected you too many times

Edit the website root and set the protocol under URL settings to http:// or https://, depending on how your site should be accessed.

Error: imagick not installed

If the error imagick not installed occurs with PHP 8.0, you can solve it with an adjustment in config.yml and clearing the cache afterwards. More information in the PDIR blog post (German)

Helpful video (German)

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.

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.

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

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

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

Changing the navigation 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

Changing the footer colors

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.

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

//@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';

//@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';

//@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

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. 

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

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

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

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

Content elements

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

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

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

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

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

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

#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;
}

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

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

Forms

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
}

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
        },
    });
});

disableWeekends: true

Header

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

Layout

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

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

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

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

Navigation

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

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

Other

<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';

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

1. Open the Contao Manager.
2. 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

1. In the file manager, rename the folder mate, e.g. to mate-alt.
2. In the Contao Manager, open System maintenance → Check database and run the database update.
3. The migration that creates the new theme files is now offered – run it.
4. 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

1. Edit the website root in the site structure.
2. 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

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

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

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

Content Box

For the content box, select the element type Content box. You can change the background color by giving the element classes (e.g. “grey lighten-3”, for more information see the section Colors) or by adjusting the CSS (custom.scss). How to display elements side by side is explained in the section Grid.

Content Slider

Contao’s own content slider

For the element Content slider (wrapper start), select the template ce_sliderStart_mate. For the closing element Content slider (wrapper end), select the template ce_sliderStop_mate. The slider is styled as in the following example if the text elements get the class slidebox1.

If you give the wrapper start element the class smaller, the content slider is displayed with a height of only 250px.

Content slider with image and text below

To create a content slider like in the following example, place text elements between the elements Content slider (wrapper start) and Content slider (wrapper end).

Give the element of type wrapper start the classes slider slider-text-below-image in the second input field under Expert settings, and select the template ce_sliderStart_mate under Template settings.

For the element of type wrapper end, select the template ce_sliderStop_mate.

You find an example in the MATE theme demo on the page Content Slider.

This is what the content slider should look like:

Placement of the elements:

Selecting the template and setting the classes in the wrapper start element:

CountTo

Version 2.1.0 of the MATE theme added the CountTo feature. It counts numbers up when they come into view. You find an example in the MATE theme demo.

To display the elements side by side as in the example, place text elements between an element of type Grid (grid start) and Grid (grid stop). In the text element you can set the column widths under Advanced CSS classes, see image. The section Grid explains this in more detail.

Give the grid start element the class count-to-container under Expert settings, otherwise it is not styled as in the example.

Use our Material Icons insert tag to add an icon, e.g. {{mi::place}}. place is the name of the icon in this case and can be replaced as you like. You also find a list of the Material Icons and their names in our documentation.

In our example, the label is set as an h6 heading in the text.

For the number, also use our CountTo insert tag, e.g. {{countTo::929::founded}}. The second part is always the number, the third part is an ID. If you include several insert tags on one page, each must have a unique ID.

Example:

Example placement of the elements in the article:

Text element:

Setting column widths in the text element:

Header image

For the header image, select the element type Image and the template ce_image_mate_headerimage (up to Contao 4.13) or content_element/image/header_image_mate (Contao 5.0 and later). You can choose the visible part of the image by setting the important part of the image.

You find an example integration of a normal header image on the layout pages of the demo site. An example integration of a narrow header image is on the Contact page.

Normal header image:

Narrow header image:

For a narrower header image, give the element the class smaller.

Left-aligned header image:

For a left-aligned header image, simply give the element the class left.

Right-aligned header image:

For a right-aligned header image, simply give the element the class right.

Headlines

If a content element with a headline gets the class bordered-left or bordered-right, the headline is displayed with a border at the bottom left or bottom right.

Headline with a border on the left:

Headline with a border on the right:

Hyperlinks

If a link should look like a button (white text on a green background), give the link the class btn.

Media elements (images, galleries, videos)

Image gallery

Depending on how many thumbnails per row should be displayed, the arrangement of the images adapts automatically and takes up all the available space.

Carousel image gallery

Only available from MATE theme version 2.12.0!

For a carousel image gallery, create an element of type Gallery. You can set the number of images per row in the field Thumbnails per row. With Full-size view/new window the image can also be opened in a lightbox (the j_colorbox template must be added to the layout for this). You should also create an image size (important part, e.g. 400x400 or 200x200), as the carousel is designed for square images.

Simple carousel

Template: content_element/gallery/carousel / gallery_carousel

Carousel with navigation dots

Template: content_element/gallery/carousel_with_indicators / gallery_carousel_with_indicators

Simple carousel with large images

Template: content_element/gallery/carousel_large / gallery_carousel_large

Carousel with large images and navigation dots

Template: content_element/gallery/carousel_large_with_indicators / gallery_carousel_large_with_indicators

YouTube video

For a YouTube video, select the template ce_youtube_mate (only up to Contao 4.13).

News slider

The news slider displays news items in a slider. The slider is included on the home page of the demo site. In the theme, the slider is included in the article Start in the header via the insert tag {{theme::content::MATE02/01}}.

You do not need content slider wrapper elements; you only have to include a module of type Newslist. Select news_mate_slider as the news template and mod_newslist_mate_slider as the custom template. The total number of items can be chosen freely.

You select the image and the teaser texts in the settings of each news item.

To swap the position of text and image, edit the item settings of the news and add the CSS class image-right under Expert settings.

As of version 2.8.0 you can adjust the slider settings (height, interval, transition speed and navigation) in the module Newslist.

Newsletter box

You can integrate an area for newsletter subscriptions in the footer. The newsletter box is included in the module Footer via the insert tag {{theme::content::MATE02/01}}. The module itself is included in an article under MATE Elements - Moduls - 02/02 newsletter. For the CSS to be loaded, the article must have the ID newsletter.

Parallax element

Version 2.1.0 of the MATE theme added the parallax element. Place an element of type Parallax element in the article. There you can set a headline, the text, the height, a link and an image. You find examples of parallax elements in the MATE theme demo.

Parallax element with container width

If you select ce_mate_parallax_container under Custom template in the template settings, the text is displayed as wide as the normal content of the website.

Simple content box

You can give an element of element type Text a white background with some padding by assigning the custom template ce_text_simplebox_mate to the element.

Teaser Box

For the teaser box, select the element type Teaser box. You can adjust the width of the boxes by assigning CSS classes. If you add an image, select the image size Teaser-Box (450x270).

Teaser box with text/image side by side

Enter headline and text

Image settings

If you add an image, the image alignment (left or right) controls whether the image is displayed to the left or right of the text.

Further settings

Under Teaser box settings you can select a page to link to and enter the link text.

The field Card CSS class changes the background and text color. You can use the classes of the Materialize color palette. To change the background, add e.g. the following classes: red, red lighten-5. To change the text color, use e.g. the classes white-text and black-text.

Select the template

Under Template settings, select the template ce_mate_teaserbox_card.

Example

This is what it could look like. You find more examples in our theme demo.

Possible error: images no longer displayed after an update

This error can occur if you customized the template ce_mate_teaserbox.html5.

Replace the following line …

{{picture::<?= $this->picture ?>?size=10&alt=<?= $this->metaImg[$GLOBALS['TL_LANGUAGE']]['alt'] ?>}}

… with the following line:

<?php $this->insert('image', $this->arrData); ?>

You can then select the image size in the content element.

Testimonial slider

Version 2.1.0 of the MATE theme added a testimonial slider. You find examples in the MATE theme demo.

First place an element of type Content slider (wrapper start) and one of type Content slider (wrapper end). Between them you can place as many elements of type Text element with background image as you like. There you can enter a text and set an image (profile picture) and a background image.

If the slider should be displayed narrow (see documentation), give the element Content slider (wrapper start) the class smaller under Expert settings (the second input field).

Example of a testimonial slider:

Placement of the elements in the article:

Selecting the element type and entering the text:

Selecting the image (profile picture):

Selecting the background image:

Removing the background image blur:

You can remove the blur of the background image with the following CSS, which has to be added to custom.scss under files/mate/sass:

.ce_mateTextBackgroundElement .bg-image {
    filter: none;
}

Breadcrumb

To add a breadcrumb, create a new module of type Breadcrumb navigation under Themes > Edit the front end modules of the theme (gear icon). Select mod_breadcrumb_mate as the custom template.

Then go back to Themes and edit the page layouts of the theme (to the right of the gear icon). Under Front end modules - Included modules, add a new row by clicking the green plus. Select the module you just created and Header as the layout section.

In the end, the breadcrumb should look like the following example.

To show the news or event title in the breadcrumb on the news and event detail view, you can use the following insert tag in the page name: {{page::pageTitle}}

Events

Event list with images and teaser

For an event list with images and a teaser text, select the template event_mate_teaser and the image size News-Box (520x350) in the module. In the module of the detail view, select the template event_mate_full.

Event list without images and with teaser

For an event list without images and with a teaser text, select the template event_mate_list in the module. In the module of the detail view, select the template event_mate_full.

Event list

For a simple event list without images and teaser text, select the template event_mate_upcoming in the module. In the module of the detail view, select the template event_mate_full.

Customization

Changing the number of columns:

To change the number of columns, you only have to adjust the template and the classes, e.g. col s12 m4 to display the list in three columns on desktops and in one column on mobile devices. How exactly to use the classes is explained on the following page: Grid.

<div class="event layout_teaser<?= $this->classUpcoming ?> col s12 m4">
[...]
</div>

Forms

For the file upload field, select the custom template form_mate_upload.

Login

For the module type Login form, select the custom template mod_login_mate.

Modal dialog

As of version 2.0.0 of the MATE theme you can add modal dialogs with a module. Go to the front end modules and create a new module of type Modal. There you can set a link, give it additional classes and edit the actual content of the modal dialog. You can include the module anywhere, e.g. in an article.

If the modal dialog should be fixed to the bottom of the screen, add the class bottom-sheet in the field CSS classes for the modal dialog.

Navigation

There is a separate module type Navbar for navigations. In the navbar settings (see image 1) you can choose between different navbar types:

• Navigation with dropdown, right-aligned,
• Navigation without dropdown, left-aligned,
• Navigation without dropdown, right-aligned,
• Logo and navigation stacked/centered

You find example integrations under the menu item Modules - Navigation.

Navigation with dropdown, right-aligned

The navigation template mod_mate_navbar is used.

Navigation without dropdown, left-aligned

The navigation template mod_mate_navbar_left is used.

Navigation without dropdown, right-aligned

The navigation template mod_mate_navbar_left is used.

Logo and navigation stacked/centered

The navigation template mod_mate_navbar is used.

Subpage navigation

For a subpage navigation, as placed in the left and right column of the demo, for example, select the navbar type Navigation without dropdown, left-aligned and give the module the class subnav. Hide the logo, search and mobile navigation.

Custom navigation

If the custom navigation should look like the subpage navigation, select the navigation template nav_mate_left_customnav and add the class subnav under Expert settings.

News archive menu

If the news archive menu should look like the subpage navigation, select the module template mod_newsmenu_mate.

News

News with images and teaser

For news with images and a teaser text, select the template news_mate_latest and the image size News-Box (520x350) in the module. In the module of the detail view, select the template news_mate_full.

News without images and with teaser

For news without images and with a teaser text, select the template news_mate_short in the module. In the module of the detail view, select the template news_mate_full.

Simple news list

There is no separate template for a simple news list without images and teaser text. In the module of the detail view, select the template news_mate_full.

Customization

Changing the number of columns:

To change the number of columns, you only have to adjust the template and the classes, e.g. col s12 m4 to display the list in three columns on desktops and in one column on mobile devices. How exactly to use the classes is explained on the following page: Grid.

<div class="layout_latest arc_<?= $this->archive->id ?> block<?= $this->class ?> col s12 m4">
[...]
</div>

Search

For the search engine module, select the template search_mate.

euf_overlay

With the extension euf_overlay you can create an overlay (also known as a popup or popover) that is displayed on top of the actual website.

For the overlay to cover all other content of the MATE theme, an adjustment in custom.scss is necessary.

#euf_overlay {
  z-index: 5;
}

Google Maps

If you want to include a Google Maps map, install the package delahaye/dlh_googlemaps with the Contao Manager.

On the contact page there is a placeholder image next to the contact form where, for example, a Google Maps map could be included. If the map should be displayed there, give the element the classes col s12 m5.

Materialize

The MATE theme uses the front-end framework Materialize, based on Material Design.

Colors

You find the palette of colors that Materialize provides on the Materialize website or in the theme under Elements and Colors. Each color consists of a base class and optional classes that make the color lighter or darker.

Background color

To change the background color of an element, simply add a class with the color name and a class with the desired lightness level to the element.

Text color

To set a text color, simply use the color name with the suffix -text.

Grid

Materialize uses a 12-column grid system. You also find examples and explanations on the Materialize website.

Screen sizes

The class col must always come first. If several elements should be displayed side by side, the parent element must get the class row. For example, the classes col s12 m6 l4 make the element …

• 12 columns wide on mobile devices.
• 6 columns wide on tablets.
• 4 columns wide on desktops.

Usage

The extension Advanced Classes is used to assign these classes to elements. You can add the classes to content elements under Advanced CSS classes (see image 3), although not all elements are supported (e.g. the teaser or content box). If an element is not supported, add the classes manually under Expert settings.

Image 3: Setting advanced CSS classes

For the elements to be displayed correctly, the surrounding element must get the class row. The extension Contao Bootstrap Grid is used for this. Simply create an element of element type Grid Start and select the grid Umschlag mit Klasse row (see image 4). It should then look like image 5. The grid stop element is created automatically.

Under Themes and Manage grid definitions (the second-to-last icon) an empty grid element was created that makes sure a div element with the class row is created.

Image 4: Creating a grid wrapper

Image 5: Elements in a grid wrapper

Icons

To use icons, simply give the element the class material-icons and the icon name as content. You find all icons and their names either on the Material Design website or in the theme under Elements and Icons.

For example:

<i class="material-icons">insert_schedule</i>

You can change size and color by adding further classes.

Multilingual websites

To build a multilingual website with the MATE theme, you can install the extension Contao Multilingual Pages [i18nl10n]. Then you do not have to duplicate the site structure, only the elements that are displayed in different languages. You find documentation for Contao 3 here; there is none for Contao 4 yet.

Alternatively, you can create a site structure for each language without this extension. You find more about this in the Contao manual.

Contao Multilingual Pages [i18nl10n]

If you do not want to duplicate the site structure, install the extension exploreimpact/contao-i18nl10n with the Contao Manager.

In the website root of the site structure you can select the alternative languages under i18nl10n settings.

Under the menu item Multilingual pages, add the pages in the other languages. To create all pages, click L10N for all.

The elements now have the option to select the language under L10n settings. Select Neutral if the element should be displayed in all languages.

Duplicating the site structure

If you prefer to work with several site structures, select the corresponding website root under MATE Elements in the article settings under Template settings.

Other extensions

The MATE theme uses the following extensions:

Contao Advanced Classes

The module extends the CSS classes of Contao elements with sets of CSS classes you can define yourself. Editors and admins can quickly access predefined CSS classes via select fields. You set the classes in a content element under Advanced CSS classes (see image 1).

Contao Bootstrap Grid

The Bootstrap Grid module is only used to wrap several elements that should be displayed side by side in a DIV with the class row (see image 2). For this, an empty grid element was created under Themes and Manage grid definitions (the second-to-last icon).

Contao SEO Serp Preview

Contao SEO Serp Preview shows in a page how the page would look in the Google search results. In the site structure you can also use the button Enable SERP to see where a page title or page description is still missing.

Real Estate Module

The MATE theme already comes with templates and stylesheets for the Real Estate Module (Maklermodul).

Documentation

The Real Estate Module documentation contains all information on installing and setting up the module.

Including the stylesheets

Add the following line to custom.scss (/files/mate/sass) so that the list and detail view are displayed as in the screenshots.

@import 'maklermodul';

Setup

Create pages

First create one page each for the list view and the detail view.

List view module

Create a module of type Immobilienliste as described in the documentation.

• Select the real estate template makler_list_mate
• Select the image size Maklermodul / Listenansicht

Detail view module

Create a module of type Expose as described in the documentation.

• Select the real estate template makler_details_extended_mate

Header image module

Create a module of type MaklerModul Kopfbild as described in the documentation.

Placing the modules

Place the modules for the list view and the exposé in the articles of the respective pages. For the header image, create another article placed in the header (above the article of the detail view).

Examples

If you have carried out all steps as described, the list should be displayed as in the following screenshots.

List view with button filter

List view with select filter

Exposé

Social Feed Bundle

With the Social Feed Bundle you can display posts from Facebook and Instagram in the MATE theme. Simply install the package named pdir/social-feed-bundle with the Contao Manager.

A guide on setting up the feed can be found on the following page: Social Feed documentation.

Single-column social media stream (example integration in the left column)

Two-column social media stream

Three-column social media stream

Tabcontrol

Tabcontrol

If you use the Tabcontrol extension by Christian Barkowsky and want to link to a tab, you can do this with anchors, e.g. www.example.org/page.html#tabControl_tabname. It is important that the ID always starts with tabControl_, otherwise the MATE theme tries to scroll to the anchor on the same page. The panel must also have the corresponding ID.

Vehicle Manager

The MATE theme already comes with templates and stylesheets for the Vehicle Manager (Fahrzeugmanager).

Documentation

The documentation contains all information on installing and setting up the Vehicle Manager.

Including the stylesheets

Add the following line to custom.scss so that the list and detail view are displayed as in the screenshots.

@import 'mobilede';

Setup

Create pages

First create one page each for the list view and the detail view.

List view module

Create a content element of type Fahrzeug Manager Listenansicht as described in the documentation.

• Select the list view template ce_mobile_list_mate
• Ad template ce_mobile_item (vertical layout) or ce_mobile_item_horizontal_mate (horizontal layout)

Detail view module

Create a module of type Fahrzeug Manager Detailansicht as described in the documentation.

Examples

Vertical layout

Horizontal layout

Detail view