- Kopiere ein vorhandenes Thema aus
client/themes
. - Fügen eine Referenz für die neue Theme-Datei in
client/themeSwitcher.scss
"$themes" am Anfang der Datei hinzu
-
Öffne .cards in der IDE deiner Wahl
-
Begebe dich zur Datei
clien/themeSwitcher.scss
-
Finde die entsprechende CSS-Klasse/ID (Shift+F zum suchen)
- Um zu wissen welche CSS-Klasse/ID man braucht, müssen diese vorab im Browser mit Hilfe des Entwicklertools rausgesucht werden
- Nun suchen wir das entsprechende Attribute raus und kopieren uns die query
-
Öffne die Datei
client/theme/theme-default.scss
-
Mit hilfe von "Strg+F" suche wir nach der kopierten query von zuvor(ohne "$")
-
Hier kann nun die gewünschte Farbe eingetragen werden
- Beispiel: "footer_navigation_background": $default_background,
- möchten wir die Farbe zu weiß ändern, schreiben wir:
- "footer_navigation_background": $white,
-
Am Anfang der Datei können neue Farben eingetragen werden mit "$query-name: Farbe;"
- query-name: Wird verwendet um die Farbe später zuzuweisen
- Farbe: übliche Farbangabe in CSS/SCSS
- Die Hintergrundbilder lassen sich in
imports/config/backgrounds.js
anpassen - Erstelle entweder ein neues Objekt oder modifiziere ein vorhandenes:
- "none", um den Hintergrund zu deaktivieren
- oder passe die Links an
Neue Bilder können in public/img/background
hinzugefügt werden.
- Öffnen die Server-Konfigurationsdateien im Ordner
imports/config/serverStyle/style
- Finde das "themes" Objekt
- Fügen in der Liste den neuen Theme Namen und Hintergrund hinzu
- Füge in den Übersetzungsdateien unter
i18n/themes/
innerhalb der Variable "list" den Namen des Themes so wie die Übersetzung hinzu