Anpassungen

Theme anpassen

Wie du das Theme individuell anpassen kannst – etwa Farben, Schriften, Schriftgrößen, Header oder Footer – sowie eigenes CSS einbindest, erfährst du im Abschnitt Styling anpassen.

Standardmäßig sind alle Seiten unter Module, Layouts und Elemente so konfiguriert, dass sie weder von Suchmaschinen indexiert werden noch in den Suchergebnissen der Contao-internen Suche erscheinen. Du kannst das Verhalten jedoch jederzeit pro Seite anpassen – über die Felder Robots-Tag (unter Metadaten) und Nicht durchsuchen (unter Sucheinstellungen).

JavaScript-Anpassungen

Für eigenes JavaScript legst du am besten eine eigene Datei an und bindest sie anschließend im Seitenlayout ein. So bleiben Updates am Original-Theme problemlos möglich und deine Anpassungen sauber getrennt.

Elemente über ein eigenes Insert-Tag platzieren

Unter der Seite „Nature Theme Elemente“ befinden sich Artikel, die du mithilfe eines Insert-Tags an beliebiger Stelle auf deiner Website einbinden kannst. Du findest diese Artikel, indem du im linken Menü auf Artikel klickst und ganz nach unten scrollst.

In den Artikel-Einstellungen des jeweiligen Artikels (über das Werkzeug-Icon) wählst du unter Template-Einstellungen den passenden Theme Helper Tag aus. Das Feld Seitenname ermöglicht es dir, eine bestimmte Seite auszuwählen – dies ist jedoch nur bei einer Multi-Domain-Installation erforderlich.

Den Artikel kann man danach über folgenden Insert-Tag u. a. in einem HTML-Element oder einem Template platzieren: z. B. {{theme::content::NATURE01/01}}.

Wie du eigene Theme Helper Tags definieren kannst, findest du in der Theme Helper Dokumentation.

Layouts

Unter Themes → Seitenlayouts stehen dir bereits vier vorkonfigurierte Layouts zur Verfügung, die du in den Seiteneinstellungen unter Layout-Einstellungen einer Seite zuweisen kannst:

  • Einspaltiges Layout
  • Zweispaltiges Layout mit rechter Spalte
  • Zweispaltiges Layout mit linker Spalte
  • Dreispaltiges Layout

Zusätzlich gibt es spezielle Layouts, bei denen Logo und Navigation untereinander dargestellt werden. Dieses Feature ist ab NATURE Theme Version 1.7.0 verfügbar. Um es zu aktivieren, füge einfach die Body-Klasse header-block-layout hinzu.

Das Logo kannst du im Artikel „01_Logo“ bearbeiten, den du unter Nature Theme Elemente → 01_Header findest.

Die Inhalte des Footers bearbeitest du in den Artikeln unter Nature Theme Elemente → 02_Footer.

Logo anpassen

Im Artikel „01_Logo“ sind zwei Logos hinterlegt: eines für das helle Farbschema und eines für das dunkle Farbschema (Dark Mode). Das zweite Logo-Element erhält dabei die CSS-Klasse logo-light, damit es je nach gewähltem Farbschema bzw. im Dark Mode korrekt angezeigt wird.

Styling anpassen

Nach erfolgreicher Installation des Themes findest du die SCSS-Dateien in der Dateiverwaltung unter dem Pfad naturetheme/scss.

Je nach installierter Theme-Version gibt es zwei Varianten für deine individuellen Anpassungen:

Ältere Theme-Versionen:
Du nutzt die Dateien

  • custom.scss (für SCSS und CSS)
  • _custom_colors.scss (zum Ändern der Grundfarben und Auswahl eines Farbschemas)
  • _custom_variables.scss (für detailliertere Anpassungen wie Schriften oder Farben einzelner Elemente)

Um eine Variable anzupassen, entferne in den jeweiligen Dateien die Kommentarzeichen (Schrägstriche) vor der Zeile.

Neuere Theme-Versionen:
Ab der neuesten Version gibt es keine SCSS-Variablen mehr, sondern ausschließlich CSS-Variablen. Außerdem wurde die Datei _custom_colors.scss mit _custom_variables.scss zusammengeführt – du findest also nur noch eine Datei namens _custom_variables.scss. Dort kannst du alle Farb- und andere Variablen anpassen. Auch hier musst du die Zeilen auskommentieren, um Änderungen zu aktivieren.

