Wie passe ich den Widget Editor Code über CSS an? – Regiondo

Mit Hilfe des Widget Editors lässt sich ganz einfach die Button-Farbe, die Schriftart, sichtbare Inhalte etc. einstellen und bearbeiten. Doch um alle Anpassungsmöglichkeiten auszuschöpfen, sollte man sich mit CSS beschäftigen.

Hinweis

Um Ihren CSS Code zu testen, gibt es mehrere Websites, die dies ermöglichen. Eine davon wäre z.B. https://www.w3schools.com/html/tryit.asp?filename=tryhtml_intro

1. Jetzt mit CSS loslegen!

Jeder CSS-Code sollte mit der Bezeichnung <template id="product-catalog-widget-styles"> beginnen, damit dieser weiß, dass es sich um das Product- und Catalog Widget handelt. Darüberhinaus ist dies die Verknüpfung zwischen CSS und HTML-Code an.

<template id="product-catalog-widget-styles">
  <style>
  </style>
</template>

Anschließend, abhängig davon was genau bearbeitet werden soll wird eine Bezeichnung unter dem ersten <style> eingefügt. Wichtig dabei ist, dass davor ein Punkt . und dahinter eine geschwungene Klammer { gesetzt werden. In der nächsten Zeile kann bestimmt werden, ob z.B. die Farbe geändert werden soll. Dementsprechend wird das Wort color und dahinter ein Doppelpunkt : eingefügt. Daraufhin kann sowohl ein Hex-Farbcode oder eine Farbe als Wort bestimmt werden. Wirklich wichtig ist es, dahinter ein Semikolon ; zu setzen. Um den Code abzuschließen wird wieder eine geschwungene Klammer } verwendet. Man kann danach weitere Codes einsetzten, ansonsten endet der Befehl wieder mit </style> und </template> und dem bestehenden HTML-Code aus dem Regiondo Widget Editor, um den Befehl zu schließen.

Wichtig

<template id="product-catalog-widget-styles">

<style>

.regiondo-booking-header {

color: #008000;

}

</style>

Die erste Zeile meint, dass mit dem Product- und Catalog Widget gearbeitet wird. Alles fett gedruckte muss eingegeben werden, sodass der Code funktioniert. Alles kursiv gedruckte meint, dass es variabel ist und damit geändert werden kann.

2. Klassisches Beispiel für eine CSS-Anpassung

In dem untenstehenden CSS-Code finden Sie häufig gewünschte Anpassungsmöglichkeiten. Die Auswirkungen des Codes auf die Widgets sehen Sie im oberen Bild. Dabei wird zwischen der Catalog- und Product View unterschieden. Um Ihnen jede Anpassungsmöglichkeit zu erläutern, gehen wir im Folgenden den Code Schritt für Schritt durch.

<template id="product-catalog-widget-styles">
<style>
.regiondo-booking-header {
color: #0275A4;
}
.regiondo-product-header {
color: #0275A4;
}
.regiondo-catalog, .Re-c-MuiOutlinedInput-marginDense, .regiondo-list-product, .regiondo-product-details {
background-color: transparent;
}
.Re-c-MuiButton-label svg {
display: none;
}
.regiondo-widget{background-color: transparent;}
.regiondo-collapsible-header{
color: #0275A4;
}
.regiondo-list-product-header{
color: #0275A4;
}
</style>
</template>
<product-catalog-widget styles-template-id="product-catalog-widget-styles" customer-code="EN93" locale="en_US" category-filter="26909" disable-features="category-filter"></product-catalog-widget><script type="text/javascript" src="https://widgets.regiondo.net/catalog/v1/catalog-widget.min.js"></script>

2.1 Überschrift im Produkt "Booking"

Mit diesem CSS-Code wird die Überschrift "Booking" in der Product View bearbeitet. Dabei ändert sich auch die Farbe der Preisangabe. Im aktuellen Code wurde die Farbe #0275A4 (blau) verwendet. Diese kann mit einem beliebigem Hex-Farbcode ersetzt werden.

.regiondo-booking-header {
color: #0275A4;
}

2.2 Überschrift im Produkt "Title the offer"

Die Bezeichnung regiondo-product-header im CSS-Code bezeichnet die Überschrift über dem Angebotsbild in der Product View. Durch das Austauschen des Hex-Farbcodes kann die Farbe beliebig geändert werden.

.regiondo-product-header {
color: #0275A4;
}

2.3 Allgemeiner Hintergrund des ganzen Widgets

Theoretisch lässt sich auch die Farbe des Hintergrunds ändern, jedoch sollte diese immer transparent bleiben. Warum? Durch den transparenten Hintergrund, passen die Widgets optimal zur Website.

.regiondo-catalog, .Re-c-MuiOutlinedInput-marginDense, .regiondo-list-product, .regiondo-product-details {
background-color: transparent;
}

2.4 Ausblenden des Regiondo Logos in der Catalog View

