Style and Color Customization

The first thing many users want to do after setting up the plugin is adjust the colors of the booking form to match their website theme. Fortunately, Simple BnB uses CSS variables for all main colors, so there’s no need to edit the plugin files.

---

1. How it works

All main frontend colors and backgrounds are managed through CSS variables defined in the plugin’s main stylesheet.

Example (simplified):

: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;
}

Each component in the booking form uses these variables:

• --simpbnb-accent → main accent color (buttons, highlights)
• --simpbnb-accent-contrast → text color on accent background
• --simpbnb-bg / --simpbnb-bg-secondary → background colors
• --simpbnb-border → borders of cards and boxes
• --simpbnb-text / --simpbnb-text-muted → main and secondary text
• --simpbnb-focus → focus outline color
• --simpbnb-text-success → success message text color

---

2. How to customize colors

You can redefine the variables in your theme or inside WordPress’ Additional CSS section. All form elements will automatically adopt the new colors without modifying any plugin file.

Basic example:

: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);
}

All instances of the module will update the colors automatically, without the need to modify plugin files.

---

3. Apply changes only to the booking module

If you want the new colors to apply only to the plugin (without affecting the rest of your site), you can redefine the variables within its container .simpbnb-wrap. This is the safest approach when using a theme with strong global styling.

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

This is the safest way if your theme uses many classes or global rules.

---

4. When to use !important

Normally, you don’t need it. It’s only useful if your theme overrides colors with very specific or high-priority rules. Use it as a last resort, not as a standard practice.

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

But it should be the exception, not the rule.

---

5. Customizing the calendar (flatpickr)

The date picker for check-in / check-out fields uses some fixed colors. To make it match your theme, you can override its colors directly.

.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);
}

Special classes are available for different states:

• .simpbnb-day--blackout → blocked dates (light red)
• .simpbnb-day--unavailable → unavailable dates (light orange)

You can customize them freely to match your accent colors.

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

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

---

6. Status messages and summaries

Some blocks, such as confirmation or error messages, use fixed colors to ensure contrast and readability. You can change them, but it’s recommended to keep accessible color combinations.

Example:

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

---

7. Dark theme (dark mode)

You can redefine the variables contextually, depending on where the form is placed. For example, if the booking module appears on a dark background, you can override the variables inside a specific container to achieve a better contrast.

.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. Summary

• Don’t modify plugin files.
• Use the CSS variables --simpbnb-* to change colors.
• Apply them to .simpbnb-wrap to target only the booking form.
• Avoid using !important unless absolutely necessary.
• For the date picker, add dedicated color rules.

💡 Tip: If changes don’t appear right away, clear your browser cache and make sure your CSS is loaded after the plugin’s stylesheet.