Contao 4

Steps

1 / Install the 0.1 theme bundle

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

Then switch to Packages, enter the version ^1.0 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 2.x, which is only compatible with Contao 5.

2 / Update the database

Then open the install tool and update the database. In the install tool you also have to create an admin user account.

You reach the install tool in the Contao Manager via the menu item Tools or at the URL: www.your-domain.com/contao/install.

3 / Synchronize theme files and empty tl_files

Log in to the back end with the user account you created and select 0.1 Theme Setup under CONTAO-THEMES-NET in the left navigation. Then click the button Synchronize theme files. This creates all files in the file manager in the folder zeroOne and copies the SQL files for the database import to the templates folder.

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

4 / Import the database

Now open the install tool. In the tab “Import a template” you can import a .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 selected 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 see a message that a template was imported, as shown in the screenshot.

5 / Recreate symlinks

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

6 / Settings

Under Advanced CSS settings, select the class set spectre.json.

Notes

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

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

Error message: imagick not installed

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

FAQ

Images

.hero .hero-body {
    min-height: inherit;
    padding-bottom: 50px;
}

.hero .hero-body {
  background-image: url(/files/zeroOne/img/quote.svg);
}

.hero .hero-body {
  background-image: none;
}

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>

Events/News

Contact page

.form-label, .form-group label:not(.form-checkbox):not(.form-radio), 
.ce_form .widget:not(.widget-checkbox):not(.widget-radio) label:not(.form-checkbox):not(.form-radio) {
    background: #d23b3b;
}

.form-input, .form-select, .checkbox_container > div, .radio_container .form-group > div, textarea {
	color: #333;
}

Text elements

.table.table-striped tbody tr:nth-of-type(odd) {
  background: #cceaff;
}

Article backgrounds

You can change the background and text color of an article with classes.

The following classes are available for the background:

• bg-zeroone-2 (Primary Color Dark)
• bg-zeroone-3 (Primary Color Light)
• bg-zeroone-4 (Primary Color Darken)
• bg-dark
• bg-gray
• bg-light
• bg-success
• bg-warning
• bg-error

The following classes are available for the text color:

• text-primary
• text-secondary
• text-dark
• text-gray
• text-light
• text-success
• text-warning
• text-error

More information: Spectre documentation

Example

Adding the classes in the article settings:

    This is what it would look like in the front end:

Accordion

For the accordion, simply select the content element template ce_accordionSingle_zeroone or ce_accordionStart_zeroone for the single element or the accordion start element.

The accordion is based on the Spectre accordion and works entirely without JavaScript, so the j_accordion template does not need to be included in the page layout.

Buttons

To place a button, follow these steps:

• Select the element type Hyperlink
• Enter the link address/link text (hyperlink settings)
• Up to Contao 4.13: select the content element template ce_hyperlink_button_zeroone (template settings)
• Contao 5.0 and later: select the content element template content_element/hyperlink/button_zeroone (template settings)

In the tab Advanced CSS classes, under Button style (in classes for content elements), you can assign more classes to change the look of the button: .btn-primary, .btn-link, .btn-success, .btn-error.

Under button size you can change the size of the button: .btn-sm (small), .btn-lg (large).

With button full width the button spans the entire available width: .btn-block.

Carousel

The carousel is based on the Spectre carousel and works entirely without JavaScript.

Place the wrapper elements

First you need an element of type Wrapper start (content slider) and Wrapper end. Select the template ce_sliderStart_carousel or ce_sliderStop_carousel for the content elements. The js_slider template does not need to be activated in the layout.

Wrapper start

Wrapper stop

Place the teaser box element

Inside the wrapper elements, place an element of type Teaserbox (under Contao Themes). Assign the template ce_cthemes_teaserbox_carousel to the content element. You can choose a headline, a text, a link and an image. For the image, select the image size Carousel to get the right size.

In the end, the structure of the elements should look like this:

Customize the appearance

By adding more classes you can change the text color and the look of the button. You make these settings in the Teaserbox element under Advanced CSS classes (at the very end).

To show the button with a black background and white text, select the class .btn-primary under button style.

Change the slide effect

Add the class fade to the element of type Wrapper start (content slider) to change the slide effect to a fade effect.

Example

Content box

Place the content element

Place an element of type Content Box (under Contao Themes) and select the template ce_cthemes_contentbox_zeroone. With the grid you can show several elements side by side.

Customize the appearance

By adding more classes you can change the text color, background and the look of the buttons. You make these settings in the content element under Advanced CSS classes (at the very end).

To show the button with a black background and white text, select the class .btn-primary under button style.

You can also add the classes bg-zeroone-2, bg-zeroone-3 or bg-zeroone-4 under expert settings to show the content box in one of the primary colors.

Examples

Grid

The theme is based on Spectre CSS, which among other things lets you show elements side by side and, at the same time, in a single column on mobile devices.