Dieser CSS-Code ermöglicht Ihnen das Regiondo Logo (siehe Bild) in der Catalog View auszublenden.

.Re-c-MuiButton-label svg {
display:none ;
}

2.5 Überschrift im Produkt "Description", "More information", "Venue"

Mit diesem CSS-Code lässt sich die Product View des Widgets bearbeiten. Zum einem könnte auch hier die Hintergrundfarbe des Booking Widgets angepasst werden, allerdings sollte diese bestenfalls transparent bleiben. Zum anderem kann die Schriftfarbe der sichtbaren Produktdetails individualisiert werden. In unserem Beispiel wären diese: "Beschreibung" (Description), "Mehr Informationen" (More Information) sowie der "Veranstaltungsort" (Venue).

Im folgenden CSS-Code kann die Farbe mit jedem beliebigen Hex-Farbcode geändert werden.

Beispiel

Der Hex-Farbcode #0275A4 (blau) wurde in #008000 (grün) geändert.

.regiondo-widget{background-color: transparent;}
.regiondo-collapsible-header{
color: #0275A4;
}

2.6 Überschrift "Title the offer"

Auch die Überschrift des Angebots in der Catalog View lässt sich farblich individualisieren. Dazu einfach den bestehenden Hex-Farbcode in die gewünschte Farbe ändern.

.regiondo-list-product-header{
color: #0275A4;
}

Beispiel

Der Hex-Farbcode #0275A4 (blau) wurde in #008000 (grün) geändert.

Dies ist der Code, den Sie aus Ihrem Widget Editor entnehmen können.

</style>
</template>
<product-catalog-widget styles-template-id="product-catalog-widget-styles" customer-code="EN93" locale="en_US" category-filter="26909" disable-features="category-filter"></product-catalog-widget><script type="text/javascript" src="https://widgets.regiondo.net/catalog/v1/catalog-widget.min.js"></script>

Damit die CSS-Anpassung funktioniert, muss noch ein Snippet in den HTML-Code aus dem Widget-Editor eingefügt werden.

Der Teil styles-template-id="product-catalog-widget-styles" muss nach dem Erstellen des HTML-Codes im Widget-Editor hinzugefügt werden.

Beispiel HTML-Code aus dem Widget-Editor:

<product-catalog-widget customer-code="EN93" locale="en_US" category-filter="26909" disable-features="category-filter"></product-catalog-widget><script type="text/javascript" src="https://widgets.regiondo.net/catalog/v1/catalog-widget.min.js"></script>

Snippet nach dem <product-catalog-widget> einfügen

Ergebnis:

<product-catalog-widget styles-template-id="product-catalog-widget-styles" customer-code="EN93" locale="en_US" category-filter="26909" disable-features="category-filter"></product-catalog-widget><script type="text/javascript" src="https://widgets.regiondo.net/catalog/v1/catalog-widget.min.js"></script>

3. Andere mögliche CSS-Anpassungen

3.1 Button Hover Farbeffekt in der Catalog View

Durch Hinzufügen dieses CSS-Codes kann die Farbe des Button-Hovers in der Catalog View angepasst werden. In diesem Fall ist die Farbe des Hovers grün und die Hintergrundfarbe des Buttons blau. Im untenstehenden GIF sehen Sie die daraus resultierende Wirkung.

Hinweis

Was ist ein Hover-Effekt? Es wird auch Mouseover-Effekt genannt und erscheint, wenn der Nutzer mit der Maus über ein Element, hier ein Button, fährt.

.regiondo-list-product-button:hover {
background-color: green;
color: blue
}

3.2 Angebotsbild mit abgerundeten Ecken

Mit diesem CSS Code lassen sich die Ecken des Angebotsbildes abrunden. Öffnen Sie dazu am besten einen HTML Simulator, fügen den untenstehenden Code hinzu und fügen eine beliebige Prozentzahl ein. Die Änderungen lassen sich im Simulator erkennen und Sie wissen dementsprechend genau, welche Prozentzahl am besten für Sie funktioniert.

.regiondo-list-product-image {
border-radius: 35% 35% 35% 35% / 35% 35% 35% 35%};

3.3 Ersetzen der Highlight Stichpunkte mit dem Logo

Nur Stichpunkte sind langweilig! Ersetzen Sie die Highlight Stichpunkte in der Produktbeschreibung mir Ihrem Logo und holen Sie damit das Maximum aus den Personalisierungsmöglichkeiten raus. Ersetzen Sie einfach den roten Link im untenstehenden CSS Code mit dem Link, welcher zu Ihrem Logo führt. Das war´s auch schon!

.regiondo-product-highlights > li::before {
content: "";
position: absolute;
background: url("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSGJuXVE0Qvz70hWMErEJRjw_u_Jo6zunyhnXcD64cTwSQ6IblBY-bcD43P5MDVNIsYjlY&usqp=CAU") center no-repeat;
background-size: contain;
width: 25px;
height: 25px;
margin-left: -35px;
margin-top: -5px;
}