Personalizzazione di stili e colori

La prima cosa che molti utenti vogliono fare dopo aver configurato il plugin è adattare i colori del modulo di prenotazione al proprio tema. Fortunatamente, Simple b&b Rental utilizza variabili CSS per tutti i colori principali, quindi non è necessario modificare i file del plugin.

1. Come funziona

Tutti i colori e gli sfondi principali del frontend sono gestiti tramite variabili CSS dichiarate nel tema principale del plugin.

Esempio (semplificato):

:root {
  --simpbnb-text: #111827;
  --simpbnb-text-muted: #374151;
  --simpbnb-border: #d1d5db;
  --simpbnb-bg: #ffffff;
  --simpbnb-bg-secondary: #eeeeee;
  --simpbnb-accent: #FF8E3F;
  --simpbnb-accent-contrast: #ffffff;
  --simpbnb-focus: rgba(37, 99, 235, .35);
  --simpbnb-text-success: #0e832e;
}

Ogni componente del modulo utilizza queste variabili:

--simpbnb-accent → colore principale dei pulsanti
--simpbnb-accent-contrast → colore del testo nei pulsanti
--simpbnb-bg / --simpbnb-bg-secondary → sfondi del modulo
--simpbnb-border → bordi di card e box
--simpbnb-text / --simpbnb-text-muted → testi principali e secondari
--simpbnb-focus → effetto contorno al focus
--simpbnb-text-success → testi di successo (es. conferme pagamento)

2. Come personalizzare i colori

Puoi ridefinire le variabili nel tuo tema o nel CSS aggiuntivo di WordPress.

Esempio base:

:root {
  --simpbnb-accent: #1d4ed8;
  --simpbnb-accent-contrast: #ffffff;
  --simpbnb-bg: #ffffff;
  --simpbnb-bg-secondary: #f3f4f6;
  --simpbnb-border: #d1d5db;
  --simpbnb-text: #111827;
  --simpbnb-text-muted: #4b5563;
  --simpbnb-focus: rgba(29, 78, 216, 0.35);
}

Tutte le istanze del modulo aggiorneranno i colori automaticamente, senza bisogno di modificare file del plugin.

3. Applicare le modifiche solo al modulo di prenotazione

Se vuoi che le modifiche si applichino solo al plugin (senza alterare altri elementi del sito), puoi ridefinire le variabili dentro il suo contenitore:

.simpbnb-wrap {
  --simpbnb-accent: #0d9488;
  --simpbnb-accent-contrast: #ffffff;
  --simpbnb-border: #d1d5db;
}

Questo è il modo più sicuro se il tuo tema usa molte classi o regole globali.

4. Quando usare `!important`

In generale non serve. Può essere utile solo se il tema sovrascrive i colori con regole molto specifiche o caricate dopo. In tal caso, puoi intervenire con una regola più precisa:

.simpbnb-wrap .simpbnb-book-btn {
  background: var(--simpbnb-accent) !important;
}

Ma dovrebbe essere l’eccezione, non la regola.

5. Personalizzare il calendario (flatpickr)

Il calendario dei campi check-in / check-out utilizza in parte colori fissi. Per uniformarlo al resto del modulo puoi aggiungere:

.flatpickr-day.selected {
  background: var(--simpbnb-accent) !important;
  border-color: var(--simpbnb-accent) !important;
  color: var(--simpbnb-accent-contrast) !important;
}

.flatpickr-day:hover {
  background: rgba(13, 148, 136, 0.12);
}

Colori speciali usati per stati particolari:

.simpbnb-day--blackout → date bloccate (rosso chiaro)
.simpbnb-day--unavailable → date non disponibili (arancio chiaro)

Puoi personalizzarli così:

.flatpickr-day.simpbnb-day--blackout {
  background: #fde2e2 !important;
  color: #991b1b !important;
}

.flatpickr-day.simpbnb-day--unavailable {
  background: #fff7ed !important;
  color: #9a3412 !important;
}

6. Messaggi di stato e riepiloghi

Alcuni riquadri (come i messaggi di conferma o errore) usano colori fissi per garantire contrasto e leggibilità. È possibile personalizzarli, ma si consiglia di mantenere colori accessibili.

Esempio:

.simpbnb-notice-inner.is-success {
  background: #e6fffa;
  border-color: #2dd4bf;
  color: #065f46;
}

7. Tema scuro (dark mode)

Puoi ridefinire le variabili in base al contesto o al tema visivo. Ad esempio, per un modulo su sfondo scuro:

.hero-dark .simpbnb-wrap {
  --simpbnb-bg: rgba(15, 23, 42, 0.4);
  --simpbnb-border: rgba(148, 163, 184, 0.3);
  --simpbnb-muted: #e2e8f0;
  --simpbnb-accent: #38bdf8;
  --simpbnb-accent-contrast: #ffffff;
  --simpbnb-radius: 16px;
}

8. In sintesi

Non modificare i file del plugin.
Usa le variabili CSS --simpbnb-* nel tuo CSS.
Se vuoi limitare i cambiamenti, applicale a .simpbnb-wrap.
Evita !important salvo casi estremi.
Per il calendario, aggiungi alcune regole dedicate.

💡 Consiglio: se non vedi subito il cambiamento, svuota la cache del browser e assicurati che il tuo CSS venga caricato dopo quello del plugin.