Styling

Das <zf-zenrush>-Element ist darauf ausgelegt sehr anpassbar zu sein und es dir zu ermöglichen, das Erscheinungsbild leicht anzupassen. Auf dieser Seite wird gezeigt, wie du mit Hilfe von CSS-Variablen (opens in a new tab) das Element an dein Design anpassen kannst.

Standardmäßig sieht das Element etwa so aus:

Aber mit etwas CSS kann das Element auch so auszusehen:

CSS-Variablen

CSS-Variablen bieten eine leistungsstarke Möglichkeit das Styling anzupassen, ohne komplexe CSS-Regeln zu benötigen. Die <zf-zenrush>-Komponente stellt eine Reihe von CSS-Variablen bereit, die angepasst werden können, um die Komponente an dein eigenes Theme oder deine eigene Marke anzupassen.

Hier ist eine Liste aller verfügbaren Variablen:

Allgemein

Diese Variablen werden verwendet, um die gesamte Komponente zu stylen.

Logo

Diese Variablen werden verwendet, um die #zr-logo und #zr-logo-icon Elemente innerhalb der <zf-zenrush>-Komponente zu stylen.

Beispielcode

Hier ist der CSS-Code, der verwendet wird, um die Komponente im Beispiel oben auf dieser Seite zu stylen:

CSS

.my-zenrush-theme {
  --zf-zenrush-background: transparent;
  --zf-zenrush-logo-size: 14px;
  --zf-zenrush-width: 546px;
  --zf-zenrush-font-family: 'Comic Sans MS', 'Comic Sans', Kursiv;
  --zf-zenrush-font-size: 16px;
  --zf-zenrush-text-color: #26005d;
}

HTML

<zf-zenrush
  store="DEIN-STORE-KEY-HIER"
  class="my-zenrush-theme">
</zf-zenrush>

Positionierung

Das <zf-zenrush>-Element wird standardmäßig relativ zum Elternelement positioniert. Da es sich hier aber um nicht mehr als pures HTML handelt, kannst du es mit CSS an jede beliebige Position auf der Seite verschieben, z.B. mit Hilfe eines <div>-Elements.

<div style="display: flex; align-item: center; justify-content: center;">
  <zf-zenrush
    store="DEIN-STORE-KEY-HIER"
    class="my-zenrush-theme">
  </zf-zenrush>
</div>

Damit wird das <zf-zenrush>-Element zentriert.