Wie du SIRIUS anpasst

Alle SCSS-Dateien werden im folgenden 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.

1. Hauptfarben anpassen

Um die Hauptfarben des Themes zu ändern, öffnest du die _variables.scss. Dort findest du eine Vielzahl von Variablen, unter anderem für die Farbzuweisung. Die Farben für das SIRIUS Theme sind wie folgt definiert:

$color-brand: $color-green;
$color-brand-secondary: $color-turquoise;
$color-highlight: $color-brand;

Die Hauptfarben heißen $color-brand und $color-brand-secondary. Diesen wurden die Variablen $color-green und $color-turquoise zugewiesen, denen wiederum weiter oben Farben als HEX-Werte zugewiesen wurden. Um die Hauptfarbe zu ändern, ersetzt du

$color-brand: $color-green;

durch eine eigene Variable oder einen Farbwert:

$color-brand: $color-blue;

Nun sollte an jeder Stelle, an der vorher das Grün zu sehen war der neue festgelegte Farbton zu sehen sein.

2. Hintergrundfarbe anpassen

Möchtest du eine Hintergrundfarbe unabhängig von der Haupfarbe ändern, findest du weiter unten in der _variables.scss den Abschnitt Bands:

// Bands
$color-band-highlight-background:     $color-highlight;
$color-band-tint-background:          linear-gradient(lighten($color-tint, 4%), darken($color-tint, 3%));
$color-band-dark-text:                #FFFFFF;
$color-band-dark-background:          $color-brand;

Diese Variablen werden u.a. in base/_layout.scss verwendet und geben dir die Möglichkeit Artikel farbig zu hinterlegen. Standardmäßig hat zum Beispiel der Bereich Kontakt in der Demo einen grünen Hintergrund. Dieser grüne Hintergrund kommt zustande, weil der Artikel die Klasse band--highlight hat und ich in der Klasse den Wert der Variable $color-band-highlight-background verwende.

Möchtest du also die Hintergrundfarbe unabhängig von der Hauptfarbe ändern, reicht es, wenn du die Variable $color-band-highlight-background überschreibst, z.B. so:

$color-band-highlight-background: #F94300;

Du kannst auch eine andere Variable verwenden, z.B. $color-gray-dark oder eine eigene Variable festlegen und verwenden.

Solltest du feststellen, dass du mit der Anpassung der Variablen nicht ans Ziel kommst, hast du immer noch die Möglichkeit in der _layout.scss direkt Anpassungen vornehmen.

3. Schriften anpassen

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

$base-font-family-serif:        'Roboto Slab', Georgia, 'Times New Roman', serif;
$base-font-family-sans-serif:   'Roboto', Arial, Helvetica, sans-serif;

$base-font-family:              $base-font-family-sans-serif;

Die Variable $base-font-family-serif ist der Schriftart Roboto Slab zugeordnet, während die Variable mit dem Zusatz -sans-serif der Roboto zugeordnet ist. 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 Roboto Slab wird an unterschiedlichen Stellen im Theme wieder aufgegriffen. Zum Beispiel wird sie in der base/_type.scss den Überschriften zugeordnet.

Da nach aktueller Rechtsprechung die direkte Integration von Google Webfonts auf einer Website gegen die DSGVO verstoßen, da Besucherinformationen wie IP-Adresse, Browser uvm. an Google übermittelt werden, beschreibe ich nur den Weg, um Google Webfonts lokal zu nutzen.

Google Webfonts lokal einbinden

  1. Lade die gewünschten 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

4. 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.

Nun kann es je nach Inhalt und Layout vorkommen, dass man Abstände vergrößern oder verkleinern möchte. Dafür gibt es in unseren Themes die 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

wobei m-t für margin-top, p-t für padding-top usw. steht. Die Abstände basieren auf der --base-spacing-unit und werden mit dem jeweiligen Wert multipliziert.

Also ist m-t-1 = ($base-spacing-unit * 1)
und m-t-5 = ($base-spacing-unit * 5)

Diese Klassen kannst du sowohl für Artikel als auch 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 Artikel anpassen. Mit der Klasse .band und den jeweiligen Ergänzungen, z.B. .band--highlight, kannst du beispielsweise die Hintergrund- und Textfarbe beeinflussen.

Folgende Klassen stehen zur Verfügung:

  • .band
  • .band--highlight
  • .band--tint
  • .band--dark
  • .article--full bzw. .hero

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