Customization

Customizing the theme

How to customize the theme – e.g. colors, fonts, font sizes, header or footer – and how to add your own CSS is explained in the section Customizing the styling.

By default all pages under Modules, Layouts and Elements are configured so that they are neither indexed by search engines nor appear in the results of the Contao search. You can change this per page at any time – with the fields Robots tag (under Meta data) and Do not search (under Search settings).

JavaScript customization

For your own JavaScript, it is best to create a separate file and include it in the page layout. This keeps updates of the original theme easy and your customizations cleanly separated.

Placing elements with your own insert tag

The page “Nature Theme Elemente” contains articles that you can include anywhere on your website with an insert tag. You find these articles by clicking Articles in the left menu and scrolling all the way down.

In the article settings of the article (via the wrench icon), select the matching Theme Helper Tag under Template settings. The field Page name lets you select a specific page – this is only necessary in a multi-domain installation.

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

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

Layouts

Under Themes → Page layouts there are four preconfigured layouts that you can assign to a page in the page settings under Layout settings:

• One-column layout
• Two-column layout with right column
• Two-column layout with left column
• Three-column layout

There are also special layouts in which the logo and navigation are stacked. This feature is available from NATURE theme version 1.7.0. To activate it, simply add the body class header-block-layout.

Header and footer

You can edit the logo in the article “01_Logo”, which you find under Nature Theme Elemente → 01_Header.

You edit the footer content in the articles under Nature Theme Elemente → 02_Footer.

Customizing the logo

The article “01_Logo” contains two logos: one for the light color scheme and one for the dark color scheme (dark mode). The second logo element gets the CSS class logo-light so that it is displayed correctly depending on the chosen color scheme or in dark mode.

Customizing the styling

After installing the theme, you find the SCSS files in the file manager under the path naturetheme/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.

Color schemes

By default the NATURE 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 / red primary color
• Light color scheme / blue primary color
• Dark color scheme / black and white
• Dark color scheme / green primary color
• Dark color scheme / red primary color
• Dark color scheme / blue primary color

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

In addition there is a green and a blue 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/nature_green_colors_contrast';
//@import 'color_schemes/nature_blue_colors_contrast';
//@import 'color_schemes/nature_red_colors_contrast';

//@import 'color_schemes/nature_dark_colors_contrast';
//@import 'color_schemes/nature_dark_green_colors_contrast';
//@import 'color_schemes/nature_dark_blue_colors_contrast';
//@import 'color_schemes/nature_dark_red_colors_contrast';

//@import 'color_schemes/nature_blue_colors';
//@import 'color_schemes/nature_red_colors';

Activating or deactivating dark mode

Modern operating systems and browsers support dark mode, which displays the user interface with dark backgrounds and lighter text colors – regardless of the device.

In the NATURE theme you activate dark mode by removing the comment characters (//) in front of the import line in _custom_variables.scss (or _custom_colors.scss in older versions):

//@import 'color_schemes/nature_dark_mode';

Variables

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

What this means for you:

• v2 (new installation from version 2.5.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 2.5.0 / update from a version older than 2.5.0): If you updated the NATURE theme or installed a version older than 2.5.0, both _custom_variables.scss and _custom_colors.scss remain. Use SCSS variables for your customizations.

// Vorher (nicht aktiv):
//--bulma-primary: #5ca152;

// Nachher (aktiv):
--bulma-primary: #5ca152;

:root {
  --bulma-primary: #5ca152;
  --bulma-font-size: 1.2rem;
}

.navbar {
  --bulma-navbar-background-color: #eaeaea;
}

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/naturetheme/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/naturetheme/fonts/ubuntu-v20-latin-regular.woff2') format('woff2');
}

Then assign the font in the CSS variables as follows:

:root {
    --bulma-family-primary: 'Ubuntu', sans-serif;
    --bulma-family-heading: 'Ubuntu', sans-serif;
}

$family-primary: 'Ubuntu', sans-serif;
$family-heading: 'Ubuntu', sans-serif;

Articles

CSS styles

In the article settings under “CSS style selection” you can choose between different predefined layout styles.

🖥️ Article with full screen width This style removes the page margin – the article is displayed across the full screen width, without a left and right margin.

🖥️ Article with full screen height This style makes the article at least as high as the screen. The content is centered vertically – ideal for an intro or a home page.

👉 You find examples on the demo page of the theme.

Changing background and text color

You can easily control the background and text color of an article with CSS classes. For example, the classes has-text-white and has-background-dark give you white text on a dark background.

👉 You find examples in the demo. 👉 For slanted edges with background colors and more details, see the detailed documentation on slanted edges.

You find a complete overview of all available color classes in the official Bulma documentation.