Skip to main content

How to adjust your Widget Editor Code

Jordan Platz
  • Updated
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 is: 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

 

Side-by-side comparison of Regiondo catalog view and product view layouts showing price, title, and booking areas.
 
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.  




styles-template-id="product-catalog-widget-styles" widget-id="d9c38076-5bbe-43c9-bce3-822500bc7c59"

 

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;
}
Regiondo product page showing a highlighted booking section with price and booking options in the top right.

 

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;
}
Regiondo offer page emphasizing the title and location information highlighted in the top left corner.

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 ;
}
Catalog view showing two Regiondo offers with booking buttons and a Regiondo branding logo highlighted at the bottom right.
 
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;
}
Product page displaying a Regiondo offer with sections for description, more information, and venue highlighted in red.

 

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).
Two offer cards displaying the Regiondo logo, titles, short descriptions, and booking buttons in a catalog layout.

 

2.7. HTML code from the Widget Editor

This is the code which you can get in your Widget Editor.


styles-template-id="product-catalog-widget-styles" widget-id="d9c38076-5bbe-43c9-bce3-822500bc7c59"

 

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:

 widget-id="d9c38076-5bbe-43c9-bce3-822500bc7c59"

 

Add snippet after the   

Result:

 styles-template-id="product-catalog-widget-styles" widget-id="d9c38076-5bbe-43c9-bce3-822500bc7c59"

 

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
}
Animated comparison showing multiple Regiondo offer cards with logos, descriptions, and booking options displayed side by side.

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 an 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%};
Side-by-side comparison of two Regiondo offer cards highlighting image display differences in the catalog layout.

 

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;
}
Comparison of two Regiondo offer pages highlighting the short description and list of experience highlights.

Related articles