Wie du SIRIUS anpasst

Alle SCSS-Dateien werden im folgenden Ordner gespeichert:

files/theme/scss/

Dabei lassen sich viele Einstellungen bereits über Variablen 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 in Contao 5 sind wie folgt definiert:

  --color-green:             #A7D60F;
  --color-green-dark:        #83a70c;
  --color-turquoise:         #228080;
  --color-turquoise-dark:    #185959;

  --color-tint:                 var(--color-gray-light);
  --color-brand:                var(--color-green);
  --color-brand-dark:           var(--color-green-dark);
  --color-brand-secondary:      var(--color-turquoise);
  --color-brand-secondary-dark: var(--color-turquoise-dark);
  --color-highlight:            var(--color-brand);
  --color-text:                 var(--color-gray);

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: var(--color-green);

durch eine eigene Variable:

--color-brand: var(--color-blue);

oder einen Farbwert:

--color-brand: #2283ce;

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

Neu ab Version 2.1.0: Einführung des Dark Mode

Ab SIRIUS 2.1.0 verfügt das Theme auch über einen Dark Mode. Das bedeutet, wenn im Betriebsystem das dunkle Farbschema gewählt ist, dann wird z.B. statt dem weißen Hintergrund ein dunkler Hintergrund verwendet.

Die Variablen für den Dark Mode findest du am Ende der _variables.scss. Je nach Theme-Anpassung kann es notwendig sein, weitere Variablen für den Dark Mode zu ergänzen, bzw. bestehende zu überschreiben.

2. Hintergrundfarbe anpassen

Möchtest du eine Hintergrundfarbe unabhängig von der Hauptfarbe ändern, findest du weiter unten in der _variables.scss den Abschnitt BASE/ARTICLE:

// BASE/ARTICLE
  --article-highlight-background:     var(--color-highlight);
  --article-highlight-text:           var(--color-text-inverted);
  --article-tint-background:          var(--color-tint);
  --article-dark-background:          var(--color-gray-dark);
  --article-dark-text:                var(--color-text-inverted);

Diese Variablen werden in base/_article.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 article--highlight hat und in der Klasse den Wert der Variable --article-highlight-background verwendet wurde.

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

--article-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 _article.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:              var(--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. In SIRIUS für Contao 5 sind die Hilfsklassen bereits über die Theme-Toolbox definiert, d.h. du kannst sie direkt in den Inhaltselementen auswählen.

Abstände lassen sich über folgende Klassen realisieren

  • m-t-0 bis m-t-5 (Außenabstand oben 0 bis 5)
  • m-b-0 bis m-b-5 (Außenabstand unten 0 bis 5)
  • p-t-0 bis p-t-5 (Innenabstand oben 0 bis 5)
  • p-b-0 bis p-b-5 (Innenabstand unten 0 bis 5)

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, wir empfehlen aber Innenabstände vor allem für Artikel und Außenabstände vor allem für Elemente zu verwenden.

Klassen für Artikel

In den Artikeleinstellungen kannst du weitere Klassen hinzufügen und so das Aussehen des Artikels anpassen. Mit folgenden Klassen kannst du die Hintergrund- und Textfarbe beeinflussen:

  • .article--highlight
  • .article--tint
  • .article--dark

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.