Налаштування зовнішнього вигляду календаря бронювання Baza за допомогою CSS у WordPress

Плагін «Baza Booking Calendar» розроблений так, щоб безпроблемно інтегруватися в будь-яку тему WordPress.
Ви можете легко налаштувати його зовнішній вигляд – кольори, шрифти, інтервали та навіть анімації – за допомогою простих правил CSS. Це забезпечує вам повний контроль над дизайном, зберігаючи при цьому компактність і гнучкість плагіна.

Використання змінних CSS

Календар бронювання Baza використовує власні властивості CSS (змінні), які визначають його дизайн за замовчуванням.
Ці змінні оголошені в глобальному селекторі :root, а це означає, що ви можете перезаписати їх у будь-якому місці вашої теми або у власному файлі CSS, не втручаючись у основний код плагіна.

Набір змінних за замовчуванням

:root {
    --bbc_color: #FFE050;
    --bbc_color_primary: #111111;
    --bbc_color_secondary: #ffffff;
    --bbc_cubic_bezier: cubic-bezier(0.1, 0.6, 0, 1);
    --bbc_color_disabled: color-mix(in srgb, var(--bbc_color_primary) 12%, transparent);
    --bbc_color_loading: #111111;
    --bbc_color_loading_bg: color-mix(in srgb, var(--bbc_color_secondary) 10%, transparent);
    --bbc_color_bg_time_choise: #111111;
    --bbc_color_time_choise: #ffffff;
    --bbc_color_bg_time_hover: #111111;
    --bbc_color_time_hover: #ffffff;
    --bbc_color_bg_time_booked_choise: color-mix(in srgb, var(--bbc_color_primary) 8%, transparent);
    --bbc_color_bg_order_info: color-mix(in srgb, var(--bbc_color_primary) 8%, transparent);
    --bbc_color_time_booked_choise: #111111;
    --bbc_color_choise: color-mix(in srgb, var(--bbc_color_primary) 12%, transparent);
    --bbc_color_error: #ec5353;
    --bbc_color_success: #50C878;
    --bbc_color_danger: #FF6B6B;
    --bbc_wrapper_background: transparent;
    --bbc_form_background: transparent;
    --bbc_form_field_background: transparent;
    --bbc_notification_background: #111111;
    --bbc_notification_border: #111111;
    --bbc_notification_color: #ffffff;
    --bbc_scrollbar_track_color: color-mix(in srgb, var(--bbc_color_primary) 8%, transparent);
    --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_font_size_xs: 11px;
    --bbc_gap: 25px;
    --bbc_spacing: 25px;
    --bbc_padding: 30px;
    --bbc_field_padding: 12px;
    --bbc_field_height: 40px;
    --bbc_field_height_inner: 38px;
    --bbc_field_width: 40px;
    --bbc_field_width_inner: 38px;
    --bbc_bounce_color_primary: var(--bbc_color_primary);
    --bbc_bounce_color_secondary: var(--bbc_color_secondary);
}

Як замінити стилі плагіна

Щоб змінити зовнішній вигляд календаря бронювання Baza, просто перезадайте одну або кілька з цих змінних у вашому стильовому файлі.
Вам не потрібно вносити зміни в сам плагін – просто перезадайте ці змінні у вашій темі.

Наприклад

Щоб змінити основний колір акценту та радіус облямівки:

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