LASR Theme individualisieren

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 eigene Anweisungen hinzufügen.

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 den 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 --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:

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

Oder indem du direkt einen Farbwert zuordnest:

--color-links: #FF0000;

Die erste Methode hat den Vorteil, dass du anhand des Variablennamens 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 rechtssicher 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 Webfonts-Helpers 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.

Hilfsklassen verwenden

Klassen für Abstände

Standardmäßig haben alle im Theme gestalteten Elemente und Module einen Abstand, der auf der --base-spacing-unit basiert. Auch Artikel (.mod_article) haben standardmäßig einen Abstand nach oben und unten.

Je nach Inhalt und Layout kann es vorkommen, dass man Abstände vergrößern oder verkleinern möchte. Dafür gibt es in unseren Themes Abstandsklassen, die du im Theme unter /trumps/_helper.scss findest.

Abstände lassen sich über folgende Klassen realisieren:

• m-t-0 bis m-t-5
• m-b-0 bis m-b-5
• p-t-0 bis p-t-5
• p-b-0 bis p-b-5

Dabei steht m-t für margin-top, p-t für padding-top usw. Die Abstände basieren auf der --base-spacing-unit und werden mit dem jeweiligen Wert multipliziert. Also ist m-t-1 = calc(var(--base-spacing-unit) * 1) und m-t-5 = calc(var(--base-spacing-unit) * 5).

Diese Klassen kannst du sowohl für Artikel als auch für Elemente und Module verwenden, um Abstände anzupassen.

Klassen für Artikel

In den Artikeleinstellungen kannst du weitere Klassen hinzufügen und so das Aussehen des Artikels anpassen. Mit der Klasse .band und den jeweiligen Ergänzungen, z.B. .band--highlight, beeinflusst du beispielsweise die Hintergrund- und Textfarbe.

Folgende Klassen stehen zur Verfügung:

• .band
• .band--highlight
• .band--tint
• .band--dark
• .article--full bzw. .hero
• .article-[viewport]-[width] (.article-md-8)
• .article-start-[viewport]-[width] (.article-start-md-3)

Mit .article--full bzw. der Klasse .hero entfernst du die standardmäßig vorhandenen Abstände links und rechts, sodass der Inhalt über die komplette Breite geht. Die Klasse .hero entfernt darüber hinaus noch das Padding oben und unten.

Mit den Artikelklassen .article-[viewport]-[width] und .article-start-[viewport]-[width] weist du dem Artikel eine abweichende Breite bzw. einen abweichenden Startpunkt im Grid-Layout zu. Die Klassen orientieren sich in ihrer Funktion an den Grid-Klassen .col-[viewport]-[width] und .col-start-[viewport]-[width].