Anpassungen
Header und Footer
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.
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 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:
- Dunkles Farbschema
- Helles Farbschema - Grün/Blau
Um zu einem anderen Layout zu wechseln, entkommentiere (Schrägstriche entfernen) 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.
Helles Farbschema - Grün/Blau aktivieren:
@import 'colour_schemes/green_blue';
Helles Farbschema - Grün/Blau 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 'colour_schemes/dark_mode';
//@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;
