Farben & Schriftarten

Farben und Schriften

Wenn das Theme erfolgreich installiert wurde, befinden sich die SCSS-Dateien in der Dateiverwaltung unter dem Pfad mate/sass. Für individuelle Anpassungen nutzen Sie einfach die custom.scss, in der Sie sowohl SCSS oder auch normales CSS schreiben können, sowie die _custom_colors.scss und _custom_variables.scss.

Ab der Version 1.4.0 gibt es neben der _custom_variables.scss auch die _custom_colors.scss. In der _custom_colors.scss finden Sie alle Farbendefinitionen und die _custom_variables.scss können Sie nutzen, wenn Sie mehr als nur die Grundfarben des Themes verändern möchten. Wenn Sie eine Variable anpassen möchten, müssen ie die Zeile auskommentieren (Schrägstriche entfernen).

Wenn Sie lieber mit CSS-Dateien statt mit SCSS-Dateien arbeiten wollen, können Sie über Themes - Stylesheets einen neuen Stylesheet anlegen und ihn im Layout bei Interne Stylesheets einbinden. Das CSS wird anschließend automatisch nach dem CSS des Mate Theme geladen.

Die SCSS-Dateien sollten nie im vendor-Ordner bearbeitet werden, sondern nur in der Dateiverwaltung (unter /files).

Wenn die SCSS-Datei nicht mit dem Contao-internen Editor bearbeitet und mit einem FTP-Programm hochgeladen wurde, muss im Contao Backend unter Systemwartung noch der Skriptcache geleert und ggf. die Seite mit Strg + F5 neugeladen werden.

Der Theme-Ordner mate darf in der Dateiverwaltung nicht umbenannt werden, ansonsten werden die SCSS-Dateien nicht mehr geladen. Du musst die Dateien auch nicht selber im Seitenlayout einbinden, sie werden bereits automatisch vom Theme geladen.

Farbschemen

Das MATE Theme wird standardmäßig mit einem grünen Layout ausgeliefert. Ab der Version 1.4.0 gibt es die Möglichkeit das Theme auf ein dunkles (dark), blaues (blue) oder gelbes Layout (yellow) umzustellen.

Wenn Sie auf ein Layout umstellen wollen, kommentieren Sie in der _custom_colors.scss die entsprechende Zeile bei Colour Schemes aus (Schrägstriche entfernen). Gegebenenfalls müssen Sie die Seite mit Strg + F5 neuladen, damit die Änderung greift.

Wenn Sie mehrere Farbschemen auf einer Webseite nutzen wollen, können Sie folgende Anleitung befolgen.

Variablen der _custom_colors.scss

Grundfarben:

$mateColor1: Hauptfarbe helle Abstufung
$mateColor2: Hauptfarbe
$mateColor3: Hauptfarbe dunkle Abstufung
$mateColor4: Sekundärfarbe
$mateColor6: Sekundärfarbe helle Abstufung

$mateColorWhite: Weiß
$mateColorBlack: Schwarz
$mateColorGreyLight: Hellgrau
$mateColorGreyDark: Dunkelgrau
$pageBackground: Hintergrundfarbe der Webseite

Textfarben:

$primary-text-color: Primäre Textfarbe
$secondary-text-color: Sekundäre Textfarbe

Boxen:

$boxes-background: Hintergrundfarbe der Boxen (z. B. Contentbox, Teaserbox, News, Events, Login, Newsletter, etc.)
$boxes-text-color: Schriftfarbe der Boxen (z. B. Contentbox, Teaserbox, News, Events, Login, Newsletter, etc.)

Content Box:

$contentbox-first-background: Hintergrundfarbe der ersten Content-Box
$contentbox-second-background: Hintergrundfarbe der zweiten Content-Box


Schriftart einbinden

Um eine Schriftart einzubinden, fügen Sie in der _custom_variables.scss ganz am Anfang z. B. folgenden CSS-Code ein. Ersetzen Sie den Namen und die Pfade der Schriftart. Der Pfad muss immer mit einem / beginnen.

@font-face {
	font-family: "Beispiel-Font";
	font-style: normal;
	font-weight: normal;
	src: url("/files/mate/fonts/font.woff"),
	url("/files/mate/fonts/font.ttf"),
	url("/files/mate/fonts/font.svg");
}

In der _custom_variables.scss sind drei Variablen zum Anpassen der Schriftart definiert ($font1: Anpassen der Hauptschriftart, $font2 und $font3: Schriftart nur für Überschriften anpassen). Kommentieren Sie eine Zeile aus (Schrägstriche entfernen) und fügen den Namen der Schriftart am Anfang hinzu.

$font1: 'Beispiel-Font', 'Lato Light', sans-serif;
$font2: 'Beispiel-Font', 'Lato Light', sans-serif;
$font3: 'Beispiel-Font', 'Lato Regular', sans-serif;

Beispiele für das Anpassen von Farben

Um die Farben der Navigation anzupassen, kann man die Variablen in der _custom_variables.scss unter der Überschrift Header and Navigation bearbeiten. Wenn Sie eine Variable anpassen möchten, entfernen Sie die Schrägstriche am Anfang der Zeile.

Folgendes Beispiel würde die Farben und Hintergründe der Hauptnavigation anpassen.

$navbar-bg-color: #437d4f; // Hintergrundfarbe der Navigation
$navbar-color: #fff; // Schriftfarbe der Links
$navbar-active-color: #000; // Schriftfarbe des aktiven Menüpunkts und bei Mouse-Hover
$navbar-dropdown-hover-bg-color: lighten(#437d4f, 10%); // Hintergrundfarbe des Dropdown-Menü bei Mouse-Hover
$navbar-dropdown-hover-color: #000; // Schriftfarbe des Dropdown-Menü bei Mouse-Hover
$navbar-dropdown-bg: #437d4f; // Hintergrundfarbe des Dropdown-Menü
$navbar-dropdown-color: #fff; // Schriftfarbe der Links im Dropdown-Menü
$navbar-search-color: #fff; // Farbe des Suchicons

Folgendes Beispiel würde die Farben und Hintergründe der Hauptnavigation beim Herunterscrollen anpassen (wenn die Navigation am oberen Bildschirmrand kleben bleibt).

$navbar-stuck-bg-color: rgba(#437d4f, .8); // Hintergrundfarbe der Navigation
$navbar-stuck-color: #fff; // Schriftfarbe der Links
$navbar-stuck-active-color: #000; // Schriftfarbe des aktiven Menüpunkts und bei Mouse-Hover
$navbar-stuck-dropdown-hover-bg-color: lighten(#437d4f, 10%); // Hintergrundfarbe des Dropdown-Menü bei Mouse-Hover
$navbar-stuck-dropdown-hover-color: #000; // Schriftfarbe des Dropdown-Menü bei Mouse-Hover
$navbar-stuck-dropdown-color: #fff; // Hintergrundfarbe des Dropdown-Menü
$navbar-stuck-dropdown-bg: #437d4f; // Schriftfarbe der Links im Dropdown-Menü
$navbar-stuck-search-color: #fff; // Farbe des Suchicons

Folgendes Beispiel würde die Farben und Hintergründe für die mobile Navigation anpassen.

$navbar-mobile-menu-icon-color: #fff; // Farbe des mobilen Burgermenu-Icons
$navbar-stuck-mobile-menu-icon-color: #fff; // Farbe des mobilen Burgermenu-Icons, wenn die Navigation am oberen Bildschirmrand stehen bleibt
$navbar-mobile-background: #437d4f; // Hintergrundfarbe
$navbar-mobile-color: #fff; // Schriftfarbe der Links
$navbar-mobile-dropdown-background: lighten(#437d4f, 10%); // Hintergrundfarbe der weiteren Menüebenen
$navbar-mobile-dropdown-color: #fff; // Schriftfarbe der weiteren Menüebenen

Um die Farben des Footer anzupassen, kann man die Variablen in der _custom_variables.scss unter der Überschrift Footer bearbeiten. Wenn Sie eine Variable anpassen möchten, entfernen Sie die Schrägstriche am Anfang der Zeile.

Hinweis: Manche Variablen sind erst bei der MATE Version 2.11.0 hinzugekommen, Sie sollten das Theme also am besten auf die aktuelle Version aktualisieren.

$footer-newsletter-bg-color: #f1f1f1; // Hintergrundfarbe des Newsletter-Bereich
$footer-newsletter-color: #000; // Schriftfarbe des Newsletter-Bereich
$footer-newsletter-button-background: #b50000; // Hintergrundfarbe des Buttons im Newsletter-Bereich
$footer-newsletter-button-background-hover: lighten(#b50000,10%); // Hintergrundfarbe des Buttons bei Mouseover im Newsletter-Bereich
$footer-input-bg-color: rgba(#b50000,.3); // Hintergrundfarbe des Eingabefelds im Newsletter-Bereich
$footer-input-color: #000; // Schriftfarbe des Eingabefelds im Newsletter-Bereich

$footer-primary-bg-color: #dedede; // Hintergrundfarbe im Footer-Bereich unter dem Newsletter
$footer-primary-color: #000; // Schriftfarbe im Footer-Bereich unter dem Newsletter
$footer-primary-link-color: #b50000; // Linkfarbe im Footer-Bereich unter dem Newsletter
$footer-primary-link-color-hover: lighten(#b50000,10%); // Linkfarbe bei Mouseover im Footer-Bereich unter dem Newsletter
$footer-headline-border-color: #000; // Farbe der Rahmen unter den Überschriften
$footer-news-events-time-color: #7d7d7d; // Schriftfarbe des Datum bei News-/Eventsbeiträgen

$footer-secondary-bg-color: #b50000; // Hintergrundfarbe des Copyright-Bereich
$footer-secondary-color: #fff; // Schriftfarbe im Copyright-Bereich
$footer-secondary-link-color: #f7f7f7; // Linkfarbe im Copyright-Bereich
$footer-secondary-link-color-hover: darken(#f7f7f7,10%); // Linkfarbe bei Mouseover im Copyright-Bereich

Inhaltsboxen anpassen

Um die Inhaltsboxen (z. B. Teaserboxen, News, Events) anzupassen, kann man die Variablen in der _custom_colors.scss bearbeiten. Wenn Sie eine Variable anpassen möchten, entfernen Sie die Schrägstriche am Anfang der Zeile.

$boxes-background: #333; // Hintergrundfarbe
$boxes-text-color: #fff; // Schriftfarbe

Content Box anpassen

Um die Content Box anzupassen, kann man die Variablen in der _custom_variables.scss unter dem Bereich Content Box
bearbeiten. Wenn Sie eine Variable anpassen möchten, entfernen Sie die Schrägstriche am Anfang der Zeile.

$contentbox-first-color: #fff; // Schriftfarbe der 1. Content Box
$contentbox-second-color: #fff; // Schriftfarbe der 2. Content Box
$contentbox-first-background: #2d2d2d; // Hintergrundfarbe der 1. Content Box
$contentbox-second-background: #191919; // Hintergrundfarbe der 2. Content Box