Place the content container

To show two text elements side by side, for example, first add one element of type Contao Themes (content container start) and one of type Contao Themes (content container end).

The element of type Content container start needs the col attribute .columns under Advanced CSS classes.

Place the content elements

Between the wrapper elements, place the elements you want to show side by side. Select the col attribute .column under advanced CSS classes.

You can also define more classes, e.g. column widths for certain resolutions or column gaps. You find more information in the Spectre documentation under Flexbox grid and Responsive.

Example

Headlines

Change color and size

• Select the element type Headline
• Under expert settings you can assign different CSS classes (second input field):
  • primary-color-dark: headline in the dark primary color
  • primary-color-light: headline in the light primary color
  • headline-35: headline is always 35px

Change the alignment

Under advanced CSS classes, in text alignment (under classes for content elements), you can change the alignment of the headline. You can select the following classes:

• text-left: left-aligned
• text-center: centered
• text-right: right-aligned
• text-justify: justified

Headlines with dots

• Select the element type Headline
• Select the content element template ce_headline_zeroone (up to Contao 4.13) or content_element/headline/dotted_zeroone (Contao 5.0 and later)
• Under Expert settings, add the CSS class headline-dotted (second input field)

The headline would then look like this:

Media elements

Download(s)

• Select the element type Download or Downloads
• Make your settings
• Up to Contao 4.13: select the content element template ce_download_zeroone or ce_downloads_zeroone (template settings)
• Contao 5.0 and later: select the content element template content_element/download/download_zeroone or content_element/downloads/downloads_zeroone (template settings)

Gallery

• Select the element type Gallery
• Make your settings
• Up to Contao 4.13: select the content element template ce_gallery_zeroone (template settings)
• Contao 5.0 and later: select the content element template content_element/gallery/gallery_zeroone (template settings)

YouTube video

• Select the element type YouTube
• Make your settings
• Up to Contao 4.13: select the content element template ce_youtube_zeroone (template settings)
• Contao 5.0 and later: select the content element template content_element/youtube/youtube_zeroone (template settings)

Parallax

For a parallax element, create a new article, edit the article settings and enter the following CSS classes under expert settings (second input field): hero parallax fullwidth.

In the article, place a text element and add, for example, a headline and a text. Under image settings you select the image.

Under Template settings, select the template ce_text_hero_parallax_zeroone (up to Contao 4.13) or content_element/text/parallax_zeroone (Contao 5.0 and later).

This is what the finished parallax element should look like:

Price box

Place the content element

Place an element of type Price table (under Contao Themes) and select the template ce_cthemes_pricebox_zeroone.

With the grid you can show several elements side by side. If the price boxes should have no spacing to the left and right, select .col-gapless (in more classes for columns) under Advanced CSS classes in the content container start.

Customize the appearance

By adding more classes you can change the text color, background, text alignment and the look of the buttons. You make these settings in the content element under Advanced CSS classes (at the very end).

To show the button with a black background and white text, select the class .btn-primary under button style.

To center the content, select .text-center under text alignment.

You can also add the classes bg-zeroone-2, bg-zeroone-3 or bg-zeroone-4 under expert settings to show the price box in one of the primary colors.

Examples

Quote

For a quote element, create a new article, edit the article settings and enter the following CSS classes under expert settings (second input field): hero quote text-center.

In the article, place a text element and add a headline.

You don’t need to fill in the text field, as it is not output. As it is a mandatory field, it is enough to add, for example, just an empty line.

Under Image settings you select the image shown in the background.

Under advanced CSS classes, make the following settings:

• select .column under Add col attribute
• select .col-mx-auto under Offset

This is what the finished quote element should look like:

Sticky teaser box

The sticky teaser box element is based on the NATURE theme element and is not a feature of the 0.1 theme, but you can build it yourself with template, SCSS and JavaScript adjustments.

Create a template

Create a new template under Templates and select ce_cthemes_teaserbox.html5. It is best to rename the template, e.g. to ce_cthemes_teaserbox_sticky.html5.

Replace the template content with the following code:

<div class="<?= $this->class ?> block sticky-teaserbox full-height"<?= $this->cssID ?><?php if ($this->style): ?> style="<?= $this->style ?>"<?php endif; ?>>
    <div class="inside">
        <?php $this->block('content'); ?>
    
        <?php if ($this->addImage): ?>
            <figure class="image_container float_above" style="background-image:url('<?= $this->picture['img']['src'] ?>')"></figure>
        <?php endif; ?>
    
        <div class="content">
            <?php if ($this->headline): ?>
            <<?= $this->hl ?>>
                <?php if($this->page != ""): ?><a href="<?= $this->page ?>"<?= $this->target ?><?= $this->rel ?><?= $this->pageTitle ?>><?php endif; ?>
                    <?= $this->headline ?>
                <?php if($this->page != ""): ?></a><?php endif; ?>
            </<?= $this->hl ?>>
        <?php endif; ?>
    
        <?= $this->text ?>
    
        <?php if($this->page != ""): ?>
            <div class="pageLink">
                <a href="<?= $this->page ?>"<?= $this->target ?><?= $this->rel ?><?= $this->pageTitle ?>><?= $this->pageText ?></a>
            </div>
        <?php endif; ?>
    </div>
    
    <?php $this->endblock(); ?>
    </div>
