Anpassungen

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 ODD Elements 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.

Elemente über ein eigenes Insert-Tag platzieren

In den Artikel-Einstellungen des jeweiligen Artikels (Werkzeug-Icon) wählt man dafür unter Template-Einstellungen den passenden Theme Helper Tag aus.

Elemente über ein eigenes Insert-Tag platzieren

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

Elemente über ein eigenes Insert-Tag platzieren

Wie Sie eigene Theme Helper Tags definieren können, finden Sie in der Theme Helper Dokumentation.

Header anpassen

Die Inhalte des Headers liegen in den Artikeln unter ODD Elements > 01 / Kopfzeile.

Logo anpassen

Das Logo können Sie im Artikel 01/01 Logo austauschen.

Die Kontaktdaten sowie die Social Media Links können Sie im Artikel 01/02 Top Navbar anpassen.

Wahl zwischen geraden oder schrägen Header

Wie Sie den geraden Header aktivieren können, wird auf der Seite Layouts erklärt.

Die Inhalte des Footer liegen in den Artikeln unter ODD Elements > 02 / Fußzeile. Diese Artikel sind in den Modulen Footer / Main und Footer / Copyright eingebunden.

Farben und Schriften anpassen

Wenn das Theme erfolgreich installiert wurde, befinden sich die SCSS-Dateien in der Dateiverwaltung unter dem Pfad odd/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, die Schriftgrößen der Überschriften beeinflussen 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 odd 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 ODD Theme wird standardmäßig mit einem grünen Layout ausgeliefert. Sie haben aber auch die Möglichkeit ein graues oder blaues Farbschema auszuwählen.

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.

Variablen der _custom_colors.scss

Grundfarben:

$oddColor1: Hauptfarbe helle Abstufung
$oddColor2: Hauptfarbe
$oddColor3: Hauptfarbe dunkle Abstufung
$oddColor4: Sekundärfarbe
$oddColor5: Sekundärfarbe helle Abstufung
$oddColor6: Boxen und Schrift
$oddColor7: Seiten-Hintergrund


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/odd/fonts/font.woff"),
	url("/files/odd/fonts/font.ttf"),
	url("/files/odd/fonts/font.svg");
}

In der _custom_variables.scss sind zwei Variablen zum Anpassen der Schriftart definiert ($mainFont: Anpassen der Hauptschriftart, $headingFont: Schriftart nur für Überschriften anpassen). Kommentieren Sie eine Zeile aus (Schrägstriche entfernen) und fügen den Namen der Schriftart am Anfang hinzu.

$mainFont: 'Beispiel-Font', 'Muli', sans-serif;
$headingFont: 'Beispiel-Font', 'Cabin', sans-serif;