Contao 4

Steps

1 / Install the NATURE Theme Bundle

First open the Contao Manager at the following URL: www.your-domain.com/contao-manager.phar.php. Select Discover, enter nature theme in the search field and add the package NATURE 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 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 Nature 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 naturetheme 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.

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

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.

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

Known issues

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.

Mittwald: some images are not displayed Solution: switch your PHP version from FPM to CGI (under Tools > Software manager > Script languages).

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)

Pagespeed optimization

This page has helpful tips on optimizing the page speed of your website.

Activate the cache

For optimal performance you should activate the cache. You find a helpful guide here (German): The perfect .htaccess file for Contao

Serve images as WEBP

As of Contao 4.8 you can serve images as WEBP files in the image sizes. You activate this under: Themes > Edit the image sizes of the theme > Edit the image size settings > Expert settings.

When importing the demo data this feature is deactivated by default, as not all hosting packages support WEBP.

Use image sizes correctly

When you add images, always choose a suitable image size. This way only the image size actually needed is loaded and the page stays fast. The NATURE theme already provides suitable image sizes for news, events, sliders and other elements.

Activate SSL

Give your website more security and trust with HTTPS. You can usually activate this directly in your hosting package. Many providers offer free SSL certificates.

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>

Header / navigation

.mod_navigation.navbar .navbar-menu.is-active  {
  .toggle-less i, .toggle-more i {
    color: #000;
  }
}

.mod_navigation.navbar {
    position: fixed;
    transition: all .3s;
&.stuck {
	height: 70px;
	
	.navbar-brand img {
		max-height: 40px;
	}
	
	.navbar-start {
	    padding: 0 70px;
	}
}
}

jQuery(document).ready(function($) {
    stuckNavbar();
$(window).scroll(function () {
    stuckNavbar();
});

function stuckNavbar() {
	var scrollPos = $(window).scrollTop();
    if (scrollPos > 0) {
        $('.mod_navigation.navbar').addClass('stuck');
    } else {
        $('.mod_navigation.navbar').removeClass('stuck');
    }
}
});

<?php if($this->level == "level_1"): ?>{{insert_module::ID}}<?php endif; ?>

header .mod_search {
    margin-left: 20px;
.control {
    height: 100%;
}

.formbody {
    display: flex;
}

.widget-submit {
    margin: 0;
}

.widget:not(:last-child) {
    margin-bottom: 0;
}

.widget-text {
    margin-right: 10px;
    
    input {
        height: 100%;
        border: none;
    }
}
}
@media (max-width: 1023px) {
header .mod_search {
margin: 10px 0 0 10px;
}
}

{{theme::content::NATURE01/02}}

$headerTopSize: 35px;
body:not(.home):not(.contact) #header .inside {
padding-top: 140px;
}
.header-top {
position: absolute;
top: 0;
width: 100%;
height: $headerTopSize;
background: darken($navbar-background-color,10%);
left: 0;
z-index: 2;
color: $navbar-item-color;
font-size: .8em;
.block:not(:last-child) {
margin-bottom: 0;
}
.ce_ct_featureElement {
.icon {
width: inherit;
margin-right: 10px;
padding-bottom: 0;
}
.feature-text {
  width: inherit;
}

&:not(:last-child) {
  margin-right: 30px;
}
}
.content {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
}
.mod_navigation {
top: $headerTopSize;
}
}
@media (max-width: 1023px) {
.full-width-height-slider .text {
padding-top: 160px;
}
}
@media (max-width: 992px) {
.header-top {
display: none;
+ .mod_navigation {
  top: 0;
}
}
}

.shortlinks {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 100;
    height: 100%;
    display: flex;
    align-items: center;
@media (max-width: 1023px) {
    display: none;
}

a {
    background: $link;
    display: block;
    color: #fff;
    width: 70px;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
    margin: 25px 0;
    padding: 10px;
    
    &:hover {
        background: $link-hover;
    }
    
    i {
        color: #fff;
        font-size: 2rem;
    }
}
}

<script>
var myElement = document.querySelector(".mod_navigation.navbar");
var headroom = new Headroom(myElement, {
 "offset": 600
});
headroom.init();
</script>

.headroom {
   will-change: transform;
   transition: transform 200ms linear;
}
.headroom–pinned {
transform: translateY(0%);
}
.headroom–unpinned {
transform: translateY(-100%);
}
.mod_navigation.navbar {
position: fixed;
transition: all .3s;
&.stuck {
height: 70px;
.navbar-brand img {
   max-height: 40px;
}

.navbar-start {
   padding: 0 70px;
}
}
}

