This article explains how to apply custom colors to your booking engine page.
For more information about customization codes, see How to add HTML and CSS Code to Custom Meta Tags Fields
Overview
The color picker tool allows you to select the colors you would like to apply to customize your Booking Engine. Find 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
Step 1 - Choose colors for your Booking Engine
- Click on Manage (gear icon)
- Click on Customize the Booking Engine
- Choose a color by clicking on the sample color. When selecting a color, see the preview on the right-hand side. You can also type-in specific color codes.
- Save. The selected colors will apply to both the List Design and Gallery Design when saved.
To include your own customized header and footer on your booking page, enter the information as shown above. If nothing is entered into the fields, the default hotel header and footer will be applied.
- Click Reset all to Default to change back to the Cloudbeds’ default color scheme for any individual section or for all sections.
- To make the Header and Navigation arrows (for example) the same color, copy and paste the code (including the "#" symbol) from one entry field to the next one.
Step 2 - Match the Cloudbeds Booking Engine colors with your website palette
To use the sample colors offered, enter the code of the desired color. There are multiple services on the internet which can help you with the color codes, https://imagecolorpicker.com/ is one of them. Here is how it works:
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:
