Navigation

ThemeWare® Handbuch

Offcanvas (Warenkorb & Navigation)


Darstellungsart

Feldtyp:
Auswahlfeld

Verfügbare Werte:
• Shopware-Standard
• ThemeWare®

Beispiel Wert:
Shopware-Standard

Pfad zur Einstellung:
Tab "Inhalt" => Bereich "Offcanvas (Warenkorb & Navigation)"

Technischer Name:
twt-offcanvas-layout-type

Wähle, wie Offcanves-Elemente (z.B. Warenkorb oder Navigation) dargestellt werden.

In der Darstellungsart "Shopware" verhalten sich Offcanves-Elemente wie ausgeliefert.

In der Darstellungsart "ThemeWare®" bekommen die Elemente z.B. einen Abstand nach außen und abgerundete Ecken.

Basiskonfiguration


Außenabstand [px]

Feldtyp:
Nummernfeld

Beispiel Wert:
10

Pfad zur Einstellung:
Tab "Inhalt" => Bereich "Offcanvas (Warenkorb & Navigation)" => Abschnitt "Basiskonfiguration"

Technischer Name:
twt-offcanvas-margin

Wähle den Abstand um Offcanvas-Elemente.

Hinweis: Diese Einstellung wird nur angewendet, wenn die Darstellungsart "ThemeWare®" gesetzt ist.


Abgerundete Ecken [px]

Feldtyp:
Nummernfeld

Beispiel Wert:
3

Pfad zur Einstellung:
Tab "Inhalt" => Bereich "Offcanvas (Warenkorb & Navigation)" => Abschnitt "Basiskonfiguration"

Technischer Name:
twt-offcanvas-border-radius

Wähle wie stark Ecken von Offcanvas-Elementen abgerundet werden.

Hinweis: Diese Einstellung wird nur angewendet, wenn die Darstellungsart "ThemeWare®" gesetzt ist.

Farbkonfiguration


Overlay-Farbe

Feldtyp:
Farbauswahl

Beispiel Wert:
rgba(0, 0, 0, 0.5)

Pfad zur Einstellung:
Tab "Inhalt" => Bereich "Offcanvas (Warenkorb & Navigation)" => Abschnitt "Farbkonfiguration"

Technischer Name:
twt-offcanvas-backdrop-color

Wähle die gewünschte Hintergrundfarbe vom Overlay (backdrop) aus.


Glaseffekt [px] (Overlay)

Feldtyp:
Nummernfeld

Beispiel Wert:
0

Pfad zur Einstellung:
Tab "Inhalt" => Bereich "Offcanvas (Warenkorb & Navigation)" => Abschnitt "Farbkonfiguration"

Technischer Name:
twt-offcanvas-backdrop-effect-blur

Gib die gewünschte Stärke für den Unschärfe-Effekt vom Overlay (backdrop) ein.

Button "Menü schließen"


Darstellungsart

Feldtyp:
Auswahlfeld

Verfügbare Werte:
• Button
• Link

Beispiel Wert:
Button

Pfad zur Einstellung:
Tab "Inhalt" => Bereich "Offcanvas (Warenkorb & Navigation)" => Abschnitt "Button "Menü schließen""

Technischer Name:
twt-offcanvas-close-style

Wähle, wie der Button "Menü schließen" über dem Inhalt dargestellt wird.

Button: Eine gefüllte Fläche mit Trennlinie und weichem Schatten darunter.

Link: Nur Text und Icon, ohne Fläche, Trennlinie und Schatten. Die Hintergrundfarbe bleibt dann wirkungslos.

Hinweis: Der Button gehört zur Offcanvas-Navigation und zum Offcanvas-Warenkorb gleichermaßen. Das Filter-Panel bringt einen eigenen mit.


Hintergrundfarbe

Feldtyp:
Farbauswahl

Beispiel Wert:
$twt-color-secondary-button

Pfad zur Einstellung:
Tab "Inhalt" => Bereich "Offcanvas (Warenkorb & Navigation)" => Abschnitt "Button "Menü schließen""

Technischer Name:
twt-offcanvas-close-background-color

Hier kannst du die Hintergrundfarbe für den Button "Menü schließen" konfigurieren.

Textfarbe / Hover-Effekt:
Gemäß Bootstrap wird die Textfarbe automatisch aus diesem Farbwert invertiert.
Für den Hover-Effekt wird dieser Farbwert automatisch abgedunkelt.

Hinweis: In der Darstellungsart "Link" bleibt diese Einstellung wirkungslos.

Zuletzt aktualisiert am

Diese Seite im Netz: https://doku.themeware.design/handbuch/inhalt/offcanvas-warenkorb-and-navigation · ThemeWare® Service Portal, service.themeware.design