Transkript
Moin und herzlich Willkommen zum Kurs „Bessere Websites mit OPTIMIST“. Ich bin Dennis von Erdmann und Freunde und ich werde dir in den nächsten Tagen zeigen, wie du OPTIMIST an deine Vorstellungen anpassen kannst.
Im heutigen Video zeige ich dir, wie du die Farben des Themes anpassen kannst. Dafür verwende ich Visual Studio Code, aber du kannst das Theme auch genauso gut über die Dateiverwaltung von Contao bearbeiten.
Bevor wir aber loslegen, müssen wir einmal in die Systemwartung gehen. Denn Contao hat einen Cache, der leider nicht so gut erkennt, wenn sich etwas in den SCSS-Dateien geändert hat. Du könntest also entweder nach jeder Änderung hier auf Scriptcache leeren klicken oder du aktivierst hier oben die Option Skript Cache umgehen.
Ich habe hier in VS Code schon das Projekt geöffnet. Alle SCSS-Dateien findest du unter files/theme/scss. Um du die Hauptfarben des Themes zu ändern öffnest du die _variables.scss. Hier findest du eine Vielzahl von Variablen unter anderem für die Farbzuweisungen.
Im oberen Teil siehst du die Farben wie --color-purple und --color-purple-dark usw. Weiter unten habe ich die Hauptfarben --color-brand-primary und --color-brand-secondary angelegt und diese den oben definierten Variablen zugeordnet. Das hat den Vorteil, dass ich die Farben nur hier anpassen muss, wenn ich sie ändern möchte.
Nehmen wir an, du möchtest das Lila durch ein Blau ersetzen. Dann würde es zwar reichen, wenn du bei --color-brand-primary einfach den Hex-Wert hinschreibst. Besser ist es aber, du legst eine eigene Variable --color-blue an, weist dieser den Hex-Wert zu und passt dann die Zuordnung für --color-brand-primary an.
Wenn ich jetzt die Datei speichere und das Frontend aktualisiere, dann sollte das Blau nun auch irgendwo zu sehen sein. Und zwar hier bei dem Hover-Effekt in der Navigation und auch beim Button.
Jetzt nehmen wir mal an, du möchtest die Farbe des Buttons anpassen. Dann fragst du dich vielleicht, wie finde ich heraus, welche Variable für den Button verwendet wird?
Du hast 2 Möglichkeiten:
- Du kannst über die Webentwickler Tools den Button untersuchen und siehst dann hier, dass die Hintergrundfarbe über eine Variable
--button-backgroundzugewiesen wird. Und wenn ich auf die Variable klicke, sehe ich, das diese wiederum die Variable--color-brand-primary-darkzugewiesen wird. - Oder du schaust dir direkt die anderen Variablen an, die in der
_variables.scssstehen. Ein Stück weiter unten sehe ich die Variablen für Links und dort sehe, dass es eine Variable--button-backgroundgibt und dieser wiederum die Variable--color-brand-primary-darkzugeordnet ist.
Wenn ich also nun die Farbe des Buttons anpassen möchte, gehe ich wieder nach oben zu meinen Farb-Variablen und lege eine neue Variable color-blue-dark an. Dieser kann ich nun einen dunkleren blauton zuweisen und dann weise ich sie der Variable color-brand-primary-dark zu. Ich drücke wieder auf speichern. Wenn ich jetzt die Seite aktualisiere, sollte mein Button blau werden.
So wie ich es hier mit der Primärfarbe gemacht habe, kann ich auch die Sekundärfarbe anpassen. Und auch die Hintergrundfarbe für hervorgehobene Artikel kann ich auf diese Weise ändern, indem ich der Variable -article-highlight-background eine andere Farbe zuweise. Am Besten nimmst dir einfach mal 5 Minuten Zeit und änderst ein paar Variablen, um zu schauen, wie sie sich auf das Layout auswirken.
Im nächsten Video zeige ich dir, wie du eine andere Schriftart in OPTIMIST verwendest. Bis dahin mach's gut und Erstma!