With the aid of the Widget Editor you can easily set and edit the button color, the font and the visible content. But in order to make full use of all the customization options, you should get to know CSS.
Note
There are many websites to test your CSS code. One of them: https://www.w3schools.com/html/tryit.asp?filename=tryhtml_intro
1.How to work with CSS
Every CSS code should begin with the term <template id="product-catalog-widget-styles"> in order to know that´s about the Product and Catalog Widget. Moreover, is this term responsible for the connection between CSS and HTML code.
<template id="product-catalog-widget-styles">
<style>
</style>
</template>Then, depending on what exactly is to be edited, a term should be inserted below the first <style>. It is important that a dot . is placed in front of it and a curved bracket { behind it. In the next line, you can determine whether, for example, the color should be changed. Accordingly, the word color is inserted and a colon : behind it. After that, a hex color code or the color as a word (like green) can be defined.
Really important is to add a semicolon ; after the color. To complete this, a curved bracket } is used again. You can then insert further CSS codes, otherwise it ends with </style> again and the existing HTML code from the Regiondo Widget Editor. The term </template> is used to close the command. That´s it!
Important
<template id="product-catalog-widget-styles">
<style>
.regiondo-booking-header {
color: #008000;
}
</style>
The first term means that you work with the Product and Catalog Widget. Everything in bold must be entered for the code to work. And everything in italic means that it can be changed.
Note
How to make curved brackets? Try...
- Alt Gr and 7 for {
- Alt Gr and 0 for }
2. Typical example of a CSS adjustment
In the CSS code below you will find frequently requested customization options. You can see the effects of the code on the Widgets in the image above. A distinction is made between the catalog and product view. In order to explain each customization option to you, we will go through the CSS code step by step below.
<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" widget-id="d9c38076-5bbe-43c9-bce3-822500bc7c59"></product-catalog-widget><script type="text/javascript" src="https://widgets.regiondo.net/catalog/v1/catalog-widget.min.js"></script>2.1 Header in the Product "Booking"
This CSS code edits the heading "Booking" in the Product view. This also changes the color of the price information. In the current code, the color #0275A4 (blue) was used. This can be replaced with any hex color code.
.regiondo-booking-header {
color: #0275A4;
}
2.2 Header in the Product "Title the offer"
The term regiondo-product-header in the CSS code designates the heading above the offer image in the Product view. By exchanging the hex color code, the color can be changed as desired.
.regiondo-product-header {
color: #0275A4;
}
2.3 General Background of the Widget
In theory, the color of the background can also be changed, but it should always remain transparent. Why? The Widgets will fit optimally to the Website if the background is transparent.
.regiondo-catalog, .Re-c-MuiOutlinedInput-marginDense, .regiondo-list-product, .regiondo-product-details {
background-color: transparent;
}2.4 Hide the Regiondo logo in the Catalog view
This CSS code allows you to hide the Regiondo logo in the Catalog view.
.Re-c-MuiButton-label svg {
display:none ;
}
Note
In case this is not working for you, because of a dynamic class, please contact support@regiondo.com for further assistance.
2.5 Header in the Product "Description", "More information", "Venue"
This CSS code makes it possible to edit the Product view of the Widget. On the one hand you can adjust the background color of the Booking Widget, but it should remain transparent at the best. On the other hand you can customize the font color of the visible contents. In this case it would be: Description, More information and Venue.
In the following CSS code you can change the color with any hex color code.
Example
The hex color code #0275A4 (blue) was changed to #008000 (green).
.regiondo-widget{background-color: transparent;}
.regiondo-collapsible-header{
color: #0275A4;
}
2.6 Header "Title the offer"
The headers of the offers in the Catalog view can also be customized in terms of color. Simply exchange the existing hex color code to the desired color.
.regiondo-list-product-header{
color: #0275A4;
}Example
The hex color code #0275A4 (blue) was changed to #008000 (green).
2.7 HTML code from the Widget Editor
This is the code which you can get in your Widget Editor.
</style>
</template>
<product-catalog-widget styles-template-id="product-catalog-widget-styles" widget-id="d9c38076-5bbe-43c9-bce3-822500bc7c59"></product-catalog-widget><script type="text/javascript" src="https://widgets.regiondo.net/catalog/v1/catalog-widget.min.js"></script>In order for CSS customization to work, a snippet must still be inserted in the HTML code from the widget editor.
The part styles-template-id="product-catalog-widget-styles" has to be added after creating the HTML-Code in the Widget Editor.
Example HTML-Code from Widget Editor:
<product-catalog-widget widget-id="d9c38076-5bbe-43c9-bce3-822500bc7c59"></product-catalog-widget><script type="text/javascript" src="https://widgets.regiondo.net/catalog/v1/catalog-widget.min.js"></script>
Add snippet after the <product-catalog-widget
Result:
<product-catalog-widget styles-template-id="product-catalog-widget-styles" widget-id="d9c38076-5bbe-43c9-bce3-822500bc7c59"></product-catalog-widget><script type="text/javascript" src="https://widgets.regiondo.net/catalog/v1/catalog-widget.min.js"></script>
3. Other possible CSS adjustments
3.1 Button hover color effect in the Catalog view
If you add this CSS code, you are able to adjust the color of the button hover effect in the catalog view. In this case, the color of the hover effect is green, but you can also decide which background colors the button should have. In this example, the background color is blue. Take a look at the GIF to see the result.
Note
What is a hover effect? It is also called mouseover effect and appears if the user moves the mouse over an element, e.g. a button.
.regiondo-list-product-button:hover {
background-color: green;
color: blue
}
3.2 Offer image with rounded corners
If you add this CSS code, you are able to edit the corners of the offer image. Open a HTML simulator, add the code below and insert any number you like. The changes can then be seen in the simulator and you know exactly which percentage works for you.
.regiondo-list-product-image {
border-radius: 35% 35% 35% 35% / 35% 35% 35% 35%};
3.3 Highlights replaced with images
Just key points are boring! Replace the highlight key points in the product description with your logo and get the most out of the personalization options. Simply replace the red link in the CSS code below with the link that leads to your logo. That´s it!
.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;
}