As of February 2020, the process of customizing the colors of your booking engine has become easier.
This article explains how to set your custom colors for the mybookings page. For further information about customization codes, refer to this article: Customize mybookings - HTML and CSS Custom Meta Tags
Cloudbeds is offering easy-to-use color pickers for the following five sections of the booking engine:
- Background Color
- Header Color
- Navigation Arrows
- Search Button
- General Button Color
Access Manage (1) -> Customize mybookings (2) -> and choose the needed color for each part of the mybookings page (3):
If you want to include your own customized header and footer on your booking page, you can enter the information as shown above. If nothing is entered into the fields, the default hotel header and footer will be used.
How does it work?
Navigate to the Customize Mybookings page and type in specific color codes (please, check the next section for further information) or choose a color by clicking on the sample color.
When selecting a color, you can see a preview on the right-hand side:
Click on "Reset" to change back to Cloudbeds’ default color scheme for any individual section or for all sections.
If you want to make the Header and Navigation arrows (for example) the same color, you can simply copy and paste the code (including the "#" symbol) from one entry field to the next one.
The colors chosen will apply to both the List Design and Gallery Design when you save changes.
Matching Mybookings colors with your website palette
You can also install one of the Chrome color picker extensions. Example: ColorPick Eyedropper:
Once you add the extension, click on the icon in the top right corner of your browser and click on the screen to see the color code: