Guida alla Personalizzazione CSS del Booking Engine

Il nostro booking engine è progettato per essere flessibile e personalizzabile. È infatti possibile inserire regole CSS personalizzate direttamente dalle impostazioni, senza bisogno di modificare il codice sorgente.
Questa guida ti aiuterà a:

• capire dove scrivere il CSS personalizzato,
• utilizzare gli strumenti di ispezione dei browser per identificare gli elementi da modificare,
• Alcune "best practice"

✅ Dove inserire il CSS personalizzato

Puoi inserire il tuo codice CSS direttamente nelle impostazioni del booking engine, nella sezione dedicata chiamata:

🔧 "CSS personalizzato"

Le modifiche saranno caricate ogni volta che viene visualizzato il booking engine.

🛠️ Strumenti consigliati: 

• Chrome oppure Firefox
• Un editor di testo per salvare l tue regole prima di inserirle nelle impostazioni del booking engine di Ciaobookig. Questo ne semplifica la lettura. Notepad++ piò essere un ottimo tool, ma per chi preferisce qualcosa di più completo, Visual Studio code è ottimo. 

📒 Le basi del CSS: 

Questa guida è molto utile per chi non ha mai lavorato sul codice CSS: 
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_syntax/Syntax

✨ Come ispezionare e testare le modifiche in tempo reale:

1. Apri il tuo sito dove è integrato il booking engine.
2. Fai click destro su un’area che vuoi modificare e seleziona “Ispeziona” (o “Inspect”).
3. Si aprirà il pannello degli strumenti per sviluppatori.
4. Usa l’icona simile ad una freccia. Si trova spesso in alto a sinistra (nel pannello che si è aperto) per selezionare un elemento nella pagina HTML.
   
5. Nella scheda “Elements” (Elementi), vedrai il codice HTML.
6. Nella scheda “Styles” (Stili), potrai aggiungere regole CSS temporaneamente e vederle applicate in tempo reale.
   
7. Il sistema proporrà in automatico un nome (selettore CSS), nella maggior parte dei casi può andare bene, ma si consiglia la lettura di questo manuale sui selettori CSS. 
   
   Di fatto con il selettore adatto, lo stesso stile può essere applicato a più elementi. 
   
   Un caso "estremo" può essere il seguente: 
   * { border-radius: 0px !important; }
   L'asterisco * nel codice sopra è un selettore che se lasciato da solo, seleziona TUTTI gli elementi della pagina del sito. border-radius è invece uno stile CSS il quale valore successivo "0px" annulla qualunque bordo arrotondato. l'attirbuto "!important" invece obbliga la sovrascrittura di altre regole CSS che potrebbero applicare il bordo arrotondato. 
   
   
8. Una volta confermato il selettore CSS, premi invio sulla tastiera, clicca in corrispondenza del selettore e inizia ad applicare le regole CSS che preferisci. 
   
   Qui hai l'elenco completo delle regole disponibili nel codice CSS (proprietà CSS)
   https://developer.mozilla.org/en-US/docs/Web/CSS/Reference#index 
   
   Per esempio vogliamo far si che l'elemento selezionato (tramite il selettore CSS) abbia una larghezza massima di 1024px e che sia centrato:
   
   div#main-searchbar { max-width: 1024px; margin: auto; }
   
   
9. Quando il risultato ti soddisfa, copia le regole (tasto destro sul selettore CSS → Copy rule), e incollale nella sezione “CSS personalizzato” del booking engine. 
   Puoi anche incollarle momentaneamente nel tuo editor di testo, in questo modo potrai salvare più regole CSS e poi copiarle direttamente tutte nel campo CSS personalizzato una volta che avrai concluso le tue personalizzazioni. 

🧠 Best practice per la modifica CSS

• Identifica l’elemento giusto: usa gli strumenti di sviluppo per trovare l’ID o la classe dell’elemento.
• Non abusare di !important, usalo solo se strettamente necessario.
• Mobile-first: applica prima gli stili per mobile, poi usa media query per desktop.

• Commenta il tuo codice per renderlo più chiaro:

  /* Cambio colore al bottone di ricerca */
  #home-search-button {
    background-color: #ff5a5f;
    color: white;
  }
  

• Evita modifiche eccessivamente invasive che possono rompere la responsività o il layout di default.
• Controlla sempre su più dispositivi (desktop, tablet, mobile).

🧾 Lista completa degli ID disponibili nel tema del booking engine

Ecco tutti gli ID HTML attualmente presenti nel nostro booking engine. Puoi usarli nei tuoi selettori CSS per personalizzare sezioni specifiche:

🧪 Suggerimenti finali

• Dopo ogni modifica, ricarica la pagina e verifica che tutto funzioni correttamente.
• Se vuoi annullare una modifica, puoi semplicemente rimuovere o commentare la regola nel CSS personalizzato.

🎨 Hai bisogno di ispirazione?

Qui sotto trovi esempi CSS da cui trarre spunto per personalizzare il tuo booking engine. I primi sono presi da casi reali utilizzati da altri clienti, i secondi sono suggerimenti inventati ma utili, costruiti direttamente sugli ID disponibili nel sistema.

🧩 Esempi reali dai network esistenti

/* 1. Centra e limita la larghezza della barra di ricerca */
#main-searchbar {
  bottom: 3rem;
  max-width: 1344px;
  margin: auto;
}

/* 2. Centra il contenuto nella homepage */
.home-layout .hero-body {
  justify-content: center !important;
}

/* 3. Riduci padding nel footer */
.footer {
  padding: 0px;
}

/* 4. Aggiunge sfondo beige al footer quando visibile */
.has-desktop-home-search-bar .footer {
  padding-bottom: 8rem !important;
  background: #E1D4BB;
}

/* 5. Spazio intorno alla hero-foot */
.hero-foot.search-fixed {
  margin: 40px;
}

/* 6. Dimensioni fisse del logo nella navbar */
.navbar-brand img {
  height: 60px !important;
  max-height: 60px !important;
}

/* 7. Rimuove spaziature verticali nella navbar */
.navbar {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

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

/* 9. Versione alternativa del logo nella navbar */
.navbar-brand img {
  max-height: unset !important;
  height: 80px;
}

/* 10. Navbar più ampia e centrata */
.navbar {
  background-color: #fff !important;
  padding-left: 20vw !important;
  padding-right: 20vw !important;
}

/* 11. Sfondo trasparente nella hero */
.hero-body {
  background: none !important;
}

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

/* 13. Sfondo bianco uniforme */
body {
  background-color: white !important;
}

/* 14. Padding verticale delle sezioni principali */
.welcome-section, .card-section {
  padding-top: 120px;
}

/* 15. Sfondo bianco per la sezione welcome */
.welcome-section {
  background-color: white !important;
}

/* 16. Logo più alto */
#logo-img {
  max-height: 120px !important;
}

/* 17. Footer scuro con testo chiaro */
footer {
  background-color: #3a332e !important;
  color: #eeeeee;
}

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

🧪 Suggerimenti creativi basati sugli ID del tema

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

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

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

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

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

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

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

/* Personalizzazione per #book-steps-container */
#book-steps-container {
  margin-top: 2rem;
}

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

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

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

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

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

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

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

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

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

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

📘 Come applicare questi stili

1. Copia uno o più blocchi CSS da sopra.
2. Vai nella sezione CSS personalizzato nelle impostazioni del tuo booking engine.
3. Incolla il codice.
4. Salva e ricarica il sito per vederne subito l’effetto.