Customizing the Appearance of Baza Booking Calendar with CSS in WordPress

The Baza Booking Calendar plugin is designed to fit seamlessly into any WordPress theme.
You can easily adjust its look and feel — colors, typography, spacing, and even animations — using simple CSS rules. This gives you full control over the design while keeping the plugin lightweight and flexible.

Using CSS Variables

Baza Booking Calendar uses CSS custom properties (variables) that define its default design.
These variables are declared under the global :root selector, which means you can override them anywhere in your theme or custom CSS file without touching the plugin’s core code.

Default set of variables

:root {
    --bbc_color: #FFE050;
    --bbc_secondary_color: #1d2327;
    --bbc_font: system-ui, "Segoe UI", Roboto, sans-serif;
    --bbc_focus_shadow: 0 0 0 5px var(--bbc_color);
    --bbc_cubic_bezier: cubic-bezier(0.1, 0.6, 0, 1);
    --bbc_color_primary: #000;
    --bbc_color_secondary: #fff;
    --bbc_color_loading: #000;
    --bbc_color_loading_bg: rgba(255, 255, 255, 0.85);
    --bbc_color_bg_time_choise: #000;
    --bbc_color_time_choise: #fff;
    --bbc_color_bg_time_hover: #000;
    --bbc_color_time_hover: #fff;
    --bbc_color_bg_time_booked_choise: color-mix(in srgb, var(--bbc_color_primary) 8%, transparent);
    --bbc_color_bg_order_info: #00000012;
    --bbc_color_time_booked_choise: #000;
    --bbc_color_choise: #00000012;
    --bbc_color_error: #ec5353;
    --bbc_color_success: #50C878;
    --bbc_border_radius: 5px;
    --bbc_checkbox_border_radius: 5px;
    --bbc_button_border_radius: 5px;
    --bbc_font_size_xl: 30px;
    --bbc_font_size_l: 18px;
    --bbc_font_size_m: 15px;
    --bbc_font_size_s: 13px;
    --bbc_left_padding: 80px;
    --bbc_gap: 25px;
    --bbc_padding: 30px;
    --bbc_pending_color: #FFE050;
    --bbc_booked_color: #50C878;
    --bbc_reject_color: #FF6B6B;
    --bbc_completed_color: #b6cfce;
    --bbc_expired_color: #95A5A6;
}

How to Override the Plugin’s Styles

To change the appearance of Baza Booking Calendar, simply redefine one or more of these variables in your own stylesheet.
You don’t need to modify the plugin — just override the variables in your theme.

For example

To change the main accent color and border radius:

:root {
    --bbc_color: #0073e6;
    --bbc_border_radius: 10px;
}