</div>

Place the content elements

Now place elements of type Teaser Box (under Contao Themes) and select the template you just created.

Styling

Go to the file manager, edit custom.scss in zeroOne/scss and add the following SCSS code. You may have to reload the page with Ctrl + F5 or clear the script cache for the changes to take effect.

.ce_ct_teaserBox.sticky-teaserbox {
  padding: 0;
  
  .content {
    width: 50%;
    margin-left: 50%;
    padding: 80px 200px 80px 80px;
  }

  .image_container {
    display: none;
    width: 50%;
    background-size: cover;
    height: 100%;
    background-position: center;
    position: absolute;
  }

  .inside {
    height: 100vh;
    align-items: center;
    
    h1, h2, h3, h4, h5, h6 {
        width: 100%;
        text-align: left;
        padding: 0;
    }
    
    .pageLink {
        width: 100%;
    }
  }
  
  p {
  	font-size: 18px;
  }

  .pageLink a {
    @extend .btn;
  }
}

.sticky-container {
  position: relative;

  .sticky-column {
    position: absolute;
    width: 50%;
    height: 100%;
    padding-top: 0;
    content: "";
    left: 0;
    top: 0;

    .sticky-column-background {
      background: center center/cover no-repeat;
      background-image: inherit;
      position: -webkit-sticky;
      position: sticky;
      top: 0;
      width: 100%;
      height: 100vh;
      z-index: 10;

      @for $i from 1 through 20 {
        &:nth-of-type(#{$i}) {
          z-index: #{$i};
        }
      }
    }
  }
}

@media (max-width: 1280px) {
    .ce_ct_teaserBox.sticky-teaserbox .content {
        padding: 20px 80px;
    }
}

@media (max-width: 960px) {
    .ce_ct_teaserBox.sticky-teaserbox {
        .content {
            padding: 20px 40px;
        }
    
        p {
            font-size: 16px;
        }
    }
}

@media (max-width: 600px) {
    .sticky-container .sticky-column {
        display: none;
    }
    
    .ce_ct_teaserBox.sticky-teaserbox {
        .content {
            width: 100%;
            margin: 0;
            padding: 20px;
        }
        
        .image_container {
            display: block;
            width: 100%;
            position: relative;
            height: 300px;
        }
        
        .inside {
            height: inherit;
        }
    }
}

Additional JavaScript

Add the following JavaScript in the layout under Custom JavaScript code. jQuery must also be loaded under jQuery.

Alternatively, you can create a JavaScript file and include it in the layout.

