Gestaltung eines Widgets

Das Aussehen eines Widgets kann über zwei Arten verändert werden. Mit Hilfe des Edit Variables Buttons im TYPO3 Backend vom Onlineshop können die Farben des Widgets für eine bestimmte Domain verändert werden. Über CSS Variablen sowie eigenem CSS können Widgets vom jeweiligen Integrator ganz individuell angepasst werden.

Widget Farben anpassen über TYPO3 Backend

Über die Variablen der drei Hauptfarben jedes Widgets, können diese schnell und einfach angepasst werden.

1. Im Menüpunkt Shop Widgets den Edit variables Button drücken.
2. Domain auf welcher die Änderungen vorgenommen werden sollte eintragen (ohne https, Domain der Website auf der die Widgets angezeigt werden)
3. + Add klicken.
4. Unter Primary, Secondary und Tertiary color können nun die Farben angepasst werden.
5. Save drücken um die Änderungen zu speichern.
6. Überprüfen ob die Domain auch beim jeweiligen Widget eingetragen ist, ansonsten unter Edit → Settings → Domain eintragen (ohne https).

Widget Farben über eigenes CSS anpassen

Grundsätzlich gibt es 3 CSS Variablen über die die Farben eingestellt werden können:

--color-primary: #0077B1; --color-secondary: #00A9E2; --color-tertiary: #4A96D2;

Individuelles Styling über CSS Variablen

Einige Teile des Widgets sind über vordefinierte CSS Variablen konfigurierbar. Folgend eine Liste der verfügbaren CSS Variablen:

.WSSW {
--color-primary: #0077B1;
--color-secondary: #00A9E2;
--color-tertiary: #4A96D2;

--grey: #C0CFD6;
--darkgrey: #545C60;
--box-shadow: 0 2px 4px rgba(1, 1, 1, 0.15);
--strong: 800;
--medium-fontWeight: 600;

--wssw-font: darkmode-on, sans-serif;
font-family: var(--wssw-font);

--artBtn-bgColor: var(--color-tertiary);
--artBtn-fontColor: white;
--artBtn-width: auto;
--artBtn-withLogo-boxColor: var(--grey);
--artBtn-withLogo-direction: column;
--artBtn-withLogo-logoWidth: 200px;

--artList-item-bgColor: var(--grey);
--artList-fontColor: var(--darkgrey);
--artList-fontSize: 14px;
--artList-lineHeight: 1.5;
--artList-header-fontSize: 16px;
--artList-content-bgColor: white;
--artList-box-shadow: var(--box-shadow);
--artList-image-minHeight: 20px;
--artList-button-fontColor: white;
--artList-button-icon-size: var(--artList-fontSize);
--artList-button-lineHeight: 1.5;
--artList-btn-fontWeight: var(--medium-fontWeight);
--artList-flex-basis: 25%;

@media screen and (max-width: 1200px) {
--artList-flex-basis: 33.333%;
}

@media screen and (max-width: 992px) {
--artList-flex-basis: 50%;
}

@media screen and (max-width: 768px) {
--artList-flex-basis: 100%;
}

--artContent-bgColor: var(--grey);
--artContent-box-shadow: var(--box-shadow);
--artContent-fontColor: var(--darkgrey);
--artContent-hoverColor: var(--color-primary);
--artContent-btn-color: var(--color-tertiary);
--artContent-btn-fontColor: white;
--artContent-btn-fontWeight: var(--medium-fontWeight);
--artContent-fontSize: 14px;
--artContent-lineHeight: 1.5;
--artContent-title-fontSize: 24px;
--artContent-flex-basis: 50%;
--artContent-icon-size: 25px;
--artContent-wrap: nowrap;

@media screen and (max-width: 768px) {
--artContent-flex-basis: 100%;
--artContent-wrap: wrap;
}

--artPriceTable-fontColor: var(--darkgrey);
--artPriceTable-fontSize: 14px;
--artPriceTable-bgcolor: var(--grey);
--artPriceTable-th-fontColor: white;
--artPriceTable-th-bgColor: var(--color-primary);
--artPriceTable-th-fontSize: 20px;
--artPriceTable-box-shadow: var(--box-shadow);
--artPriceTable-td-fontWeight: var(--medium-fontWeight);
--artPriceTable-td-borderColor: var(--color-primary);
--artPriceTable-icon-size: 25px;
--artPriceTable-icon-color: var(--color-secondary);
--artPriceTable-btn-color: var(--color-tertiary);
--artPriceTable-btn-fontColor: white;
--artPriceTable-btn-fontWeight: var(--medium-fontWeight);

--artFilter-title-align: center;
--artFilter-title-color: white;
--artFilter-field-size: 300px;
--artFilter-fields-direction: row;
}

Individuelle CSS Anpassungen

Um ein Widget ganz individuell anzupassen sind CSS Anpassungen auf der Seite auf welcher das Widget eingebunden ist notwendig. Folgend ist eine Liste der am häufigsten benötigten CSS Klassen.

Button:

• WSSW__artBtn__button → sämtliches Aussehen des Buttons

Artikelinhalt:

• .WSSW__artContent → äußerstes Element welches alle Artikel umschließt
• .WSSW__artContent__wrap → umschließt jeden einzelnen Artikel, farblicher Rahmen o. ä. können damit gestaltet werden
• .WSSW__artContent__item → umschließt den gesamten Artikel, farblicher Hintergrund o. ä. können damit gestaltet werden
• .WSSW__artContent__image__slider__item → Artikelbild
• .WSSW__artContent__text → gesamter Text
• .WSSW__artContent__title → Überschrift
• .WSSW__artContent__description → Artikelbeschreibung
• .WSSW__artContent__booknow__button → “Jetzt Buchen” Button

Artikelliste:

• .WSSW__artList → äußerstes Element welches alle Artikel umschließt
• .WSSW__artList__item → umschließt den gesamten Artikel, farblicher Rahmen o. ä. können damit gestaltet werden
• .WSSW__artList__item__image__active img → Artikelbild
• .WSSW__artList__item__content → Element welches Überschrift und Beschreibung enthält, farblicher Hintergrund o. ä. können damit gestaltet werden
• .WSSW__artList__text → gesamter Text
• .WSSW__artList__title → Überschrift
• .WSSW__artList__description → Artikelbeschreibung
• .WSSW__artList__booknow__button → “Jetzt Buchen” Buttons
• .WSSW__artList__item__price → Preis Button

Artikelfilter:

• .WSSW__artFilter → äußerstes Element, Hintergrundfarbe o. ä. können damit gestaltet werden
• .WSSW__artFilter__title → Überschrift
• .ws--form-input.hasLabel → alle Input Felder
• .WSSW__artFilter__btn--wrap .WSSW__artFilter__btn → “Ergebnisse anzeigen” Button
• Ergebnisse → siehe Artikelliste

Artikel Preistabelle:

• .WSSW__artPriceTable → äußerstes Element welches die gesamte Tabelle umschließt
• .WSSW__artPriceTable__label → Überschrift
• .WSSW__artPriceTable__table → umschließt alle Zeilen der Tabelle, Hintergrundfarbe o. ä. können damit gestaltet werden
• .WSSW__artPriceTable__table__head → Kopfzeile
• .WSSW__artPriceTable__table__row → alle Zeilen außer Kopfzeile
• .WSSW__artPriceTable a → rechte Spalte (Preise)
• .WSSW__artPriceTable__booknow__button → “Jetzt buchen” Button