Slider

.full-width-height-slider .text img {
  border: none;
}

Other

.dlh_googlemap.block:not(:last-child) {
	margin-bottom: 0;
}

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

Multidomain

If several domains in one Contao installation should use the NATURE theme, this is possible with a few workarounds.

The goal of this guide is for each domain to have its own custom.scss, _custom_colors.scss and _custom_variables.scss. You should have at least NATURE theme version 1.11.0 (up to Contao 4.13) or 2.1.0 (Contao 5 and later) installed.

1) Create the SCSS files

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

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

//@import '../../../../public/bundles/contaothemesnetnaturetheme/scss/color_schemes/nature_red_colors';
//@import '../../../../public/bundles/contaothemesnetnaturetheme/scss/color_schemes/nature_blue_colors';
//@import '../../../../public/bundles/contaothemesnetnaturetheme/scss/color_schemes/nature_dark_colors';

/*
 * comment line to disable the ios dark mode
 */

//@import '../../../../public/bundles/contaothemesnetnaturetheme/scss/color_schemes/nature_dark_mode';

//@import 'color_schemes/nature_red_colors';
//@import 'color_schemes/nature_blue_colors';
//@import 'color_schemes/nature_dark_colors';

/*
 * comment line to disable the ios dark mode
 */

//@import 'color_schemes/nature_dark_mode';

In the same folder, also create a file nature.scss with the following content.

@import '../../../../public/bundles/contaothemesnetnaturetheme/scss/bulma/utilities/initial-variables';

@import '../../../../public/bundles/contaothemesnetnaturetheme/scss/fonts';

@import "_custom_colors";
@import "../../../../public/bundles/contaothemesnetnaturetheme/scss/nature_colors";

@import "_custom_variables";
@import "../../../../public/bundles/contaothemesnetnaturetheme/scss/nature_variables";

@import "../../../../public/bundles/contaothemesnetnaturetheme/scss/nature_style";

@import 'custom';

This is what it should look like in the end:

2) Create a template

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

Look for the following line and add the name of the domain (domain2 in this example) inside getCombinedStylesheet().

<link rel="stylesheet" type="text/css" media="all" href="<?= ContaoThemesNet\NatureThemeBundle\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. 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.

Update to CSS variables

With version 2.5.0 the NATURE theme was made accessible, updated from Bulma 0.x to Bulma 1.x, and all SCSS variables were switched to CSS variables. This means a manual intermediate step is necessary when updating from an older version (< 2.5.0) to a newer version (≥ 2.5.0).

Requirements

• Existing installation of the NATURE theme < 2.5.0
• Update to Contao 5

1. Update the theme

1. Open the Contao Manager.
2. Update the NATURE theme to 2.5.0 or higher (recommended: latest version).

2. Changes to the SCSS files

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

📂 Old structure (< 2.5.0)

naturetheme/scss/
├── custom.scss
├── _custom_variables.scss
└── _custom_colors.scss

📂 New structure (≥ 2.5.0)

naturetheme/scss/
├── custom.scss
└── _custom_variables.scss

3. Create the new theme files

After the update to 2.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 naturetheme, e.g. to naturetheme-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 naturetheme with the current files is created.

Moving images: If there were images in the old naturetheme 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”.

New / old file structure:

Theme files migration:

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

$primary: #5ca152;

New (V2 – CSS variables):

:root {
  --bulma-primary: #5ca152;
}

CSS variables are used in code like this:

color: var(--bulma-primary);

Component-specific variables

Some variables are not defined in :root but within a component:

Before (V1 – SCSS):

$navbar-background-color: #eaeaea;

New (V2 – CSS variables):

.navbar {
  --bulma-navbar-background-color: #eaeaea;
}

5. Update SCSS customizations

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

Example:

/* Vorher */
background: $primary;

/* Neu */
background: var(--bulma-primary);

Accessibility

You find detailed tips, new features from version 2.5.0 and best practices for accessible design here: ♿ Accessibility in the NATURE 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 scss folder must also contain an empty file named .v2 to activate the V2 structure.

Accessibility

Accessibility in the NATURE theme (version 2.5.0 and later)

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

1. Header icons for contrast mode and font size

