CSS Customisation Guide for the Booking Engine

Our booking engine is designed to be flexible and customisable. You can indeed insert custom CSS rules directly from the settings, without needing to modify the source code.
This guide will help you to:

• understand where to write the custom CSS,
• use the browser inspection tools to identify the elements to modify,
• Some "best practices"

✅ Where to insert custom CSS

You can insert your CSS code directly into the booking engine settings, in the dedicated section called:

🔧 "Custom CSS"

The changes will be loaded every time the booking engine is displayed.

🛠️ Recommended tools: 

• Chrome or Firefox
• A text editor to save your rules before inserting them into the Ciaobooking booking engine settings. This makes them easier to read. Notepad++ can be a great tool, but for those who prefer something more comprehensive, Visual Studio Code is excellent. 

📒 CSS Basics: 

This guide is very useful for those who have never worked with CSS code: 
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_syntax/Syntax

✨ How to inspect and test changes in real-time:

1. Open your site where the booking engine is integrated.
2. Right click on an area you want to modify and select “Inspect” (or “Inspect”).
3. The developer tools panel will open.
4. Use the icon that looks like an arrow. It is often found at the top left (in the panel that has opened) to select an element in the HTML page.
   
5. In the “Elements” tab, you will see the HTML code.
6. In the “Styles” tab, you can temporarily add CSS rules and see them applied in real-time.
   
7. The system will automatically suggest a name (CSS selector), which is usually fine, but it is advisable to read this manual on CSS selectors. 
   
   In fact, with the appropriate selector, the same style can be applied to multiple elements. 
   
   An "extreme" case might be as follows: 
   * { border-radius: 0px !important; }
   The asterisk * in the code above is a selector that, if left alone, selects ALL elements on the site page. border-radius is a CSS style whose subsequent value "0px" cancels any rounded border. The attribute "!important" forces the overriding of other CSS rules that might apply the rounded border. 
   
   
8. Once the CSS selector is confirmed, press enter on the keyboard, click on the selector, and start applying the CSS rules you prefer. 
   
   Here is the complete list of available rules in CSS code (CSS properties)
   https://developer.mozilla.org/en-US/docs/Web/CSS/Reference#index 
   
   For example, we want the selected element (via the CSS selector) to have a maximum width of 1024px and to be centred:
   
   div#main-searchbar { max-width: 1024px; margin: auto; }
   
   
9. When the result satisfies you, copy the rules (right click on the CSS selector → Copy rule), and paste them into the “Custom CSS” section of the booking engine. 
   You can also temporarily paste them into your text editor, so you can save multiple CSS rules and then copy them directly into the custom CSS field once you have finished your customisations. 

🧠 Best practices for CSS modification

• Identify the right element: use the development tools to find the ID or class of the element.
• Do not overuse !important, use it only if strictly necessary.
• Mobile-first: apply styles for mobile first, then use media queries for desktop.

• Comment your code to make it clearer:

  /* Change colour of the search button */
  #home-search-button {
    background-color: #ff5a5f;
    color: white;
  }
  

• Avoid excessively invasive changes that may break responsiveness or the default layout.
• Always check on multiple devices (desktop, tablet, mobile).

🧾 Complete list of available IDs in the booking engine theme

Here are all the HTML IDs currently present in our booking engine. You can use them in your CSS selectors to customise specific sections:

🧪 Final tips

• After each change, reload the page and check that everything works correctly.
• If you want to undo a change, you can simply remove or comment out the rule in the custom CSS.

🎨 Need inspiration?

Below you will find CSS examples to draw inspiration from for customising your booking engine. The first examples are taken from real cases used by other clients, while the second are invented but useful suggestions, built directly on the IDs available in the system.

🧩 Real examples from existing networks

/* 1. Centre and limit the width of the search bar */
#main-searchbar {
  bottom: 3rem;
  max-width: 1344px;
  margin: auto;
}

/* 2. Centre the content on the homepage */
.home-layout .hero-body {
  justify-content: center !important;
}

/* 3. Reduce padding in the footer */
.footer {
  padding: 0px;
}

/* 4. Add beige background to the footer when visible */
.has-desktop-home-search-bar .footer {
  padding-bottom: 8rem !important;
  background: #E1D4BB;
}