<script>
jQuery(document).ready(function($) {
	if( $(".sticky-teaserbox").length > 0 ) {
        $(".sticky-teaserbox").closest(".mod_article").removeClass("block");
        $(".sticky-teaserbox").closest(".mod_article").addClass("sticky-container");
        $("<div class='sticky-column'></div>").insertBefore(".sticky-teaserbox:nth-of-type(1)");
    }
    $(".sticky-teaserbox").each( function() {
        var style = $(this).find(".inside > .image_container").attr("style").replace(/\"/g, "'"); // replace for ie11
        $(".sticky-column").append('<div class="sticky-column-background" style="'+style+'"></div>');
    });
})	
</script>

Example

Tables

To place a table, follow these steps:

• Select the element type Table
• Define the table entries
• Up to Contao 4.13: select the custom template ce_table_zeroone (template settings)
• Contao 5.0 and later: select the custom template content_element/table/table_zeroone (template settings)

Under Expert settings you can define more CSS classes in the second input field to change the look of the table:

• table-striped: striped table
• table-hover: hover effect
• table-scroll: scrollable table

Tabs

For a tabs element, first place one element of type Content container start and one of type Content container end.

In the element Content container start, enter the class tabs in the second input field under Expert settings.

Then place an element of type Tabs navigation inside the content containers.

In the Tabs navigation element you define the individual tabs under Tabs settings. Always enter a unique value and a label.

After the tabs navigation element, add one element of type Tabs wrapper (start) and one of type Tabs wrapper (stop).

Inside the tab wrapper elements, add the content as text elements. Under Expert settings, enter the respective value from the tabs navigation element as the CSS class.

This is what it should look like in the end:

Teaser box

To place a teaser box, follow these steps:

• Select the element type Teaser Box (under Contao Themes)
• Add a headline and text, and fill in the link address/text in the teaser box settings
• Select the custom template ce_cthemes_teaserbox_zeroone (template settings)

By default the teaser box is then shown as in the following screenshot:

You can also add an image by ticking Add an image under Image settings. Under Image alignment you choose whether the image is aligned left or right.

A teaser box with an image is then shown as in the following screenshots.

Calendar

Follow these steps to place a calendar:

• Select the module Calendar (under Events)
• Make your settings (calendars, first day of the week, redirect page etc.)
• Select the calendar template (template settings)
• cal_default (normal calendar)
• cal_mini (mini calendar)
• Select the custom template mod_calendar_zeroone (template settings)
• Include it in an article with the element type Module

Calendar with event details

Mini calendar

Calendar day view

Events

Event list

Follow these steps to place an event list:

• Select the module Event list (under Events)
• Make your settings (calendars, number of events etc.)
• Select the event template (template settings)
• event_teaser_zeroone (event list with images)
• event_list_zeroone (event list without images)
• event_upcoming (simple event list with date and title only)
• Select the custom template mod_eventlist_zeroone (template settings)
• Select the image size News & Events / List view (image settings)
• Add the CSS class columns (second input field) (expert settings)
• Include it in an article with the element type Module

Simple event list

Event list without images

Event list with images

Event reader

Follow these steps to place the event reader (detail view):

• Select the module Event reader (under Events)
• Select the calendars
• Select the event template event_full_zeroone (template settings)
• Select the image size News & Events / Detail view (image settings)
• Include it in an article with the element type Module

Forms

Forms

When you create a form, select the form template form_wrapper_zeroone in the form settings under Template settings.

The 0.1 theme also includes more templates for form fields, which you select in the respective elements under template settings if the fields should look like in the theme demo.

Checkbox menu:

• form_checkbox_zeroone: stacked
• form_checkbox_inline_zeroone: side by side

Radio button menu:

• form_radio_zeroone: stacked
• form_radio_inline_zeroone: side by side

Submit field:

• form_submit_zeroone

User modules

Login form

Select mod_login_zeroone under template settings so that the login form is already styled to match the theme.

To show the form with placeholders only, select the template mod_login_placeholder_zeroone.

Change password

Select mod_changePassword_zeroone under template settings so that the module is already styled to match the theme.

Lost password

Select mod_lostPassword_zeroone under template settings so that the module is already styled to match the theme.

Registration

Select member_zeroone or member_grouped_zeroone under template settings so that the registration form is already styled to match the theme.

Personal data

Select member_zeroone or member_grouped_zeroone under template settings so that the personal data form is already styled to match the theme.

Form with placeholders

To show form fields in a simple form or registration form with placeholders only and without labels, you have to override the templates. In the left navigation, select Templates under Layout and duplicate the corresponding template with the button New template.

Text field:

form_textfield.html5

<?php $this->extend('form_row'); ?>

<?php $this->block('field'); ?>
  <?php if ($this->hasErrors()): ?>
    <p class="error"><?= $this->getErrorAsString() ?></p>
  <?php endif; ?>

  <input type="<?= $this->type ?>" name="<?= $this->name ?>" id="ctrl_<?= $this->id ?>" class="text<?php if ($this->hideInput): ?> password<?php endif; ?><?php if ($this->class): ?> <?= $this->class ?><?php endif; ?>" value="<?= Contao\StringUtil::specialchars($this->value) ?>"<?= $this->getAttributes() ?><?php if ($this->label): ?> placeholder="<?= $this->label ?><?php if ($this->mandatory): ?> *<?php endif; ?>"<?php endif; ?>>
<?php $this->endblock(); ?>

Select field:

form_select.html5

<?php $this->extend('form_row'); ?>

<?php $this->block('field'); ?>
  <?php if ($this->hasErrors()): ?>
    <p class="error"><?= $this->getErrorAsString() ?></p>
  <?php endif; ?>

  <?php if ($this->multiple): ?>
    <input type="hidden" name="<?= '[]' == substr($this->name, -2) ? substr($this->name, 0, -2) : $this->name ?>" value="">
  <?php endif; ?>

  <select name="<?= $this->name ?>" id="ctrl_<?= $this->id ?>" class="<?= $this->class ?>"<?= $this->getAttributes() ?>>
    <?php foreach ($this->getOptions() as $option): ?>
      <?php if ('group_start' == $option['type']): ?>
        <optgroup label="<?= $option['label'] ?>">
      <?php endif; ?>

      <?php if ('option' == $option['type']): ?>
    	<?php if($option['value'] == '') $option['label'] = $this->label; ?>
        <option value="<?= $option['value'] ?>"<?= $option['selected'] ?>><?= $option['label'] ?></option>
      <?php endif; ?>

      <?php if ('group_end' == $option['type']): ?>
        </optgroup>
      <?php endif; ?>
    <?php endforeach; ?>
  </select>
<?php $this->endblock(); ?>

Password field:

form_password.html5

<?php $this->extend('form_row'); ?>

<?php $this->block('field'); ?>
  <?php if ($this->hasErrors()): ?>
    <p class="error"><?= $this->getErrorAsString() ?></p>
  <?php endif; ?>

    <input type="password" name="<?= $this->name ?>" id="ctrl_<?= $this->id ?>" class="text password<?php if ($this->class): ?> <?= $this->class ?><?php endif; ?>" value="" autocomplete="new-password"<?= $this->getAttributes() ?><?php if ($this->label): ?> placeholder="<?= $this->label ?><?php if ($this->mandatory): ?> *<?php endif; ?>"<?php endif; ?>>
<?php $this->endblock(); ?>

Textarea:

form_textarea.html5

<?php $this->extend('form_row'); ?>

<?php $this->block('field'); ?>
  <?php if ($this->hasErrors()): ?>
    <p class="error"><?= $this->getErrorAsString() ?></p>
  <?php endif; ?>

  <textarea placeholder="<?= $this->label ?>" name="<?= $this->name ?>" id="ctrl_<?= $this->id ?>" class="textarea<?php if ($this->class): ?> <?= $this->class ?><?php endif; ?>" rows="<?= $this->rows ?>" cols="<?= $this->cols ?>"<?= $this->getAttributes() ?>><?= $this->value ?></textarea>
<?php $this->endblock(); ?>

Mega menu

In the 0.1 theme, the mega menu is available from version 1.13.0 (for Contao 4) or 2.3.0 (Contao 5).

You find an example of what it looks like on a finished website in our theme demo.

This is what it could look like on the website:

How do I activate it?

If you have a new Contao installation and have already imported the current theme demo, you can activate the mega menu simply by changing the page layout in the page settings.

  If you can’t select it in your Contao installation yet, edit the navigation module and switch the module template and the navigation template to the templates with the suffix megamenu.

Adding images

You can also add an image for each menu item, which is shown in the mega menu.

News

News list

Follow these steps to place a news list:

• Select the module Newslist (under News)
• Make your settings (archives, number of items etc.)
• Select the news template (template settings)
• news_latest_zeroone (news list with images)
• news_short_zeroone (news list without images)
• news_simple (simple news list with date/author and title only)
• Select the custom template mod_newslist_zeroone (template settings)
• Select the image size News & Events / List view (image settings)
• Add the CSS class columns (second input field) (expert settings)
• Include it in an article with the element type Module

News list with images

News list without images

Simple news list

News reader

Follow these steps to place the news reader (detail view):

• Select the module Newsreader (under News)
• Make your settings (archives, fields)
• Select the news template news_full_zeroone (template settings)
• Select the image size News & Events / Detail view (image settings)
• Include it in an article with the element type Module

Newsletter

Follow these steps to place a newsletter:

• Select the module Subscribe or Unsubscribe (under Newsletter)
• Make your settings (channels, redirect etc.)
• Select the newsletter template nl_default_zeroone (template settings)
• Include it in an article with the element type Module

Subscribe to the newsletter

Unsubscribe from the newsletter

Search

Follow these steps to place a search engine:

• Select the module Search engine (under Applications)
• Make your settings
• Select the custom template mod_search_zeroone (template settings)
• Include it in an article with the element type Module

Login form

Password forms

Personal data

Registration

Manual setup

creuva:install or Layout › Creuva takes care of these steps for you. If you prefer to put the theme together yourself, proceed as follows:

1. Theme and modules

Create a new theme under Layout › Themes and add these modules to it:

• Navigation menu (2 levels) for the main menu
• Creuva › Creuva header – logo, navigation module, CTA button, optional search; contains the mobile menu
• optionally Search engine on a hidden “Search” page (see Search)
• Creuva › Creuva brand – logo, claim and social media links for the footer (the platform is detected from the URL)
• Custom navigation with a headline for each footer column (e.g. Services, Company, Legal)
• optionally Custom HTML code for the copyright and a custom navigation for the links at the bottom right
• optionally Creuva › Creuva style switcher for trying out the color schemes (see Style switcher)

2. Page layout

Create a page layout of type “Modern” with the template page/layout/creuva and assign the modules to the slots:

The bottom bar always contains the link “powered by contao-themes.net”, see License.

3. Design

In the page layout, set the color scheme, color mode, typography, corner radius and animations under Creuva design, see Design.

4. Import CSS styles

To make the Creuva classes available as select fields:

vendor/bin/contao-console creuva:css-styles

Accessibility

• Give each navigation module a unique ARIA label under Expert settings, e.g. “Main navigation”, “Services”, “Service links”.
• The headlines of the footer columns should be h2.
• In forms, set the Autocomplete field for name, email, phone etc. (name, email, tel, organization).

The installer and the demos already do this.

Custom demo and export

You can export a website as a template and import it into another installation – e.g. as a starter package for client projects. The template is a folder with a demo.yaml and the files used, the same structure as the bundled demos.

Exporting a website

In the back end under Layout › Creuva › Export a website (administrators only), you choose the website root and optionally a title and folder name. Below, all exports are listed with date, number of files and size; you can download them as a ZIP and delete them. On the console:

vendor/bin/contao-console creuva:export
vendor/bin/contao-console creuva:export 1 --name=kunde-x --title="Kunde X"

var/exports/kunde-x/
├── demo.yaml       pages, contents, modules, forms, news, events, image sizes, design
└── files/          the files used

The export includes:

• the page tree with articles and content elements, and the modules, forms, news and events used in it
• the image sizes of the theme and all sizes used in contents
• all referenced files with alt texts
• header, logos, brand and footer columns from the Creuva modules
• color scheme, color mode, typography, corner radius and logo height, plus the favicon and preview image of the website root

Not exported are custom colors of the layout, recipient addresses of forms, tables of other extensions and the styleguide page (it is recreated on import). Insert tags with IDs such as {{insert_module::3}} and the elements “Content element” and “Article” (aliases) cannot be transferred; the export lists them as warnings. Page links such as {{link_url::12}} are converted to aliases.

Importing a custom demo

1. Unzip the ZIP and copy the folder to files/<name>. Do not make the folder public, otherwise the demo.yaml can be accessed on the web.
2. Under Layout › Creuva › Set up, enter files/<name> in “Or own folder”, or:

vendor/bin/contao-console creuva:install --demo=files/kunde-x

The files are copied to files/creuva-demo/local-<folder name>/, the source folder stays unchanged. With filesFolder: inhalte in the demo.yaml, they end up in files/inhalte/ instead; this folder is not deleted by creuva:reset.

Structure of the demo.yaml

The definition is YAML. You write references as page:<alias>, module:<key>, image_size:<key>, news_archive:<key>, calendar:<key> or file:<path>. An example with the most important sections:

design:
  scheme: green       # color scheme, color mode, typography and corner radius of the page layout
  variant: light
  typography: modern
  radius: large
  logoHeight: 4rem
  stylesheets: ['files/design/custom.css']   # created if it does not exist
header:
  logo: file:design/logo.png
  search: suche       # alias of the search results page
brand:
  logo: file:design/logo-hell.png
bottom: ['impressum', 'datenschutz', 'sitemap']   # links next to the copyright
imageSizes:
  card:
    name: Karte (4:3)
    width: 800
    height: 600
    resizeMode: crop
    densities: 400w, 600w, 800w
    sizes: '(min-width: 80rem) 384px, (min-width: 44rem) 31vw, calc(100vw - 2rem)'
    lazyLoading: true
pages:
  - title: Start
    articles:
      - elements:
          - { type: 'image', singleSRC: 'file:bilder/foto.jpg', size: 'image_size:card' }
modules:
  newslist: { name: 'News', type: 'newslist', news_archives: ['news_archive:blog'], imgSize: 'image_size:card' }
layout:
  prefooter: [partner]   # additional modules in sections of the page layout
styleguide: true

You define events under events:; the date is a strtotime() expression ("2026-12-05", "5 December"), relative values such as 'date:next saturday 15:00' are possible as well. The bundled demos in the bundle’s demo/ folder are the best template.

Image sizes of the demos

Each image size is meant for one spot in the layout, so the browser doesn’t load more than necessary:

Resetting contents

The demo import does not overwrite any existing contents. To import a demo again or to put an installation back into the state right after a fresh install, there are two ways.

Deleting all contents (creuva:reset)

# Delete all contents (with confirmation and database backup)
vendor/bin/contao-console creuva:reset

# Delete contents and import the demo again
vendor/bin/contao-console creuva:install --demo --reset

In the back end, this corresponds to the option “Delete all contents first” under Layout › Creuva › Set up.

• All Contao tables are emptied: site structure, articles, content elements, themes, modules, layouts, forms, news, versions, search index etc. The IDs start at 1 again.
• Back end users and user groups, members and member groups and the file manager are kept.
• Of the files, only the demo folder files/creuva-demo is deleted.
• The backup is stored under var/backups/creuva-reset__<timestamp>.sql.gz; restore it with contao:backup:restore <file name>.
• Without confirmation (e.g. in scripts): --force, without backup: --no-backup.

Replacing one website of a multisite installation (--replace)

--reset deletes all websites. If several websites run in one installation, --replace only replaces the website that the import would create:

vendor/bin/contao-console creuva:install --demo=files/meine-demo \
    --site-title="Meine Firma" --dns=example.org --theme-name="Meine Firma" --replace

This deletes the website roots with the same domain and language including their subpages and contents, the theme with the name from --theme-name and the themes whose layouts this website uses, as well as forms, news archives and calendars – but only if no other website uses them.

• If the theme is also used by another website, the command aborts without deleting anything.
• Before deleting, the command lists all affected records and asks for confirmation.
• Files are kept; the import overwrites the demo files, their UUIDs stay the same.
• If there is no matching website yet, --replace simply creates it.
• Cannot be combined with --reset and --root; requires --demo or --with-pages.

Afterwards, rebuild the search index with contao:crawl.

Style switcher

The front end module Creuva › Creuva style switcher shows a cog on the left edge. Visitors can use it to try out color scheme, color mode (Light, Dark, System), typography (Modern, Editorial) and corner radius live – ideal for a demo or for choosing a color scheme together with clients.

Setting it up

1. Create a module of the type Creuva style switcher under Layout › Themes › Modules (the demos already have one).
2. Assign it to the top section in the page layout, so the selection takes effect before the first render.

The selection is only stored in the browser (localStorage) and applies to all pages with the module.

Linking a combination

You can link to a combination directly, e.g.:

https://www.deine-domain.de/?scheme=red&theme=dark&typography=editorial&radius=none

Saving the selection for the website

In the front end preview, the switcher additionally shows administrators the button “Save for the website”. It saves the selection in the website root of the current website, clears the page cache and then applies to all visitors. Editors without admin rights and regular visitors don’t see the button.

Back end users only

With the module option “Logged in back end users only”, the switcher is invisible to visitors. It only appears when you are logged in to the back end; a selection previously stored in the browser then no longer applies to visitors.

Custom CSS and templates

Own stylesheets

Create a CSS file in the file manager, e.g. files/design/custom.css, and select it in the page layout under Creuva design › Own stylesheets. It is loaded after the Creuva CSS, with its modification time for cache busting. The folder must be public.

All Creuva styles live in CSS cascade layers (creuva.*). This means your own styles without a layer always take precedence – without !important and without long selectors.

Colors, spacing and rounding

Colors, spacing and typography are CSS variables and are easy to override:

:root {
  --scheme-primary: #123456; /* primary color incl. tinted backgrounds */
  --radius-l: 0.75rem;
}

For custom primary and accent colors, the page layout is usually enough (see Design).

Accordion with a custom icon

Give the accordion the class u-accordion-icon plus a class of your own, and set the icon with CSS:

.content-accordion.mein-icon {
  --accordion-icon-mask: url("/files/icons/paket.svg");
}

Customizing templates

All templates are Twig templates and can be overridden in the templates/ folder as usual, e.g. templates/content_element/creuva_hero.html.twig:

{% extends '@Contao/content_element/creuva_hero.html.twig' %}

Print

Only the content is printed, black on white, without header, footer, breadcrumb, slider controls and backgrounds. Links in the text appear with their address, accordions are expanded, and cards and images are not split across pages.

Template variants

You can choose these variants under Template settings › Custom template. All of them work independently of the demos; the Styleguide shows examples.

Text

Icon box: In the CSS Style Selector under „Elementoptionen › Icon-Box“ (element options › icon box) you find „Ohne Karte“ (without card, u-feature-plain, e.g. benefits in a row) and „Icon links, ohne Karte“ (icon on the left, u-feature-inline, e.g. contact details).

Call to action: You choose the color under „Farben des Elements“ (element colors: white, gray, light accent, accent color, outline; text and buttons adapt). „Call to Action › Zentriert“ (centered, u-cta-stacked) puts the buttons below the text. To span the full window width, use „Breite › Volle Breite“ (width › full width, u-full-bleed) – then set „Innenabstand oben und unten: Kein“ (top and bottom padding: none) on the article.

Description list

Key figures: Characters before or after the number ("+", “%”, “o’clock”) are highlighted, and the numbers count up while you scroll. Ranges such as “11–20” don’t count up, and dates stay unchanged. Optionally, an icon sits above each number (field Icons (key figures), in the order of the entries). With u-no-countup the numbers don’t count up.

Gallery

You can find more about galleries under Sliders and galleries.

Links as buttons

In boxes with u-bg-primary or u-bg-accent, a link that stands alone in the last paragraph is automatically shown as a button. In texts with u-lead and in section headers it becomes an arrow link (“View all services →”).

Headlines and text

Headline addition

The Theme Components Bundle adds a subline to headlines. Creuva calls the field “Headline addition”:

• addition without a checkbox → small line above the headline (“WHAT WE DO”)
• addition with “Two-tone headline” → addition and headline in one line, the actual headline appears in the accent color (“More than just an agency.”)
• addition with “Show addition below” → line below the headline

Kicker

Text elements and description lists also have the Kicker field: small uppercase text above the headline. Together with a two-tone headline you get the combination used on the demo home page (“CREATIVE PARTNERS ON EQUAL TERMS – More than just an agency.”).

Section header

Headline on the left, intro and link on the right: create an element group with the classes u-grid-2 u-align-end, and inside it a headline element and a text element with the class u-lead whose last paragraph contains only the link.

Text formats in the editor

The text editor has a “Formats” menu with the theme’s text styles:

• Text: Accent color, Highlight, Muted – for selected words
• Paragraph: Lead (larger), Kicker
• Links: Button, Secondary button – select the link and choose the format

Buttons

In the CSS Style Selector, „Primär-Button“ (primary), „Sekundär-Button“ (secondary), „Akzent-Button“ (accent) or „Outline“ turn a hyperlink element into a button. On a text element with this selection, the links in the last paragraph become buttons, side by side. In “Image & text” and in call-to-action boxes this happens automatically.

Sliders and galleries

Content slider

In the content slider element, every element inside is a slide: images, cards, testimonials, texts or whole element groups. Creuva adds the following to the slider settings:

• Elements per view (1–4): at most two on tablets, one on phones
• Navigation arrows and Dots: can be turned off individually, shown in a bar below the slides; they are hidden when all elements fit into the view
• Thumbnails: preview images below the slider, taken from the first image of each slide, e.g. for an image gallery

Autoplay (delay), speed, start slide and loop are the Contao fields. Cards and boxes in a row have the same height.

Gallery

You set the columns with Images per row (1–6), and Full-size view opens the lightbox. You can choose more layouts in the CSS Style Selector under „Galerie-Anordnung“ (gallery layout):

Image size

A gallery has only one image size for all images. So that every tile still loads a suitable image, the demos and the Styleguide include the image size „Galerie (responsiv)“ (gallery, responsive; proportional, widths from 320 to 1600 px). The gallery template sets the right sizes value for every image, depending on the layout, the position and “Images per row”. The important part set in the file manager stays visible in the tile.

For your own galleries, choose this image size or create one following the same principle – the widths are enough.

Lightbox

With Full-size view/new window, images in the gallery and the image element open the Creuva lightbox: dark background, caption or title from the metadata, counter, previous/next, keyboard (Esc, arrow keys) and swiping on phones. The images of a gallery form a group. You don’t need any jQuery or MooTools templates in the page layout for this.

Preferred loading

The first large image on a page (at least 400 px wide, in the first article, e.g. the hero image) is automatically prioritized and loaded without lazy loading. This improves the Largest Contentful Paint in PageSpeed. If a page starts with text, all images stay unchanged.

News and events

News list

The news list shows the items as cards. With the class u-news-no-author on the module (news list, news reader or news archive) you hide the author; the date stays.

Job offers

The list template news_creuva_job shows news items as job ads: a card with title, tags and teaser. The tags come from the subline, separated by “·”, e.g. “Full-time · Neuburg · starting now”. The “Company” demo has an example.

News reader

The news reader shows a header like the hero: archive, date and reading time as the kicker, headline, subheadline as intro and author, next to it the news item’s image (image size in the News reader module). The content elements follow in the reading column.

Highlighted part: In the news item you find this field next to the headline. The text you enter appears in the accent color, e.g. “Accessibility becomes mandatory – what websites need now”. It must appear exactly like this in the headline. In lists, in the page title and in search engines the headline stays single-colored.

Reading time: The words of the content elements divided by 200 words per minute, rounded up, at least one minute. Headline, teaser and images don’t count.

Caption: Lists show no caption. The news reader only shows it if it is entered in the news item itself under Overwrite metadata; the caption from the file manager is not used.

Events

The event list shows events with a date badge. The event reader, month and mini calendar and the event menu are styled as well. The “Sports club” demo uses events for the fixtures and results.

Contao 4

Steps

1 / Install the CONVERT Theme Bundle

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

Then switch to Packages, enter the version ^1.7 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 2.x, which is only compatible with Contao 5 and later.

2 / Update the database

Then open the install tool and update the database. You also have to create an admin user account in the install tool.

You can reach the install tool in the Contao Manager via the menu item Tools or at the URL: www.your-domain.com/contao/install.

3 / Synchronize the theme files and empty tl_files

Log in to the back end with the user account you created and select the menu item CONVERT Theme Setup under CONTAO-THEMES-NET in the left navigation. Then click the button Synchronize theme files. This creates all files in the file manager under the folder convert 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.

4 / Import the database

Now open the install tool. Under the tab “Import a template” 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.

Besides the landing page demo, the CONVERT theme also comes with an app demo (SQL files starting with convert_theme_contao_app_demo) with different content.

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, a message should appear that a template was imported, as shown in the screenshot.

5 / 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.

6 / Settings

Under Advanced CSS settings, select the class set spectre.json.

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)

FAQ

Images

.intro .ce_ct_teaserBox .image>div {
    filter: none;
}

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>

Other

<link rel="stylesheet" type="text/css" media="all" href="<?php
        // add stylesheets
        $combiner = new Combiner();
        $combiner->add($file->path);
        echo $combiner->getCombinedFile(); ?>?date=<?= time() ?>">

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;