Version 2.6.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 NATURE theme from version 2.6.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. “02 contrast and size” under Nature Theme Elemente -> 01_Header.
   • In the article settings, select the Theme Helper Tag NATURE01/02 under Template settings.

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 NATURE01/02 is included automatically via the navigation template.
   • If you have customized your own mod_navigation_nature.html5, add the insert tag there manually.

<div id="navbarMain" class="navbar-menu is-primary">
    <?= $this->items ?>
    {{theme::content::NATURE01/02}}
</div>

2. New accessible templates (version 2.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, feature element 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.

Slanted edges

Slanted edges for articles with a background color

Requirements

• NATURE theme version 2.6.0 or later
• V2 installation with CSS variables (not SCSS variables)
• Contao 5
• Bulma 1.x

This feature adds slanted edges to articles with background colors.

Slanted edges - CSS classes

Add the CSS classes for slanted edges in the article settings under the field CSS style selection. If you use a newer version of the theme demo, the classes can be selected there. Otherwise you can enter the classes directly in the CSS class field.

Background color classes

Slanted edges only work in combination with background colors. Assign one of the following classes to an article, for example:

More background shades

Example

You find an example page with slanted edges in our theme demo:

https://nature.contao-themes.net/layouts/schraege-kanten.html

There, articles without a background color and slope classes are placed between colored articles to create the effect.

Buttons

Creating a button

To create a button, add an element of type “Hyperlink”.

🔧 Select the template

• Up to Contao 4.13: select the template ce_hyperlink_button
• Contao 5 and later: select the template content_element/hyperlink/button_nature

🎨 Styling the button

Under Advanced CSS classes you can add classes to customize the look of the button. You find an overview of possible styles in the Bulma documentation.

👉 You find examples of different buttons in the demo.

Content box

Placing the element

To add a content box, place an element of type Content Box.

To display several elements side by side, place them as described in the section Grid.

Changing colors

Under Advanced CSS classes you can set a class for the background color of the content box: .is-primary, .is-link, .is-info, .is-success, .is-warning or .is-danger. If you set no class, the box is displayed in the default color (like the first element in the screenshot below).

Examples

You find examples in the demo.

Content Slider

Placing the article

For a full-width slider – like on the home page – create a separate article. In the article settings, select the option Artikel mit voller Bildschirmbreite (article with full screen width) under Expert settings in CSS style selection.

Adding the elements

Place the two wrapper elements in the article: Content slider (wrapper start) and Content slider (wrapper end). Between them go one or more slider elements, depending on how many slides you want to show.

Style settings for the wrapper element

For the wrapper start element, select under CSS style selection:

• Slider mit voller Breite und Höhe (full width and height) to show it full screen
• Optional: Parallax-Slider to activate an animated parallax effect while scrolling

Configuring the slider elements

In the slider element you can add the following content:

• Headline and text
• Image or video
• Link
• Background image or video

Under CSS style selection you can also choose whether the text is displayed light (white) or dark (black) – depending on whether your background is rather dark or light. Without a selection, the text is displayed in black by default.

Example in the demo

You find a complete example slider in the demo.

Adjusting the slider height

You can adjust the height of the slider in _custom_variables.scss with the following CSS or SCSS variables:

Variant 1: full-screen slider

:root {
    --bulma-nature-slider-min-height: 100vh;
    --bulma-nature-slider-mobile-min-height: 100vh;
}

$nature-slider-min-height: 100vh; // Desktop
$nature-slider-mobile-min-height: 100vh; // Mobil

Grid

Arranging content side by side (grid system)

The NATURE theme is based on Bulma – a modern CSS framework that lets you display content flexibly side by side. On mobile devices it is automatically stacked.

Variant 1: classic grid (Contao 4 and later, all NATURE versions)

1. Place the content container

To display e.g. two text elements side by side, you need a wrapper: place two content elements of type Contao Themes (Inhaltscontainer Anfang) (content container start) and Inhaltscontainer Ende (content container end).

Assign the class .columns to the element Inhaltscontainer Anfang under Advanced CSS classes – this is the container class for the grid.

2. Define the columns

Between the wrapper elements, place the content elements that should appear side by side – e.g. two text elements. Under Advanced CSS classes, give each of these elements the class .column.

3. Additional options

With further Bulma classes you can control columns precisely: e.g. widths such as .is-half, .is-one-third, or responsive classes such as .is-full-mobile, .is-one-quarter-desktop. You can also control spacing and alignment.

👉 See: Bulma column documentation

Variant 2: smart grid & fixed grid (NATURE theme 2.5.0 and later with Bulma 1.x)

Since version 2.5.0 (only for new installations or if you updated to Bulma 1.x manually) two more modern grid variants are available:

Smart grid

• Element: Element group
• Class: .grid
• Content elements are placed directly inside the group

See: Bulma smart grid

Fixed grid

• Element: Element group
• Class: .fixed-grid
• Further classes possible: e.g. .has-2-cols, .has-1-cols-mobile
• Inside the group, place another element group with the class .grid, which then contains the content elements

See: Bulma fixed grid

📌 The element group is a new content element in Contao 5, comparable to a wrapper start/end, but more modern and compact.

Header image

Placing the article

Place the header image in a separate article in the header. In the article settings, select Artikel mit voller Bildschirmbreite (article with full screen width) under Expert settings in CSS style selection.

Placing the element

To place a header image, use the element type Image and select the template ce_image_headerimage (up to Contao 4.13) or content_element/image/header_image_nature (Contao 5 and later) under Template settings.

CSS styles

Under CSS style selection you can optionally choose a darker image, white text and a larger header image.

Examples

You find examples in the demo: header image dark, header image light, large header image dark, large header image light.

Dark / normal header image:

Dark / large header image:

Light / normal header image:

Light / large header image:

Hero element

Placing the element

To add a hero element (text element with background), place an element of type Text and select the template ce_text_cthemes_simplebox_nature (up to Contao 4.13) or content_element/text/simplebox_nature (Contao 5 and later).

Changing colors

Under Advanced CSS classes you can select a class for the primary color if the hero element should be displayed in a different background color: .is-primary, .is-link, .is-info, .is-success, .is-warning and .is-danger. If no class is selected, it is displayed like the first element in the following screenshot.

Examples

You find examples in the demo.

Lists

For the element type List, besides an ordered and unordered list you can choose different templates:

You find examples in the demo.

Price table

Placing the element

To display a price table, place an element of type Preis-Tabelle (price table).

To highlight a box, fill in the field Label for highlighted box. To display several elements side by side, place them as described in the section Grid.

Examples

You find examples in the demo.

Shortlinks

Shortlinks (NATURE v2.6.0 and later)

With the NATURE theme version 2.6.0 and later (only with Contao 5 and Bulma 1.x / V2) you can use shortlinks – small linked icons fixed to the left or right edge of the screen.

Requirements

• NATURE theme version 2.6.0 or later
• V2 installation with CSS variables (not SCSS variables)
• Contao 5
• Bulma 1.x

Setting up shortlinks – step by step

1. Create an article

Create a new article, e.g. under “Nature Theme Elemente”.

In the article settings:

• Under Template settings → select a Theme Helper Tag, e.g. NATURE03/01
• Under Expert settings → CSS class, add one of the following position classes:

💡 If you imported the current demo, you can also select these classes via CSS style selection.

2. Add hyperlink elements

Now add as many content elements of type Hyperlink to the article as you like.

👉 You find an explanation and a list of available insert tags here: Font Awesome Inserttag Bundle (GitHub)

3. Create a module

Create a new module under Themes → Modules:

• Module type: Custom HTML
• HTML content:

{{theme::content::NATURE03/01}}

📌 Make sure the Theme Helper Tag (NATURE03/01) matches the article.

4. Include the module in the page layout

Go to the page layout and open the include settings:

1. Go to Include settings
2. Under Included elements → add a new row
3. Section: Footer (layout section)
4. Module: select the shortlink module you created
5. Save

Example icons via insert tag

{{fa::phone}}      →  phone icon
{{fa::envelope}}   →  email icon
{{fab::facebook}}  →  Facebook icon
{{fab::instagram}} →  Instagram icon
{{fab::whatsapp}}  →  WhatsApp icon
{{fab::linkedin}}  →  LinkedIn icon
{{fab::pinterest}} →  Pinterest icon
{{fab::youtube}}   →  YouTube icon
{{fab::tiktok}}    →  TikTok icon
{{fab::github}}    →  GitHub icon

You find a complete overview of all available icons here: GitHub: Font Awesome Inserttag Bundle

Result

The shortlinks now appear fixed to the left or right edge of the screen, depending on the chosen position.

✅ Ideal for:

• Phone or email contact
• Links to social media
• Quick access to certain sections of the page

Table

You can set the following classes for the element type Table:

• table is-bordered: with borders
• table is-striped: striped
• table is-narrow: less spacing
• table is-hoverable: with hover

You can also combine all classes, e.g.: table is-bordered is-striped is-narrow is-hoverable.

You find examples in the demo.

Tabs

Tab headers

First place an element of type Tabs-Reiter (tab header) for the individual tabs.

In the tab settings, always assign a unique value and a label.

Tab wrapper

Now place one element of type Tabs-Umschlag (Start) and one of type Tabs-Umschlag (Stop) for each tab. Place the content between the wrapper elements.

For the element type Tabs-Umschlag (Start), enter the corresponding value from the element Tabs-Reiter.

Example of the placed elements in the back end:

Example

You find examples in the demo.

Teaser box

Placing the element

To add a teaser box, place an element of type Teaser Box.

You find examples in the demo.

Sticky/full-height teaser box

For a teaser box as in the following screenshot, select the template ce_cthemes_teaserbox_fullheight. If you select Sticky Teaserbox under Expert settings in CSS style selection, the images “stick” to the top of the screen when scrolling down.

Teaser box with full-size background image

For a teaser box as in the following screenshot, select the template ce_cthemes_teaserbox_nature.

Text and icon

Placing the element

Place an element of type Text and icon.

You can define a headline, a text, the Font Awesome icon and optionally a link. You find a list of possible icons on the Font Awesome website. When you click an icon, you also see the classes at the top that you have to enter in the field Font Awesome 5 Icon (classes).

Element with background

If the element should have a background, as in the following screenshot, select ce_cthemes_feature_element_nature under Template settings.

Examples

You find examples in the demo.

Events/calendar

Event list

Templates:

• event_teaser_nature: event list with images and teaser
• event_list_nature: event list with teaser only
• event_upcoming: simple list of events

Image sizes:

• Events mit Teaser (einspaltiges Layout) – events with teaser (one-column layout)
• Events mit Teaser (zweispaltiges Layout) – events with teaser (two-column layout)

Event reader

Templates:

• event_full_nature: event details
• event_full_nature_header: header image

Calendar

Templates:

• cal_default_nature: normal calendar
• cal_mini: mini calendar

Modal dialogs

Create a module

To add a modal dialog, 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.

Example

Navigation

Navigation templates:

• nav_default_nature: main navigation
• nav_default_nature_aside: subpage navigation

Custom templates:

• mod_navigation_nature: main navigation
• mod_navigation_nature_aside: subpage navigation

Mega menu

To display a mega menu, select the template mod_navigation_nature_megamenu for the module type Navigation menu.

You can customize the mega menu with variables in _custom_variables.scss:

$megamenu-width: 100%; // Breite des Megamenü
$megamenu-right: 0px; // Abstand zum rechten Bildschirmrand
$megamenu-background-color: $boxes-background; // Hintergrundfarbe
$megamenu-background-color-home: $megamenu-background-color; // Hintergrundfarbe nur für die Startseite
$megamenu-item-width: 20%; // Breite der Spalten, z. B. 20% für 5 Spalten
$megamenu-padding: 20px 60px 5px 30px; // Innenabstand oben, rechts, unten, links
$megamenu-link-lvl2-color: #000; // Schriftfarbe Level 2
$megamenu-link-lvl2-color-hover: $primary; // Schriftfarbe Level 2 bei Mouse Hover
$megamenu-link-lvl3-color: #4a4a4a; // Schriftfarbe Level 3
$megamenu-link-lvl3-color-hover: $link-hover; // Schriftfarbe Level 3 bei Mouse Hover
$megamenu-border-color: $primary; // Rahmenfarbe

Further customization

How do I keep the mega menu open on hover?

Create a .js file, e.g. custom.js, with the following content. You can include the file in the page layout under External JavaScripts.

jQuery(document).ready(function($) {
  $('.megamenu .level_1 > .navbar-item').hover(function() {
    $('.navbar-dropdown.level_2').css('display', 'none');
    $(this).find('.navbar-dropdown.level_2').css('display', 'flex');
  });

  $('body').click(function() {
    $('.navbar-dropdown.level_2').css('display', 'none');
  });
});

News

News list

Templates:

• news_latest_nature_col2: news list with images and teaser (two columns)
• news_latest_nature_col3: news list with images and teaser (three columns)
• news_short_nature: news list with teaser only
• news_simple: simple list of news

Image sizes:

• News / Zweispaltig (two columns)
• News / Dreispaltig (three columns)

News reader

Templates:

• news_full_nature: news details
• news_full_nature_header: header image

Social Feed

Social Feed Bundle

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

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

When setting up the news module, select news_social_feed_nature as the news template.

The social feed is already styled in the NATURE theme as shown in the following screenshots.

One column

Two columns

Three columns

Four columns

Multilingual websites

1 | Install the language switcher extension

First install the extension Sprachenwechsler (terminal42/contao-changelanguage) in the Contao Manager.

2 | Duplicate the site structure

Open the site structure and duplicate the website root including its subpages. After duplicating, all pages and articles are invisible, so you have to make every page and every article visible for a change to show in the front end.

In the page settings of the website root for the new language, enter the corresponding language code under DNS settings -> Language, e.g. en.

3 | Select the page in the main language

Edit each page of the new language and select the corresponding page in the main language under Language & translation.

4 | Create a module

Select Themes in the left navigation and edit the front end modules of the theme (gear icon). Create a new module of type Change language (under Miscellaneous). Further settings are not strictly necessary.

5 | Place the module in the layout

Select Themes in the left navigation again and edit the page layouts of the theme (to the right of the gear icon). In the corresponding layout, duplicate the first row under Front end modules and select the module you just created. The module must be at the very top and in the header.

6 | CSS for the display

Finally, add the following SCSS to custom.scss. You find it in the file manager under naturetheme/scss.

body:not(.home):not(.contact) #header .inside {
  padding-top: 140px;
}