/* 5. Space around the hero-foot */
.hero-foot.search-fixed {
  margin: 40px;
}

/* 6. Fixed size of the logo in the navbar */
.navbar-brand img {
  height: 60px !important;
  max-height: 60px !important;
}

/* 7. Remove vertical spacing in the navbar */
.navbar {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* 8. Widen the logo */
img#logo-img {
  max-width: unset !important;
  width: 170px;
  max-height: unset !important;
}

/* 9. Alternative version of the logo in the navbar */
.navbar-brand img {
  max-height: unset !important;
  height: 80px;
}

/* 10. Wider and centred navbar */
.navbar {
  background-color: #fff !important;
  padding-left: 20vw !important;
  padding-right: 20vw !important;
}

/* 11. Transparent background in the hero */
.hero-body {
  background: none !important;
}

/* 12. Font of the main title */
h1.title.is-size-1.mb-6.has-text-white {
  font-size: 4rem !important;
}

/* 13. Uniform white background */
body {
  background-color: white !important;
}

/* 14. Vertical padding of main sections */
.welcome-section, .card-section {
  padding-top: 120px;
}

/* 15. White background for the welcome section */
.welcome-section {
  background-color: white !important;
}

/* 16. Taller logo */
#logo-img {
  max-height: 120px !important;
}

/* 17. Dark footer with light text */
footer {
  background-color: #3a332e !important;
  color: #eeeeee;
}

/* 18. Light social icons */
.mdi-facebook,
.mdi-instagram,
.mdi-twitter {
  color: #eeeeee !important;
}

🧪 Creative suggestions based on theme IDs

/* Customisation for #filters-siderbar */
#filters-siderbar {
  background-color: #f2f2f2;
  padding: 1rem;
  border-radius: 0.5rem;
}

/* Customisation for #property-amenities */
#property-amenities {
  display: grid;
  gap: 1rem;
  background-color: #fff9f0;
}

/* Customisation for #summary-total-card */
#summary-total-card {
  font-weight: bold;
  background-color: #f8f8ff;
  padding: 2rem;
}

/* Customisation for #unit-combined */
#unit-combined {
  border: 1px solid #ccc;
  padding: 2rem;
}

/* Customisation for #setup-form */
#setup-form {
  background-color: #f5f5f5;
  padding: 1.5rem;
  border-radius: 1rem;
}

/* Customisation for #additional-info-address */
#additional-info-address {
  border-left: 4px solid #007bff;
  padding-left: 1rem;
}

/* Customisation for #additional-info-travel */
#additional-info-travel {
  background-color: #fff0f0;
  padding: 1rem;
}

/* Customisation for #book-steps-container */
#book-steps-container {
  margin-top: 2rem;
}

/* Customisation for #animate-desktop-selection */
#animate-desktop-selection {
  transition: transform 0.2s;
}
#animate-desktop-selection:hover {
  transform: scale(1.02);
}

/* Customisation for #floating-cart */
#floating-cart {
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

/* Customisation for #modal-timer */
#modal-timer {
  border: 2px solid #ffc107;
  background-color: #fffbe6;
}

/* Customisation for #beds-section */
#beds-section {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

/* Customisation for #card-errors */
#card-errors {
  color: red;
  font-size: 1rem;
}

/* Customisation for #iban-element */
#iban-element input {
  padding: 0.75rem;
  border: 1px solid #ccc;
}

/* Customisation for #property-policy-block */
#property-policy-block {
  background-color: #fefefe;
  padding: 2rem;
}

/* Customisation for #home-search-button */
#home-search-button {
  background-color: #008cba;
  color: white;
  font-weight: bold;
}

/* Customisation for #main-searchbar */
#main-searchbar {
  background-color: rgba(255, 255, 255, 0.9);
}

/* Customisation for #desktop-cart */
#desktop-cart {
  border-left: 4px solid #4caf50;
  padding-left: 1rem;
}

📘 How to apply these styles

1. Copy one or more CSS blocks from above.
2. Go to the Custom CSS section in your booking engine settings.
3. Paste the code.
4. Save and reload the site to see the effect immediately.