User Styles (LESS)

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:


  1. @keyframes am-scale-in {
  2.     from {
  3.         opacity: 0;
  4.         transform: scale(0);
  5.     }
  6.     to {
  7.         opacity: 1;
  8.         transform: scale(1);
  9.     }
  10. }

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

    • Related Articles

    • User-Styles / SASS Variablen & Utilities

      Referenz für die wichtigsten SASS-Variablen und Utilities im admorris Pro Template. Lightning CSS Der gesamte CSS-Output wird mit Lightning CSS verarbeitet. Lightning CSS übernimmt automatisch die Minification des Output. User-Styles (Eigene ...

    • Admorris Pro 3 Update Guide

      Die neue admorris Pro Version 3.0 bedeutet einen großen technischen Fortschritt und bringt gleichzeitig viele neue Features. Technisch gibt es allen voran folgende Änderungen: Umstellung von LESS auf SASS Code Splitting von LESS und JS Neuer Checkout ...

    • Versionsübersicht, Systemvoraussetzungen & Kompatibilität

      Systemvoraussetzungen: Bis JTL-Shop 5.7.1 PHP 8.2 - 8.5 Bis JTL Shop 5.0.3 ist der ionCube Loader notwendig ZipArchive Apache Server (bis Version 3.3.0) – für NGINX müssen Sie selber alle notwendigen .htaccess Einstellungen übernehmen, damit der ...

    • JTL Paypal Checkout & admorris Pro Template

      Plugins des JTL-Shops sind standardmäßig für das NOVA Template vorkonfiguriert. Es kann daher sein, dass für andere Templates einige Einstellungen angepasst werden müssen – so auch der Fall bei der Nutzung des JTL PayPal Checkout-Plugins in ...

    • Footer

      Sie finden Einstellungen für den Footer in Ihrem JTL-Shop Backend unter: Installierte Plugins > admorris PRO > Layout & Design > Footer Mit dem Menüpunkt Footer können Sie ganz einfach den Footer ihrer Website bearbeiten. Die Links zu Ihren ...