nav.mod_changelanguage {
  position: absolute;
  top: 0;
  width: 100%;
  height: 40px;
  background: #000;
  left: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0 85px 0 50px;

  ul {
    display: flex;

    li {
      padding-left: 10px;
    }
  }

  + .mod_navigation {
    top: 40px;
  }
}

@media (max-width: 1023px) {
  .full-width-height-slider .text {
    padding-top: 160px;
  }

  nav.mod_changelanguage {
    padding: 0 20px;
  }
}

Example

In the end, as shown in the screenshot, a bar with the language switcher should appear above the main navigation.

One-page navigation

Demo

You find a demo with the one-page navigation here.

Guide

Install the extension

Install the extension Onepage Navigation by Erdmann & Freunde with the Contao Manager and update the database.

Create a module

Create a module of type Artikelnavigation (Onepage) and select the template mod_onepage_navigation_nature under Module template.

Create a layout

Create a new layout or duplicate an existing one and select the module you just created under Included modules.

To keep the navigation at the top of the screen when scrolling down, add the following code snippets under Custom JavaScript code and Additional head tags. You can of course also move them to separate files and include the files in the layout.

Custom JavaScript code

<script>
jQuery(document).ready(function($) {
    stuckNavbar();
    
    $(window).scroll(function () {
        stuckNavbar();
    });
    
    function stuckNavbar() {
    	var scrollPos = $(window).scrollTop();
        if (scrollPos > 0) {
            $('.mod_navigation.navbar').addClass('stuck');
        } else {
            $('.mod_navigation.navbar').removeClass('stuck');
        }
    }
});
</script>

