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

Customization

JavaScript customization

For your own JavaScript, it is best to create a separate file and include it in the theme.

Placing elements with your own insert tag

The page ODD Elements contains articles that you can include anywhere on your website with an insert tag. To get to the articles, click Articles in the left menu and scroll all the way down.

Placing elements with your own insert tag Placing elements with your own insert tag

In the article settings (wrench icon) of the article, select the matching Theme Helper Tag under Template settings.

Selecting the Theme Helper Tag Selecting the Theme Helper Tag

You can then add the article with the following insert tag in an HTML element or template, e.g. {{theme::content::ODD01/01}}.

Including the article with an insert tag Including the article with an insert tag

How to define your own Theme Helper Tags is explained in the Theme Helper documentation.

Customizing the header

You find the header content in the articles under ODD Elements > 01 / Kopfzeile.

You replace the logo in the article 01/01 Logo.

You find the contact details and social media links in the article 01/02 Top Navbar, where you can change them.

Choosing between a straight or slanted header

How to activate the straight header is explained on the page Layouts.

You find the footer content in the articles under ODD Elements > 02 / Fußzeile. These articles are included in the modules Footer / Main and Footer / Copyright.

Customizing colors and fonts

After installing the theme, you find the SCSS files in the file manager under the path odd/scss.

Depending on the installed theme version, there are two ways to make your own customizations:

Older theme versions: You use the files

  • custom.scss (for SCSS and CSS)
  • _custom_colors.scss (to change the base colors and choose a color scheme)
  • _custom_variables.scss (for more detailed adjustments such as fonts or colors of individual elements)

To change a variable, remove the comment characters (slashes) in front of the line in the respective file.

Newer theme versions: As of the latest version there are no SCSS variables anymore, only CSS variables. In addition, _custom_colors.scss was merged into _custom_variables.scss – so you only find one file named _custom_variables.scss. There you can adjust all color and other variables. Here, too, you have to uncomment the lines to activate changes.

In both cases you can still add your own SCSS or CSS in custom.scss.

Tip

If the SCSS file was not edited with the Contao editor but uploaded with an FTP program, you have to purge the script cache under System maintenance in the Contao back end and, if necessary, reload the page with Ctrl + F5.

Note

Do not rename the theme folder odd in the file manager, otherwise the SCSS files will no longer be loaded. You do not have to include the files in the page layout yourself, the theme already loads them automatically.

Color schemes

By default the ODD theme comes with a light layout and a green primary color. You can also choose other color schemes:

  • Light color scheme / green primary color
  • Light color scheme / blue primary color
  • Light color scheme / red primary color
  • Light color scheme / yellow primary color
  • Light color scheme / purple primary color
  • Light color scheme / pastel colors
  • Dark color scheme

All of the color schemes above are adjusted for high contrast to ensure good readability and accessibility.

In addition there is a green, blue and grey color scheme that is not adjusted for high contrast. These come from an earlier theme version and are still included for backward compatibility.

To switch to a different color scheme, uncomment the corresponding line under Colour Schemes in _custom_variables.scss (or _custom_colors.scss in the older theme version) by removing the slashes. You may need to reload the page with Ctrl + F5 for the change to take effect.

@import 'color_schemes/odd_green_colors_contrast';
//@import 'color_schemes/odd_blue_colors_contrast';
//@import 'color_schemes/odd_grey_colors_contrast';
//@import 'color_schemes/odd_red_colors_contrast';
//@import 'color_schemes/odd_yellow_colors_contrast';
//@import 'color_schemes/odd_purple_colors_contrast';
//@import 'color_schemes/odd_pastel_colors_contrast';

//@import 'color_schemes/odd_grey_colors';
//@import 'color_schemes/odd_blue_colors';

Variables

Important note If you use the latest version of the ODD theme, you may wonder where _custom_colors.scss has gone. Don’t worry: as of ODD version 3.7.0, a new installation of the ODD theme only has _custom_variables.scss, which now contains all color and variable definitions.

What this means for you:

  • v2 (new installation from version 3.7.0): A new installation of the theme only has _custom_variables.scss with all color and variable settings. Use CSS variables for your customizations.
  • v1 (version older than 3.7.0 / update from a version older than 3.7.0): If you updated the ODD theme or installed a version older than 3.7.0, both _custom_variables.scss and _custom_colors.scss remain. Use SCSS variables for your customizations.
Tip

ℹ️ How do I update my existing installation to the new version with CSS variables? As of version 3.7.0 the ODD theme was thoroughly adapted for accessibility. If you want to use all current and future features, you should switch to the new version. You find a detailed guide here: Update to CSS variables.

​

In our theme you can adjust many styles via CSS variables. They are already prepared in the stylesheet, but commented out by default (with //). To activate or override a variable, simply remove the // at the beginning of the line.

📁 Where to find the variables You find the file for adjusting the variables in the file manager under odd/scss/_custom_variables.scss.

✅ Example: activating a variable

// Vorher (nicht aktiv):
//--oddColor1: #A3CC00;

// Nachher (aktiv):
--oddColor1: #A3CC00;

🔧 The most important CSS variables Here is an overview of the most important CSS variables that you can adjust in odd/scss/_custom_variables.scss.

VariableMeaning
--oddColor1Primary color, light shade
--oddColor2Primary color
--oddColor3Primary color, dark shade
--oddColor4Secondary color
--oddColor5Secondary color, light shade
--oddColor6Boxes and text
--oddColor7Page background

Base colors in _custom_colors.scss

$oddColor1: Primary color, light shade $oddColor2: Primary color $oddColor3: Primary color, dark shade $oddColor4: Secondary color $oddColor5: Secondary color, light shade $oddColor6: Boxes and text $oddColor7: Page background

Adding a font

If you want to use your own font, you can include it at the very top of _custom_variables.scss.

🔗 Recommendation: fonts via Google Webfonts Helper

A great way to include a font quickly and easily is the site:

👉 Google Webfonts Helper

There you can:

  • choose a font from the Google Fonts library,
  • select the font styles you need,
  • download a ZIP file with the font files,
  • and generate the matching @font-face CSS code right away.
  • Important: Under “Customize Folder prefix”, enter the path to your fonts folder, e.g. /files/odd/fonts/.

📄 Example: adding the CSS to _custom_variables.scss Copy the generated CSS code from the website (e.g. for the font “Ubuntu”) and paste it at the very top of _custom_variables.scss:

/* ubuntu-regular - latin */
@font-face {
  font-display: swap;
  font-family: 'Ubuntu';
  font-style: normal;
  font-weight: 400;
  src: url('/files/odd/fonts/ubuntu-v20-latin-regular.woff2') format('woff2');
}

Then assign the font in the CSS variables in _custom_variables.scss as follows:

​
:root {
  --mainFont: 'Ubuntu', sans-serif;
  --headingFont: 'Ubuntu', sans-serif;
}
$mainFont: 'Ubuntu', sans-serif;
$headingFont: 'Ubuntu', sans-serif;