FAQ

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

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

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

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

The error message may look something like this:

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

Possible solutions:

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

#2 Use an alternative image processing service

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

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

or

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

#3 Remove WEBP from the allowed file extensions

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

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

#4 Adjust the .htaccess

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

To show different icons (plus and minus signs) in the mobile navigation, adjust the template nav_default_nature.html5. The icons are included with Font Awesome and can be changed by changing the class names.

Look for the following places in the template:

<i class="fas fa-plus-square"></i> <i class="fas fa-minus-square"></i>

For example, to show a simple plus without a background, replace the class fa-plus-square with fa-plus.

To change the color as well, add a CSS rule to custom.scss.

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

Add the following CSS to custom.scss. You may then have to reload the page with Ctrl + F5 (cache).

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

Now some jQuery code is needed. Either create a new JavaScript file (e.g. custom.js) and include it in the layout (under JavaScript -> External JavaScripts), or add the code directly in the layout in the field Custom JavaScript code (under JavaScript) (in that case with an opening <script> and a closing </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');
    }
}
});

Create a module

Create a module of type Search engine, select a redirect page and the module template mod_search_nature.

Adjust the template

Now duplicate the template nav_default_nature.html5 and rename it (e.g. to nav_default_nature_custom.html5). Select the template in the module of the main navigation (NAV / Hauptnavigation) in the template settings under Navigation template.

Edit the template and add the following line before the closing </div>. Replace ID with the ID of the search engine module.

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

Styling

Finally, some SCSS is needed for the look. Edit custom.scss in the file manager under naturetheme/scss and add the following code:

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

The result

Create an article

Create a new article under Nature Theme Elemente - 01_Header.

Edit the article settings, select NATURE01/02 as the Theme Helper Tag under Template settings and add the class header-top under Expert settings.

Add content

To show contact and address details, you can create the element Text and icon (under Contao Themes) and enter a text and select a Font Awesome icon.

Create a module

Go to Themes, edit the front end modules of the theme (gear icon) and create a new module of type Custom HTML code. Add the following insert tag:

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

Edit the layout

Now edit the page layouts of the theme (right after the gear icon) and edit the layout where the header bar should be displayed. Under Front end modules - Included modules, add the module you just created at the very top and select Header as the layout section.

Styling

Finally, add the following SCSS code to custom.scss so that the header bar is displayed properly.

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

The result

Create a folder “Shortlinks” in the site structure and the pages inside it (e.g. as internal redirects). With the Font Awesome insert tags in the page name you can show icons.

Create a module of type Custom navigation and give it the class shortlinks.

Include the module in the footer of the layout.

Finally, we need some CSS for the styling, which you can add to custom.scss.

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

This is what it should look like in the end:

You can add the effect with the script Headroom.js, which you can download at wicky.nillia.ms/headroom.js.

Include headroom.min.js in the page layout under External JavaScripts and also add the following JavaScript in the page layout under Custom JavaScript code. Alternatively, you can of course move it to a separate JavaScript file.

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

Finally, add the following CSS to custom.scss.

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

Add the following CSS to custom.scss:

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

Install the extension Google Maps. In the back end you then find a menu item Google Maps where you can create your map.

With a content element (Media elements -> Google Map) you include the map at the desired place in an article. To show it e.g. in the header of the contact page, include it in the article Header.

You can enter the API key in the settings under Google Maps.

To display the map without spacing at the bottom, some CSS in custom.scss is necessary.

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

This is what it could look like:

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

Adjust the following template: fe_page_nature.html5.

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

It should look like this:

<link rel="stylesheet" type="text/css" media="all" href="<?php
// add stylesheets
$combiner = new Combiner();
$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() ?>">