Skip to main content
Edit page
Print whole chapter
Previous page
Next page

Modules

This page explains all modules and how you can use them.

The following modules are explained on this page:

Events

Event list

Follow these steps to place an event list:

  • Select the module Event list (under Events)
  • Configure the 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 / Listenansicht (Image settings)
  • Add the CSS class columns (second input field) (Expert settings)
  • Include it in an article via the element type Module

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 / Detailansicht (Image settings)
  • Include it in an article via the element type Module

Calendar

Follow these steps to place a calendar:

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

The ODD theme uses Headroom.js to hide or show the navigation when you scroll down or up. To deactivate this, edit the template fe_bootstrap_odd and delete or comment out the following line near the end of the file.

$combiner->add('bundles/pdirthemeodd/js/headroom.min.js');

<script charset="utf-8" src="<?php
    // add javascripts
    $combiner = new Combiner();
    $combiner->add('bundles/pdirthemeodd/bootstrap/dist/js/bootstrap.min.js');
    $combiner->add('bundles/pdirthemeodd/fontawesome/js/all.min.js');
    //$combiner->add('bundles/pdirthemeodd/js/headroom.min.js');
    $combiner->add('bundles/pdirthemeodd/js/scripts.min.js');
    echo $combiner->getCombinedFile();
?>"></script>

In the same way you could also deactivate Font Awesome by removing the following line.

$combiner->add('bundles/pdirthemeodd/fontawesome/js/all.min.js');

News

News list

Follow these steps to place a news list:

  • Select the module Newslist (under News)
  • Configure the 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 / Listenansicht (Image settings)
  • Add the CSS class columns (second input field) (Expert settings)
  • Include it in an article via the element type Module

News reader

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

  • Select the module Newsreader (under News)
  • Configure the settings (archives, fields)
  • Select the news template news_full_zeroone (Template settings)
  • Select the image size News & Events / Detailansicht (Image settings)
  • Include it in an article via the element type Module

Newsletter

Follow these steps to place a newsletter form:

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

Search engine

Follow these steps to place a search engine:

  • Select the module Search engine (under Applications)
  • Configure the settings
  • Select the custom template mod_search_zeroone (Template settings)
  • Include it in an article via the element type Module
Nov 9, 2026 Spare Zeit bei allen Webprojekten mit pdir+

Subsections of Modules

Maklermodul

The ODD theme already ships templates and stylesheets for the Maklermodul (real estate module).

Documentation

The Maklermodul documentation contains all information on installing and setting up the Maklermodul.

Including the stylesheets

Add the following line to custom.scss (/files/odd/scss) so that the list and detail view are displayed as in the screenshots.

@import 'maklermodul';

Setup

Creating pages

First create one page each for the list view and the detail view.

List view module

Create a module of type Immobilienliste (property list) as described in the documentation.

  • Select the property template makler_list_odd
  • Select the image size Maklermodul / Listenansicht

List view module List view module

Detail view module

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

  • Select the property template makler_details_extended_odd

Detail view module Detail view module

Header image module

Create a module of type MaklerModul Kopfbild (header image) as described in the documentation.

Header image module Header image module

Placing the modules

Place the modules for the list view and the exposé in the articles of the respective pages. For the header image, create another article placed in the header (above the article of the detail view).

Placing the modules Placing the modules

For the articles of the header image and the detail view, select the template mod_article_fullwidth in the article settings (wrench icon) under Template settings.

Placing the modules Placing the modules

Customizations

Always show the filters in the list view

If the filters in the list view should always be visible instead of only after clicking the button “Filter ausklappen”, you can achieve this with a small template change. Create the template makler_list_odd and remove the following two lines at around line 41:

<a href="<?= $this->staticListPage ?>" class="btn toggle-filter show-filter active">Filter ausklappen</a>
<a href="<?= $this->staticListPage ?>" class="btn toggle-filter hide-filter">Filter einklappen</a>

Examples

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

List view with button filter

List view with button filter List view with button filter

List view with select filter

List view with select filter List view with select filter

Exposé

Exposé Exposé

Nov 9, 2026 Spare Zeit bei allen Webprojekten mit pdir+

Multilingual sites

To build a multilingual website with the ODD theme, you can install the extension Contao Multilingual Pages [i18nl10n]. Then you do not have to duplicate the site structure, only the elements that are displayed in different languages. You find documentation for Contao 3 here; there is none for Contao 4 yet.

Alternatively, you can create a site structure for each language without this extension. You find more about this in the Contao manual.

Contao Multilingual Pages [i18nl10n]

If you do not want to duplicate the site structure, install the extension exploreimpact/contao-i18nl10n with the Contao Manager.

In the website root of the site structure you can select the alternative languages under i18nl10n settings.

Under the menu item Multilingual pages, add the pages in the other languages. To create all pages, click L10N for all.

The elements now have the option to select the language under L10n settings. Select Neutral if the element should be displayed in all languages.

Duplicating the site structure

If you prefer to work with several site structures, select the corresponding website root under ODD Elements in the article settings under Template settings.

Nov 9, 2026 Spare Zeit bei allen Webprojekten mit pdir+

Social Feed Bundle

Social Feed Bundle

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

How to set up the Facebook stream and how to place the modules is explained on the following page: Social Feed documentation.

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

One column

Two columns

Three columns

Four columns