FAQ

Add the following CSS to custom.scss.

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

Add the following CSS to custom.scss to change the background image.

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

You can of course also remove the background image.

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

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 shown in the front end.

For this, jQuery and the jQuery template j_colorbox must be loaded in the theme. You edit the layout in the back end under Themes with 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 can look roughly 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 library

In config.yml you can specify a different image processing service; then clear the cache. This often solves the problem. 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 .htaccess

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

If no image is selected in the news/event, the left column is not shown. Otherwise you can select the template event_full_zeroone_without_image or news_full_zeroone_without_image in the event reader/news reader module.

You find the SVG graphic in the file manager in the folder zeroOne/img/files/zeroOne/img/navbar_level_2.svg. You can simply replace it with another graphic (the file name must stay the same).

If you only want to change the background color, you can also edit the source code of the file in the file manager (the second-to-last icon). After the opening <g, add the code fill="#015b7e" and replace the color code with your desired color (see the following screenshot).

You can change this with the variable $zeroOneColor_1 in der in _custom_variables.scss. Alternatively, you can add the following CSS to custom.scss.

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

You can change this with the variable $body-font-color in der in _custom_variables.scss. Alternatively, you can add the following CSS to custom.scss.

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

You can change this with the variable $boxes-background in der in _custom_variables.scss. Alternatively, you can add the following CSS to custom.scss.

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