Prispôsobenie vzhľadu rezervačného kalendára Baza pomocou CSS v systéme WordPress

Plugin Baza Booking Calendar je navrhnutý tak, aby sa bezproblémovo integroval do akejkoľvek šablóny WordPressu.
Jeho vzhľad – farby, typografiu, rozostupy a dokonca aj animácie – môžete ľahko prispôsobiť pomocou jednoduchých pravidiel CSS. Vďaka tomu máte plnú kontrolu nad dizajnom, pričom plugin zostáva ľahký a flexibilný.

Používanie premenných CSS

Baza Booking Calendar využíva vlastné vlastnosti CSS (premenné), ktoré definujú jeho predvolený dizajn.
Tieto premenné sú deklarované pod globálnym selektorom :root, čo znamená, že ich môžete prepisovať kdekoľvek vo vašej šablóne alebo vo vlastnom súbore CSS bez toho, aby ste zasahovali do základného kódu pluginu.

Predvolená sada premenných

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

Ako prepisovať štýly pluginu

Ak chcete zmeniť vzhľad kalendára rezervácií Baza, stačí v štýlovom hárku predefiniovať jednu alebo viaceré z týchto premenných.
Plugin nemusíte upravovať – stačí prepisovať premenné vo vašej šablóne.

Napríklad

Ak chcete zmeniť farbu hlavného zvýraznenia a polomer ohraničenia:

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