Wie du das LASR Theme anpasst

Standardmäßig werden die SCSS-Dateien des LASR Themes in folgendem Ordner gespeichert:

files/theme/server/scss/

Dabei lassen sich viele Einstellungen bereits über Variablen in SCSS anpassen. Solltest du an einer Stelle mit den Variablen nicht mehr weiterkommen, kannst du bestehende Anweisungen überschreiben oder du fügst deine eigenen Anweisungen hinzu.

Farben anpassen

Um die Farben des Themes zu ändern, öffnest du die _variables.scss. Dort findest du u.a. folgende Variablen für die Farbzuweisung:

--color-blue-darker:        #284456;
--color-blue-dark:          hsl(206, 72%, 37%);
--color-blue:               hsl(206, 72%, 47%);
--color-blue-light:         hsl(206, 72%, 67%);
--color-blue-lighter:       #738591;

…

--color-brand-primary:     var(--color-blue);
--color-brand-secondary:   var(--color-blue-darker);

Die Hauptfarben des LASR Themes sind die Variablen --color-brand-primary und --color-brand-secondary zugewiesen. Ihnen wurden Farbvariablen (z.B. --color-blue) zugewiesen, denen wiederum Farben als HEX- bzw. HSL-Werte zugewiesen wurden.

Wenn du nun eigene Farben festlegen möchtest, empfehlen wir dir, dafür eigene Variablen mit dem Farbnamen anzulegen und diese den Variablen --color-brand Variablen zuzuweisen. Also zum Beispiel

--color-red: #FF0000;
--color-green: #88bb00;

…

--color-brand-primary: var(--color-red);
--color-brand-secondary: var(--color-green);

Auf diese Variablen wird innerhalb des Themes immer wieder zurückgegriffen und die Farben werden ersetzt. Auch die anderen Farben kannst du ersetzen, indem du entweder neue Variablen ergänzt oder bestehende Farbwerte änderst.

So passt du die Linktext-Farbe an, indem du --color-links änderst. Entweder indem du eine andere Variable zuordnest, z.B.

--color-links: var(--color-red);

Oder indem du direkt einen Farbwert zuordnest

--color-links: #FF0000;

wobei die erste Methode den Vorteil hat, dass du anhand des Variablennamen besser nachvollziehen kannst, welcher Farbwert hier verwendet wird.

Schriften anpassen

Schriftarten kannst du theoretisch über die _variables.scss anpassen. Dafür findest du in der _variables.scss folgende Variablen:

--base-font-family-1:  'Rubik', 'Helvetica Neue', Arial, sans-serif;
--base-font-family-2:  'Raleway', 'Helvetica Neue', sans-serif;

--base-font-family:    var(--base-font-family-1);

Die Variable --base-font-family-1 ist der Schriftart Rubik zugeordnet. Sie dient als Basis-Schriftart (--base-font-family) und wird standardmäßig auf der Website verwendet, wenn sie nicht durch andere Schriften überschrieben wird.

Die Schrift Raleway, die wir der Variable --base-font-family-2 zugeordnet haben, wird an unterschiedlichen Stellen im Theme wieder aufgegriffen. Zum Beispiel wird sie in der base/_type.scss den Überschriften zugeordnet.

Google Webfonts lokal einbinden

Du möchtest andere Schriftarten verwenden? Kein Problem. In dieser Anleitung zeige ich dir, wie du Google Webfonts rechtsicher einsetzen kannst, indem du sie lokal einbindest:

1. Lade dir die Webfonts herunter. Am Einfachsten geht das mit dem google webfonts helper
2. Speichere die Webfonts im Ordner /fonts
3. passe die Datei /base/_fonts.scss an, indem du die CSS-Anweisungen des Webfont Helper dort einfügst
4. Ändere wie im ersten Teil beschrieben die Variablen für die Schriftarten in der _variables.scss

Für andere Anbieter wie fonts.com ist die Anwendung ähnlich. Achte bei der Wahl des Schriftanbieters aber darauf, dass sich die Schriften lokal herunterladen lassen.