In beiden Fällen kannst du in custom.scss weiterhin eigene SCSS- oder CSS-Anpassungen vornehmen.

Wenn die SCSS-Datei nicht mit dem Contao-internen Editor bearbeitet und mit einem FTP-Programm hochgeladen wurde, muss im Contao Backend unter Systemwartung noch der Skriptcache geleert und ggf. die Seite mit Strg + F5 neugeladen werden.

Der Theme-Ordner naturetheme darf in der Dateiverwaltung nicht umbenannt werden, ansonsten werden die SCSS-Dateien nicht mehr geladen. Du musst die Dateien auch nicht selber im Seitenlayout einbinden, sie werden bereits automatisch vom Theme geladen.

Farbschemen

Das Nature Theme wird standardmäßig mit einem hellen Layout und grüner Hauptfarbe ausgeliefert. Du hast aber auch die Möglichkeit, andere Farbschemata auszuwählen:

  • Helles Farbschema / Grüne Hauptfarbe
  • Helles Farbschema / Rote Hauptfarbe
  • Helles Farbschema / Blaue Hauptfarbe
  • Dunkles Farbschema / Schwarz-Weiß
  • Dunkles Farbschema / Grüne Hauptfarbe
  • Dunkles Farbschema / Rote Hauptfarbe
  • Dunkles Farbschema / Blaue Hauptfarbe

Alle oben genannten Farbschemata sind kontrastreich angepasst, um eine gute Lesbarkeit und Barrierefreiheit zu gewährleisten.

Zusätzlich gibt es noch ein grünes und ein blaues Farbschema, die nicht kontrastreich angepasst sind. Diese stammen aus einer früheren Theme-Version und sind weiterhin enthalten, um Rückwärtskompatibilität zu gewährleisten.

Wenn du auf ein anderes Farbschema umstellen möchtest, kommentiere in der Datei _custom_variables.scss bzw. in der älteren Theme-Version in der _custom_colors.scss unter Colour Schemes einfach die entsprechende Zeile aus (Schrägstriche entfernen). Gegebenenfalls musst du die Seite mit Strg + F5 neu laden, damit die Änderung wirksam wird.

@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';

Dark Mode aktivieren oder deaktivieren

Moderne Betriebssysteme und Browser unterstützen den Dark Mode (Dunkelmodus), der die Benutzeroberfläche mit dunklen Hintergründen und helleren Textfarben darstellt – ganz unabhängig vom Gerät.