Additional head tags

<style>
.mod_navigation.navbar {
    position: fixed;
    transition: all .3s;
    
    &.stuck {
    	height: 70px;
    	
    	.navbar-brand img {
    		max-height: 40px;
    	}
    	
    	.navbar-start {
		    padding: 0 70px;
		}
    }
}
</style>

Assign the layout to the page

Assign the new layout to the page or the website root.

Edit the articles

Create an article for each menu item. In the article settings, tick Add as navigation item under One-page navigation.

Real Estate Module

The NATURE 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/naturetheme/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.

Adjust the layout

If no breadcrumb should be displayed in the list and detail view, simply duplicate the one-column layout (under Themes) and remove the breadcrumb from Included modules. Then assign the layout to the pages under Layout settings.

List view module

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

• Select the real estate template makler_list_nature
• It is recommended to set an image size: e.g. 633 x 390px (matches the images in the demo)

Detail view module

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

• Select the real estate template makler_details_extended_nature

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.

Under the page for the list view, create an article for the header image. Under Elements you find all notes on creating a header image.

Under the page for the exposé, also create an article for the header image and place the module of type MaklerModul Kopfbild there.

For the articles of the header image and the exposé, select Artikel mit voller Bildschirmbreite (article with full screen width) under CSS style selection in the article settings.

Examples

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

List view with select filter

List view with button filter

Exposé