User Styles (LESS)

Sie finden den User Styles Editor in Ihrem JTL-Shop Backend unter:
Installierte Plugins > admorris PRO > Layout & Design > User Styles

Mit User Styles hat der Benutzer die Möglichkeit, seine Webseite durch die Verwendung von CSS/Less-Code grafisch aufzuwerten und an seine individuellen Bedürfnisse und Vorlieben anzupassen.

Es ist möglich, externe Schriftarten per User Styles einzubinden, allerdings bietet admorris Pro bereits eine umfangreiche Auswahl an Schriftarten an.

admorris Pro stellt hier eine Vielzahl von Variablen zur Verfügung die in den User Styles verwendet werden können. Einige der wichtigsten Variablen werden in diesem Beitrag erwähnt.

Styles kompilieren

Dieser Button kompiliert nur den bereits vorhandenen Code am Server. Dies ist vor allem sehr nützlich, wenn das User Styles File in einem externen Editor bearbeitet wird und nicht im Backend des Shops.

Speichern und kompilieren

Mit diesem Button können die User Styles gespeichert und kompiliert werden.

Variablen

Hier listen wir die wichtigsten Variablen von admorris Pro für die User Styles.
Diese Variablen sind in der Sektion Global konfigurierbar:

@brand-primary (Primärfarbe)
@btn-primary-bg (Buttonfarbe)
@btn-primary-color (Buttontext)
@link-color (Linkfarbe)
@headings-color (Headlines)
@text-color (Text)
@body-bg (Hintergrund)

@font-family-base (Schriftart)
@headings-font-family (Schriftart Headlines)
@font-size-base-px (Basisschriftgröße)
@font-size-h1, @font-size-h2, @font-size-h3, @font-size-h4, @font-size-h5, @font-size-h6 (Schriftgrößen Überschriften)

Folgende Variablen sind ebenfalls sehr nützlich:

@link-hover-color (Link Hover Farbe)
@tone-10, @tone-25, @tone-50 (Textfarbe mit 90%, 75% und 50% Transparenz)
@screen-xs, @screen-sm, @screen-md, @screen-lg (Breakpoints für verschiedene Bildschirmbreiten)
@mobile-nav-breakpoint (Mobiler Breakpoint)

LESS Variablen überschreiben

Im User-Styles Editor können bestimmte LESS Variablen neu gesetzt werden.

Breakpoint für Wechsel zwischen Mobiler und Desktop Navigation

Hiermit können Sie anpassen, bei welcher Fensterbreite die Mobile Navigation zur Desktop Navigation wechselt. Einfach den Pixel-Wert wie gewünscht anpassen.

@mobile-nav-breakpoint: 1600px;

Ändern der Menü Dropdown-Animation

@header-dropdown-animation: 'am-scale-in';

Wenn Sie eine eigene @keyframes Animation erstellen, können Sie den Namen der Animation in dieser Variable angeben, und alle Dropdown-Menüs im Header verwenden dann diese Animation.

Die Standard-Animation sieht so aus:

@keyframes am-scale-in {
from {
opacity: 0;
transform: scale(0);
}
to {
opacity: 1;
transform: scale(1);
}
}

Eine gute Dokumentation der @keyframes Animationen können Sie z. B. auf MDN Web Docs finden.