Can I customize colors and styles of the widget? Add CSS?

You can customize colors and styles of your Bookeo widget. You can easily customize color settings for your booking page and your web designer or anyone with CSS/HTML experience can add custom CSS rules to personalize the booking interface. Click here to see examples of Bookeo widget customization.

 

Step 1 - Set colors for the widget Background and Page


1. Go to Settings>Colors and Styles

You can see the effects of all of your changes in the box in the middle of the page [1]. You can also test how this will look on your website with the Test Booking button [2] on the right hand side of the page. 



 

2. In the Page tab, you can set colors for the widget Background and Page

For the background, you can choose:

a. a color.

From the Background scroll down menu [3], select color, and pick the color [4].
You can also set a color for your title [5], text [6] and link [7].

b. an image.
From the Background scroll down menu [3], select image.
Click on the Upload button
[9] to upload an image. You can also choose a transparent background. You can download a transparent background 
at the bottom of this article.





 

Step 2 - Set colors for the widget boxes - the boxes containing your service/activity names, and also act to separate the services/activities


​In the Box tab, you can select the colors for your Boxes. The Boxes referred to here are the boxes containing your service/activity names, and also act to separate the services/activities.

You can set the default color or set custom colors.





Step 3 - Set colors and styles of your booking page tabs

In the Buttons Section

  • Tick the checkbox to display icons in small/large buttons [10]

  • Select the Color scheme [11] from the scroll down menu: orange or green. 





Step 4 - Set custom CSS rules

In the Custom CSS Section (advanced), input your Custom CSS
.


If you are familiar with web development, the best way to find out what CSS rule selector you need, is to use a browser such as Google Chrome, which lets you find exactly the CSS id/class of every element just by clicking on it:

  • enable the browser's element inspector (Ctrl-Shift-I), section Elements, click on the magnifying glass at the bottom

  • click on the element you want to change

  • find its CSS id/class

  • add a CSS rule for that element

 

To learn more about CSS, we suggest one of the many tutorials available on the web, ex. http://www.w3schools.com/css/

CSS rules do not apply to the mobile interface. The mobile interface is optimized and tested for all major mobile platforms, and for this reason customization is not supported. 

 

Attachments

transparent_image.gif transparent_image.gif