Dostosowywanie wyglądu kalendarza rezerwacji Baza za pomocą CSS w WordPressie

Wtyczka Baza Booking Calendar została zaprojektowana tak, aby płynnie integrować się z dowolnym motywem WordPressa.
Możesz z łatwością dostosować jej wygląd – kolory, typografię, odstępy, a nawet animacje – za pomocą prostych reguł CSS. Zapewnia to pełną kontrolę nad wyglądem, a jednocześnie sprawia, że wtyczka pozostaje lekka i elastyczna.

Korzystanie ze zmiennych CSS

Kalendarz rezerwacji Baza wykorzystuje niestandardowe właściwości CSS (zmienne), które określają jego domyślny wygląd.
Zmienne te są zadeklarowane w ramach globalnego selektora :root, co oznacza, że można je nadpisać w dowolnym miejscu motywu lub niestandardowego pliku CSS bez ingerencji w kod podstawowy wtyczki.

Domyślny zestaw zmiennych

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

Jak nadpisać style wtyczki

Aby zmienić wygląd kalendarza rezerwacji Baza, wystarczy zmienić wartości jednej lub kilku z tych zmiennych w arkuszu stylów.
Nie trzeba modyfikować wtyczki – wystarczy nadpisać te zmienne w swoim motywie.

Na przykład

Aby zmienić główny kolor akcentujący i promień zaokrąglenia krawędzi:

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