How can I customize the design of the widget codes on my website via CSS?

In this article, you will learn how you can use your CSS to make design adjustments to our widget codes on your website

TIP: You can easily change the font and the colors for the buttons and the headline directly in our widget code. You can find out how this works in this article.

To ensure that the widget codes adapt even better to the CI of your website, you can also make changes via your CSS on your website. Take a look at the following two customer examples.

Please note: Please do not remove our logo at the bottom right of the last stream!

Customer example 1 – Sonnenhof Alpendorf:

Customer example 2 – Hotel zur Treene:

You can see that the streams of the two customers look very different. In both cases, however, the same widget codes from us form the basis, only a few design adjustments were made to the CSS by the programmers. Below you will find an overview of the most important CSS classes:

To round off the corners of the experience tiles, for example, you need to control these CSS classes:
.giggle_block .stream-activity
You can select these CSS classes to change the size of the tiles:
.giggle_stream .g-widget .stream__group-activities a.stream-activity
You need these CSS classes to make changes to the header of the stream:
.giggle-widget-v2 .stream__title
You can make changes to the experience title using these CSS classes:
.giggle-widget-v2 .stream-simple h3.stream-activity__title
You control price adjustments via:
.giggle-widget-v2 .stream-activity__currency
or
.giggle-widget-v2 .stream-activity__top
You can remove the color gradient here:
.giggle-widget-v2 .stream-activity__shadow