Anpassungen

Theme anpassen

Wie Sie das Theme anpassen (z. B. Farben, Schriften, Schriftgrößen, Header, Footer) sowie eigenes CSS definieren können, ist unter Styling anpassen erklärt.

Alle Seiten unter Module, Layouts und Elemente sind für Suchmaschinen standardmäßig als nicht indexierbar eingestellt und erscheinen auch nicht in den Suchergebnissen der Contao-Suchmaschine. Dies können Sie bei jeder Seite bei den Feldern Robots-Tag (unter Metadaten) und Nicht Durchsuchen (unter Sucheinstellungen) ändern.

JavaScript-Anpassungen

Für eigenes JavaScript legen Sie sich bitte eine eigene Datei an und binden diese im Theme ein.

Elemente über ein eigenes Insert-Tag platzieren

Unter der Seite Nature Theme Elemente befinden sich Artikel, die mittels eines Insert-Tags an jeder beliebigen Stelle der Webseite eingebunden werden können. Zu den Artikeln gelangen Sie, indem Sie im linken Menü auf Artikel klicken und ganz nach unten scrollen.

In den Artikel-Einstellungen des jeweiligen Artikels (Werkzeug-Icon) wählt man dafür unter Template-Einstellungen den passenden Theme Helper Tag aus. Im Feld Seitenname kann man die jeweilige Seite auswählen, was aber nur bei einer Multi-Domain-Installation notwendig ist.

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 Sie eigene Theme Helper Tags definieren können, finden Sie in der Theme Helper Dokumentation.

Layouts

Unter Themes / Seitenlayouts finden Sie bereits vier verschiedene Layouts, die Sie einer Seite bei den Seiteneinstellungen unter Layout-Einstellungen zuweisen können.

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

Zusätzlich gibt es noch Layouts um Logo und Navigation untereinander darzustellen. Dieses Feature ist ab der NATURE Theme Version 1.7.0 verfügbar. Dazu muss lediglich die Body-Klasse header-block-layout hinzugefügt werden.

Das Logo können Sie im Artikel 01_Logo unter Nature Theme Elemente / 01_Header bearbeiten.

Die Inhalte des Footers können Sie in den Artikeln unter Nature Theme Elemente / 02_Footer bearbeiten.

Logo anpassen

Im Artikel 01_Logo sind zwei Logos platziert, jeweils eines für das helle Farbschema und das dunkle Farbschema bzw. dem Dark Mode. Das zweite Element bekommt dabei noch die Klasse logo-light, damit es entsprechend dem gewählten Farbschema bzw. im Dark Mode angezeigt werden kann.

Styling anpassen

Wenn das Theme erfolgreich installiert wurde, befinden sich die SCSS-Dateien in der Dateiverwaltung unter dem Pfad naturetheme/scss. Für individuelle Anpassungen nutzen Sie einfach die custom.scss, in der Sie sowohl SCSS oder auch normales CSS schreiben können, sowie die _custom_colors.scss und _custom_variables.scss.

In der _custom_colors.scss können Sie die Grundfarben des Themes verändern und ein anderes Farbschema auswählen. Wenn Sie eine Variable anpassen möchten, müssen Sie die Zeile auskommentieren (Schrägstriche entfernen).

In der _custom_variables.scss können Sie individuellere Anpassungen vornehmen, u. a. Schriften austauschen oder Farben von Elementen und Modulen anpassen. Wenn Sie eine Variable anpassen möchten, müssen Sie die Zeile auskommentieren (Schrägstriche entfernen).

Wenn Sie lieber mit CSS-Dateien statt mit SCSS-Dateien arbeiten wollen, können Sie über Themes - Stylesheets einen neuen Stylesheet anlegen und ihn im Layout bei Interne Stylesheets einbinden. Das CSS wird anschließend automatisch nach dem CSS des ODD Theme geladen.

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. Sie haben aber auch die Möglichkeit andere Farbschemas auszuwählen:

  • Helles Farbschema / Grüne Hauptfarbe
  • Helles Farbschema / Rote Hauptfarbe
  • Helles Farbschema / Blaue Hauptfarbe
  • Dunkles Farbschema / Grüne Hauptfarbe
  • Dunkles Farbschema / Rote Hauptfarbe
  • Dunkles Farbschema / Blaue Hauptfarbe

Wenn Sie auf ein Layout umstellen wollen, kommentieren Sie in der _custom_colors.scss die entsprechende Zeile bei Colour Schemes aus (Schrägstriche entfernen). Gegebenenfalls müssen Sie die Seite mit Strg + F5 neuladen, damit die Änderung greift.

Um bspw. ein dunkles Farbschema mit roter Hauptfarbe zu aktivieren, kommentieren Sie die Zeile für das rote und dunkle Farbschema jeweils aus, z. B.:

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

Dark Mode für iOS

In iOS 13 haben Sie die Möglichkeit den Dark Mode bzw. Dunkelmodus zu aktivieren, der die Benutzeroberfläche in einen schwarzen Hintergrund und den Text zur besseren Lesbarkeit in eine hellere Farbe ändert. Wenn Sie den Dark Mode aktivieren wird im Nature Theme automatisch zu einem dunkleren Farbschema geändert, egal welches Farbschema Sie gerade aktiv haben. Dies hat den Vorteil, dass nachts Ihre Augen weniger belastet werden und es besteht eine geringe Chance, dass die Akkulaufzeit damit verbessert werden kann.

In der _custom_colors.scss können Sie den Dark Mode auch deaktivieren, indem Sie die entsprechende Zeile einkommentieren (zwei Schrägstriche an den Anfang der Zeile).

//@import 'color_schemes/nature_dark_mode';

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

Um eine Schriftart einzubinden, fügen Sie in der _custom_variables.scss ganz am Anfang z. B. folgenden CSS-Code ein. Ersetzen Sie den Namen und die Pfade der Schriftart. Der Pfad muss immer mit einem / beginnen.

@font-face {
	font-family: "Beispiel-Font";
	font-style: normal;
	font-weight: normal;
	src: url("/files/naturetheme/fonts/font.woff"),
	url("/files/naturetheme/fonts/font.ttf"),
	url("/files/naturetheme/fonts/font.svg");
}

Am Anfang der Datei sind zwei Variablen zum Anpassen der Schriftart definiert ($family-primary: Anpassen der Hauptschriftart, $family-heading: Schriftart nur für Überschriften anpassen). Kommentieren Sie eine Zeile aus (Schrägstriche entfernen) und fügen den Namen der Schriftart am Anfang hinzu.

$family-primary: 'Beispiel-Font', 'Roboto', sans-serif;
$family-heading: 'Beispiel-Font', 'Roboto Slab', sans-serif;

Artikel

CSS-Stile

In den Artikeleinstellungen haben Sie unter CSS-Stil Auswahl die Möglichkeit zwischen verschiedenen CSS-Stilen zu wählen.

  • Artikel mit voller Bildschirmbreite: Ohne Abstand nach links und rechts.

  • Artikel mit voller Bildschirmhöhe: Inhalt nimmt mindestens die Bildschirmhöhe ein und wird vertikal zentriert. Beispiele finden Sie in der Demo.

CSS-Klassen

Um die Hintergrund- oder Textfarbe des Artikels zu ändern, können Sie verschiedene CSS-Klassen definieren, z. B. has-text-white und has-background-dark für einen dunklen Hintergrund mit weißen Text. Beispiele finden Sie in der Demo.

Alle verfügbaren Klassen finden Sie in der Bulma Dokumentation.