Anpassungen

Das Logo kann im Artikel unter Elemente > 01 Header bearbeitet werden.

Die Inhalte des Footers können in dem Artikel unter Elemente > 03 Footer bearbeitet werden.

Header und Footer Inhalte anpassen

Styling anpassen

Wenn das Theme erfolgreich installiert wurde, befinden sich die SCSS-Dateien in der Dateiverwaltung unter dem Pfad convert/scss. Für individuelle Anpassungen kannst du einfach die custom.scss, in der Sie sowohl SCSS als auch normales CSS verwendet werden kann, und die _custom_variables.scss nutzen.

In der _custom_variables.scss kannst du die Farben und Schriftart des Themes verändern. Wenn du eine Variable anpassen möchtest, muss die Zeile entkommentiert werden (Schrägstriche entfernen).

Wenn du lieber mit CSS-Dateien statt mit SCSS-Dateien arbeiten möchtest, kannst du ü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 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 convert 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 CONVERT Theme wird standardmäßig mit einem hellen Layout in orangenen Farben ausgeliefert. Sie haben aber die Möglichkeit andere Farbschemen zu aktivieren:

  • Helles Farbschema - Grün/Blau

Um zu einem anderen Layout zu wechseln, entkommentieren (Schrägstriche entfernen) Sie bitte in der Datei _custom_variables.scss im Abschnitt Colour Schemes die Zeile mit dem gewünschten Farbschema. Gegebenenfalls ist es nötig, die Seite im Browser mit Strg + F5 neuzuladen, damit die Änderungen wirksam werden.

Beispiel um das grün/blaue Farbschema zu aktivieren:

@import '#{$scssPath}/colour_schemes/green_blue';

Sollte die Variable $scssPath noch nicht in der _custom_variables.scss existieren, müssten Sie diese vor den import-Anweisungen einfügen. $scssPath: "../../../vendor/contao-themes-net/convert-theme-bundle/src/Resources/public/scss";

Variablen

Um Farben und die Schriftart anzupassen, kommentiere in der _custom_variables.scss die entsprechenden Zeilen aus (Schrägstriche entfernen).

Variable Bedeutung
$body-font-family Schriftart
$primary-color Hauptfarbe
$dark-color Dunkler Farbton (Schwarz)
$light-color Heller Farbton (Weiß)
$body-bg Hintergrundfarbe der Seite
$body-font-color Schriftfarbe
$link-color Linkfarbe
$link-color-dark Linkfarbe bei Hover
$footer-background_1 Hintergrundfarbe des Footer-Bereich
$footer-color-1 Schriftfarbe des Footer-Bereich
$border-radius Rahmen mit abgerundeten Ecken für Buttons, Teaserboxen etc. - mögliche Werte z. B. 10px, 100% oder 0px (ohne abgerundete Ecken).
$article-width Breite eines Artikels (Standard: 1180px)
$article-padding Innenabstand (Padding) eines Artikels (Standard: 60px 20px -> bedeutet: 60px nach oben/unten, 20px nach links/rechts)
$button-background Button-Hintergrund
$button-color Button-Schriftfarbe
$button-background-hover Button-Hintergrund bei Mouseover
$button-color-hover Button-Schriftfarbe bei Mouseover

Dark Mode

Ab iOS 13/Android 10 hast du 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 du den Dark Mode aktivierst wird im CONVERT Theme automatisch zu einem dunkleren Farbschema gewechselt. Dies hat den Vorteil, dass nachts deine Augen weniger belastet werden und es besteht eine geringe Chance, dass die Akkulaufzeit damit verbessert werden kann.

In der _custom_variables.scss kannst du den Dark Mode auch deaktivieren, indem die entsprechende Zeile einkommentiert wird (zwei Schrägstriche an den Anfang der Zeile).

//@import '#{$scssPath}/colour_schemes/dark_mode';

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

In der _custom_variables.scss ist eine Variable zum Anpassen der Schriftart definiert ($body-font-family). Kommentieren Sie eine Zeile aus (Schrägstriche entfernen) und fügen den Namen der Schriftart am Anfang hinzu.

$body-font-family: 'Beispiel-Font', -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto;