Website-Konfiguration

Color Sets ermöglichen es eine ganz individuelle Zusammenstellung von Farben. In diesem Tab sehen Sie 10 Color Sets. Sie müssen jedoch nicht alle davon nutzen und anpassen. Denn im Reiter Design stellen Sie dann ein, welches Color Set, Sie wo anwenden möchten. Theoretisch wäre es also möglich nur ein Color Set zu nutzen. Bevor Sie die Sets einstellen, sollten Sie sich am besten vorher mit dem Reiter Design vertraut machen!

Jedes Color Set hat 11 Farben, die eingestellt werden können. Bei Klick auf ein Farbfeld erscheint an der Seite ein Fenster zum Konfigurieren der Farbe. Sie müssen nur eine Farbe aus der Farbpalette aussuchen oder einen Farbcode eingeben. Wir zeigen Ihnen nun welches Feld, welche Änderungen im Frontend bewirkt.

Navigation Colors

Color Set

Das ist die Farbe, die für die Navigations-/Menüleiste verwendet werden soll, mit Ausnahme der Hintergrundfarbe. Letztere wird im nächsten Feld festgelegt.

Background Color

Hier legen Sie die Hintergrundfarbe fest, die für die Navigations-/Menüleiste verwendet wird.

Background Opacity

Die Navigationsleiste ist immer zu sehen, egal wie weit User:innen nach unten scrollen. Dabei überlappt die Leiste Inhalte, die sich im oberen Bereich der Seite befinden. Um die Navigationsleiste von den Inhalten abzugrenzen, kann hier eine Transparenz eingestellt werden. Gültige Werte sind im Bereich 0.0 - 1.0. Je niedriger der Wert, desto höher ist die Transparenz.

Megamenu Colors

Color Set

Das ist die Farbe, die für das Mega Menü verwendet werden soll, mit Ausnahme der Hintergrundfarbe. Die Hintergrundfarbe des Mega Menüs wird im nächsten Feld festgelegt.

Background Color

Wählen Sie hier eine Hintergrundfarbe für das Mega Menü.

Background Opacity

Da die Navigationsleiste immer zu sehen ist, kann auch das Mega Menü jederzeit aufgeklappt werden, sodass es über den Inhalten erscheint. Sie können an dieser Stelle über die Stärke der Transparenz entscheiden oder das Mega Menü intransparent lassen. Gültige Werte befinden sich im Bereich 0.0 - 1.0. Je niedriger der Wert, desto höher ist die Transparenz. Beim Wert 1.0 ist das Mega Menü intransparent.

Area Colors

Dark Color Set

Wählen Sie hier das Color Set, das für alle dunklen Bereiche sowie für die Fußzeile gelten soll.

Light Color Set

Bestimmten Sie das Farbset für helle Bereiche, Job-Detailseiten und die Breadcrumb Navigation. Letzteres ist die Linkleiste über dem Inhalt, die User:innen zeigt, wo er sich hierarchisch gerade auf einer Seite befindet.

Button, Box, Alert, Label and Badge Colors

Die Website-Base erlaubt es, Inhalte vielfältig darzustellen, dafür werden z. B. Boxen, Buttons, Label und ähnliches verwendet. Immer wieder begegnen Ihnen dabei auch die Einstellungen: Default, Primary, Success, Info, Warning, Danger. In diesem Zusammenhang lohnt es sich mehrere Farbsets anzupassen, denn die Buttons und Boxen können sich nur dann farblich unterscheiden, wenn jeweils ein anderes Set gewählt wird. Im Color Set bestimmt die Hintergrundfarbe und die Textfarbe (Foreground) diese Elemente.

Button Shape Settings

Definieren Sie den Radius der Ecken von kleinen, großen und Standard-Buttons. Je höher die Zahl, desto abgerundeter sind die Ecken der Buttons.

Special Text Colors

Im Rich Text Editor (RTE) lassen sich andere Farben für den Text einstellen, als der Standard es vorsieht. Man hat sechs Farben zur Auswahl: Muted, Primary, Success, Info, Warning, Danger – Sie legen fest, welche Farben jeweils verwendet werden. Klicken Sie auf das Farbfeld und suchen in der eingeblendeten Farbpalette einfach die gewünschte Farbe aus oder tragen sie ein.

H1, H2, H3, H4, H5, H6 Font size

Bestimmen Sie wie groß die jeweiligen Überschriften sein sollen.

Sizing

Default Element Distance

Tragen Sie ein, wie groß der Abstand zwischen Inhaltselementen sein soll.

Vertical inner distance

Definieren Sie den vertikalen inneren Abstand für Elemente in Basisgröße. Das betrifft beispielsweise Buttons, die dadurch in der Höhe verändert werden.

Horizontal inner distance

Definieren Sie den horizontalen inneren Abstand für Elemente in Basisgröße. Das betrifft beispielsweise Buttons, die dadurch in der Breite verändert werden.

Vertical inner distance [lg], [sm], [xs] & Horizontal inner distance [lg], [sm], [xs]

Definieren Sie den vertikalen und horizontalen inneren Abstand für große [lg], kleine [sm] und extra kleine [xs] Elemente.

Legen Sie in diesem Tab benutzerdefinierte CSS-Stylesheets und Java-Script an.