LESS Variablen und Mixins in User-Styles

LESS Variablen und Mixins in User-Styles

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.

Mixins

Fluid Type

.fluid-type(@property, @min-vw, @max-vw, @min-size, @max-size)

Dieses Mixin eignet sich besonders gut um Schriftgrößen responsive anzupassen. Es können statt font-size aber auch andere CSS Properties, die Pixelwerte verwenden, damit angepasst werden. Das Mixin kann zwischen einer minimalen (@min-vw) und einer maximalen Fensterbreite (@max-vw) einen fließenden Übergang zwischen den als @min-size und @max-size angegebenen Pixel-Werten schaffen.

Beispiel:

.fluid-type(font-size, 375px, 1920px, 30px, 58px);


    • Related Articles

    • User Styles

      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 ...

    • Liefer und Versandanzeige

      Der Sales Booster "Liefer- und Versandanzeige" bietet dem Kunden Transparenz und steigert ihre Conversion Rate. Navigieren Sie im admorris Pro Backend zu Sales Booster → Liefer und Versandanzeige Aktivieren Sie rechts oben den Sales Booster ...

    • 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 ...

    • Elements

      Sie finden die Elements Benutzeroberfläche in Ihrem JTL-Shop Backend unter: Installierte Plugins > admorris PRO > Layout & Design > Elements Was ist Elements ? Mit Hilfe von Elements können Sie den Inhalt (DOM) Ihres Shops auf vielfältige Weise ...

    • Versionsübersicht, Systemvoraussetzungen & Kompatibilität

      Wichtiger Hinweis zu JTL Shop 5.2: Für diese Shopversion ist unbedingt admorris Pro Version 2.4.18 erforderlich. Bitte beachten Sie die Anleitung für das Update: https://support.admorris.com/portal/de/kb/articles/jtl-shop-5-2-update-mit-admorris-pro ...