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.

In the article 01/02 Top Navbar (at the very bottom under ODD Elements - 01/Kopfzeile), create a new element of type Image inside the content container (see screenshot 1).

In the element settings, set an image size, e.g. Fit the frame / 40px. Activate Overwrite metadata and set a link under Image link address. In the expert settings, also set the class icon (see screenshot 2).

Finally, add the following CSS code to custom.scss.

In the end it should look like the third screenshot.

Screenshot 1:

Screenshot 2:

Screenshot 3:

In the article 01/01 Logo (under ODD Elemente - 01 / Kopfzeile), add a second image element and give it e.g. the class stuck-logo (the second input field under Expert settings).

Now add the following CSS to custom.scss:

Contao 5.0 and later

.stuck-logo {
  display: none;
} 
.stuck .stuck-logo {
display: block;
}
.stuck .navbar-brand .content-image:not(.stuck-logo) {
display: none;
}

Up to Contao 4.13

.stuck-logo {
  display: none;
} 
.stuck .stuck-logo {
display: block;
}
.stuck .navbar-brand .ce_image:not(.stuck-logo) {
display: none;
}

A different logo should now be displayed when you scroll down from the top and the narrow navigation bar appears.

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>

You can either edit the template event_list_odd.html5 or event_teaser_odd.html5 directly or override it in langconfig.php (only from ODD theme version 1.4.2).

Edit the file langconfig.php under system/config, or create it if it does not exist yet. You can override the text with the following line:

<?php
$GLOBALS['TL_LANG']['odd']['event_more_link'] = "Details";

Or as follows to override it e.g. in a specific language:

<?php
if ($GLOBALS['TL_LANGUAGE'] == 'en') {
    $GLOBALS['TL_LANG']['odd']['event_more_link'] = "Details";
}

Removing the slanted edges in the header

There are already several layouts to switch between a straight and a slanted header. Among the modules there is also a navigation module with and without a slant, which you can select in the layout under the included modules.

Removing the slanted edges of content elements

The page Elements with slanted edges shows how to adjust the slanted edges of content elements. You only have to remove the classes skw-**.

Removing the slanted edges in the footer

Edit the module Footer / Main and remove the class skw-tr.

Removing the slanted edges of the newsletter area

For the newsletter area above the footer, edit the module Newsletter / Abonnieren / Startseite and remove the class skw-tl under Expert settings.

Add the following CSS to custom.scss and then reload the page with Ctrl + F5:

h1, h2, h3, h4, h5, h6 {
	text-transform: inherit;
} 

You can deactivate the newsletter area in the corresponding page layout under Included modules with the eye icon or remove it with the cross.

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.

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

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_bootstrap_odd.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/pdirthemeodd/bootstrap/dist/css/bootstrap.min.css');
if (strtoupper(substr(PHP_OS, 0, 3)) === 'WIN') {
$combiner->add('bundles/pdirthemeodd/scss/odd_win.scss');
} else {
$combiner->add('bundles/pdirthemeodd/scss/odd.scss');
}
echo $combiner->getCombinedFile(); ?>?date=<?= time() ?>">