Im Nature Theme kannst du den Dark Mode aktivieren, indem du in der Datei _custom_variables.scss bzw. in älteren Versionen in der Datei _custom_colors.scss die Kommentarzeichen (//) vor der Import-Zeile entfernst:

//@import 'color_schemes/nature_dark_mode';

Variablen

Wichtiger Hinweis
Vielleicht wunderst du dich, wenn du die neueste Version des NATURE Themes nutzt, wo die _custom_colors.scss abgeblieben ist. Keine Sorge, ab der NATURE Version 2.5.0 ist es so: Bei einer Neuinstallation des NATURE Themes gibt es nur noch die _custom_variables.scss, in der jetzt alle Farb- und Variablen-Definitionen zusammengefasst sind.

Wichtig für dich:

  • v2 (Neuinstallation ab Version 2.5.0): Bei einer Neuinstallation des Themes existiert nur noch die _custom_variables.scss mit allen Farb- und Variablen-Einstellungen. Für individuelle Anpassungen können CSS-Variablen genutzt werden.
  • v1 (Ältere Version als 2.5.0 / Update von einer älteren Version als 2.5.0): Wenn du das NATURE Theme aktualisiert oder eine ältere Version als 2.5.0 installiert hast, bleiben sowohl die _custom_variables.scss als auch die _custom_colors.scss erhalten. Für individuelle Anpassungen werden SCSS-Variablen genutzt.

ℹ️ Wie aktualisiere ich meine bestehende Installation auf die neue Version mit CSS-Variablen?
Ab Version 2.5.0 wurde das NATURE Theme umfassend barrierefrei angepasst und auf Bulma 1.x umgestellt.
Wenn du alle aktuellen und zukünftigen Features nutzen möchtest, solltest du auf die neue Version wechseln.
Eine ausführliche Anleitung findest du hier: Update von V1 auf V2.

In unserem Theme kannst du viele Styles über CSS-Variablen anpassen. Diese sind im Stylesheet bereits vorbereitet, aber standardmäßig auskommentiert (mit //). Um eine Variable zu aktivieren oder zu überschreiben, entferne einfach die // am Anfang der Zeile.

📁 Wo du die Variablen findest
Die Datei zur Anpassung der Variablen findest du in der Dateiverwaltung unter naturetheme/scss/_custom_variables.scss.

✅ Beispiel: Variable aktivieren

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

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

🧠 Wichtig: Zwei Arten von Variablen
Es gibt zwei grundsätzliche Arten von Variablen, je nachdem wo und wie sie definiert werden:

1. Globale Theme-Variablen (:root)
Diese Variablen gelten seitenweit und können direkt innerhalb des :root-Blocks aktiviert bzw. angepasst werden. Sie beeinflussen grundlegende Designwerte wie Farben, Schriftgrößen oder Abstände.

Beispiel:

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

✅ Diese Werte stehen dann überall im Theme als var(--bulma-primary) usw. zur Verfügung.

2. Komponentenspezifische Variablen in CSS-Klassen
Einige Variablen wirken nur innerhalb bestimmter CSS-Klassen oder Komponenten, z. B. .navbar, .button, .pagination usw. Das liegt daran, dass Bulma bei diesen Komponenten eigene Klassen-Styles verwendet, die du gezielt überschreiben musst.

Beispiel:

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

⚠️ Diese Variablen müssen innerhalb der jeweiligen CSS-Klasse gesetzt werden, da sie sonst keine Wirkung entfalten.

🔧 Wichtigste CSS-Variablen im Überblick
Hier findest du eine Übersicht der wichtigsten CSS-Variablen, die du in der Datei naturetheme/scss/_custom_variables.scss anpassen kannst.

Variable Bedeutung
--bulma-primary Hauptfarbe des Themes
--bulma-primary-invert Kontrastfarbe zur Hauptfarbe – z. B. für weißen Text auf farbigem Button
--bulma-primary-bg-text Text in der Hauptfarbe – z. B. für Links oder Headlines auf hellem Hintergrund
--bulma-text Standard-Textfarbe
--bulma-text-invert Kontrastfarbe für Texte auf dunklem Hintergrund (z. B. –bulma-black)
--bulma-link Linkfarbe
--bulma-link-hover Linkfarbe bei Hover
--bulma-background Hintergrundfarbe der Seite
--bulma-boxes-background Hintergrundfarbe von Boxen (z. B. Teaser, Kontakt, News, Event, Formular, Breadcrumbs)
--bulma-boxes-color Textfarbe in Boxen (z. B. Teaser, Kontakt, News, Event, Formular, Breadcrumbs)
--bulma-info Hintergrundfarbe für Info-Boxen (siehe Textelemente auf der Demo-Seite)
--bulma-success Hintergrundfarbe für Erfolgs-Boxen
--bulma-warning Hintergrundfarbe für Warnungs-Boxen
--bulma-danger Hintergrundfarbe für Achtung-Boxen
--bulma-family-primary Primäre Schriftart für Fließtext
--bulma-family-heading Schriftart für Überschriften
--bulma-font-size Grundschriftgröße für den Body-Text
--bulma-body-line-height Zeilenhöhe für Fließtext
--bulma-font-weight Standard-Schriftstärke für Text
--bulma-strong-weight Schriftstärke für -Elemente
--bulma-container-padding Innenabstand (Padding) des Containers (links und rechts)
--bulma-article-padding Vertikaler Abstand (Padding) von Artikeln oder Inhaltsbereichen
--bulma-label-color Farbe von Formular-Labels

In unserem Theme kannst du viele Styles über SCSS-Variablen anpassen. Diese sind im Stylesheet bereits vorbereitet, aber standardmäßig auskommentiert (mit //). Um eine Variable zu aktivieren oder zu überschreiben, entferne einfach die // am Anfang der Zeile.

Variablen der _custom_colors.scss

Variable Bedeutung
$primary Hauptfarbe
$text Textfarbe
$link Linkfarbe
$link-hover Linkfarbe bei Hover
$background Hintergrundfarbe der Seite
$boxes-background Hintergrundfarbe von Boxen,Teaserboxen, Kontakt-Box, News-Boxen, Event-Boxen, Formularfelder, Breadcrumb etc.
$boxes-color Textfarbe von Boxen,Teaserboxen, Kontakt-Box, News-Boxen, Event-Boxen, Formularfelder, Breadcrumb etc.
$info Hintergrundfarbe für Info-Box,siehe Textelemente auf Demo-Seite
$success Hintergrundfarbe für Erfolgs-Box,siehe Textelemente auf Demo-Seite
$warning Hintergrundfarbe für Warnungs-Box,siehe Textelemente auf Demo-Seite
$danger Hintergrundfarbe für Achtung-Box,siehe Textelemente auf Demo-Seite

Variablen der _custom_variables.scss

In der _custom_variables.scss sind bereits diverse Variablen definiert um das Theme nach Ihren Vorstellungen anzupassen. Das Bulma Framework, auf dem das Theme basiert, bietet auch noch mehr Variablen an, die Sie definieren können. Diese finden Sie für folgende Elemente in der Bulma Dokumentation:

Breadcrumb
Buttons
Footer
Formulare
Hauptnavigation
Modaler Dialog
Pagination
Unterseiten-Navigation
Tabellen
Tabs

Schriftart einbinden

Wenn du eine eigene Schriftart verwenden möchtest, kannst du sie in der Datei _custom_variables.scss ganz oben einbinden.

🔗 Empfehlung: Schriftart über Google Webfonts Helper

Eine super Möglichkeit, um schnell und unkompliziert eine Schriftart einzubinden, bietet die Seite:

👉 Google Webfonts Helper

Dort kannst du:

  • eine Schriftart aus der Google Fonts Bibliothek auswählen,
  • die passenden Schriftschnitte (Styles) wählen,
  • eine ZIP-Datei mit den Schriftdateien herunterladen,
  • und dir direkt den passenden @font-face-CSS-Code generieren lassen.
  • Wichtig: Gib dort bei „Customize Folder prefix“ den Pfad zu deinem Schriftarten-Ordner an, z. B. /files/naturetheme/fonts/.

📄 Beispiel: CSS in _custom_variables.scss einfügen
Kopiere den generierten CSS-Code aus der Website (z. B. für die Schrift „Ubuntu“) und füge ihn ganz oben in die Datei _custom_variables.scss ein:

/* 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');
}

Anschließend kannst du die Schriftart in den CSS-Variablen wie folgt zuweisen:

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

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

Artikel

CSS-Stile

In den Artikeleinstellungen findest du unter „CSS-Stil Auswahl“ die Möglichkeit, zwischen verschiedenen vordefinierten Layout-Stilen zu wählen.

🖥️ Artikel mit voller Bildschirmbreite
Dieser Stil entfernt den Seitenabstand – der Artikel wird über die gesamte Bildschirmbreite dargestellt, ohne linken und rechten Rand.

🖥️ Artikel mit voller Bildschirmhöhe
Dieser Stil sorgt dafür, dass der Artikel mindestens die Höhe des Bildschirms einnimmt. Der Inhalt wird dabei vertikal zentriert dargestellt – ideal für ein Intro oder eine Startseite.

👉 Beispiele findest du in der Demo-Seite des Themes.

Hintergrund- und Textfarbe ändern

Du kannst die Hintergrund- und Textfarbe eines Artikels ganz einfach über CSS-Klassen steuern. Beispielsweise sorgen die Klassen has-text-white und has-background-dark für weißen Text auf dunklem Hintergrund.

👉 Beispiele dazu findest du in der Demo.
👉 Für schräge Kanten mit Hintergrundfarben und weitere Details siehe die ausführliche Dokumentation zu schrägen Kanten.

Eine vollständige Übersicht aller verfügbaren Farbklassen findest du in der offiziellen Bulma Dokumentation.