Layouts

Layout with straight header

By default the ODD theme comes with a slanted header. To activate the straight header, select a layout with a straight header in the page settings.

Among the modules there is a navigation module for the slanted and the straight header (Navigationsleiste mit Schräge and Navigationsleiste ohne Schräge), which is included in the respective layouts.

You find an example on the page Layout with straight header.

One- and multi-column layouts

Under Themes > Page layouts various layouts for one-, two- and three-column layouts with a slanted or straight header are already created, which you can assign in the page settings under Layout settings.

FAQ

Images

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

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

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>

Labels & translations

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

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

Display

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

Other

<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() ?>">

Multidomain

If several domains in one Contao installation should use the ODD 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.

1) Create the SCSS files

Create a folder in the file manager under odd/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 path of the color schemes as follows.

//@import '../../../../public/bundles/pdirthemeodd/scss/color_schemes/odd_grey_colors';
//@import '../../../../public/bundles/pdirthemeodd/scss/color_schemes/odd_blue_colors';

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

@charset "UTF-8";

@font-face {
  font-family: 'Cabin';
  font-display: swap;
  src: local('Cabin'),
  url('/bundles/pdirthemeodd/fonts/Cabin/cabin-regular-webfont.woff2') format('woff2'),
  url('/bundles/pdirthemeodd/fonts/Cabin/cabin-regular-webfont.woff') format('woff'),
  url('/bundles/pdirthemeodd/fonts/Cabin/cabin-regular-webfont.ttf') format('ttf'),
  url('/bundles/pdirthemeodd/fonts/Cabin/cabin-regular-webfont.eot') format('eot');
}

@font-face {
  font-family: 'Muli';
  font-display: swap;
  src: local('Muli'),
  url('/bundles/pdirthemeodd/fonts/Muli/muli-regular-webfont.woff2') format('woff2'),
  url('/bundles/pdirthemeodd/fonts/Muli/muli-regular-webfont.woff') format('woff'),
  url('/bundles/pdirthemeodd/fonts/Muli/muli-regular-webfont.ttf') format('ttf'),
  url('/bundles/pdirthemeodd/fonts/Muli/muli-regular-webfont.eot') format('eot');
}

@import "../../../../public/bundles/pdirthemeodd/scss/_odd_colors";
@import "_custom_colors";
@import "../../../../public/bundles/pdirthemeodd/scss/_odd_variables";
@import "_custom_variables";

@import '../../../../public/bundles/pdirthemeodd/scss/style';

@import 'custom';

2) Create a template

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

In line 41, add the newly created folder from the file manager to getCombinedStylesheet().

<link rel="stylesheet" type="text/css" media="all" href="<?= ContaoThemesNet\ThemeOddBundle\ThemeUtils::getCombinedStylesheet('domain2'); ?>">

3) Create a layout

Go to Themes and Edit the page layouts of the theme 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 (Layout settings -> Assign a layout).

5) ODD Elements

In the article settings of the header and footer content (under ODD Elements) you can select the corresponding page under Template settings so that the content of this article is actually used.

Update to CSS variables

With version 3.7.0 the ODD theme was made accessible and all SCSS variables were switched to CSS variables. This means a manual intermediate step is necessary when updating from an older version (< 3.7.0) to a newer version (≥ 3.7.0).

Requirements

• Existing installation of the ODD theme < 3.7.0
• Update to Contao 5

1. Update the theme

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

2. Changes to the SCSS files

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

📂 Old structure (< 3.7.0)

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

📂 New structure (≥ 3.7.0)

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

3. Create the new theme files

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

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

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

$oddColor1: #b6cf92;

New (V2 – CSS variables):

:root {
  --oddColor1: #b6cf92;
}

CSS variables are used in code like this:

color: var(--oddColor1);

5. Update SCSS customizations

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

Example:

/* Vorher */
color: $oddColor1;

/* Neu */
color: var(--oddColor1);

Accessibility

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

Accessibility

Accessibility in the ODD theme (version 3.7.0 and later)

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

1. New accessible templates (version 3.7.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 etc. These templates have the suffix _bf (German “barrierefrei”, accessible).

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

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