Anpassen des Erscheinungsbilds von Baza Booking Calendar mit CSS in WordPress

Das Plugin „Baza Booking Calendar“ ist so konzipiert, dass es sich nahtlos in jedes WordPress-Theme einfügt.
Sie können das Erscheinungsbild – Farben, Schriftart, Abstände und sogar Animationen – ganz einfach mithilfe einfacher CSS-Regeln anpassen. So haben Sie die volle Kontrolle über das Design, während das Plugin gleichzeitig schlank und flexibel bleibt.

Verwendung von CSS-Variablen

Baza Booking Calendar verwendet benutzerdefinierte CSS-Eigenschaften (Variablen), die das Standarddesign festlegen.
Diese Variablen werden unter dem globalen Selektor :root deklariert, was bedeutet, dass Sie sie an beliebiger Stelle in Ihrem Theme oder Ihrer benutzerdefinierten CSS-Datei überschreiben können, ohne den Kerncode des Plugins zu verändern.

Standard-Variablensatz

: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_width: 40px;
    --bbc_bounce_color_primary: var(--bbc_color_primary);
    --bbc_bounce_color_secondary: var(--bbc_color_secondary);
}

So überschreiben Sie die Stile des Plugins

Um das Erscheinungsbild von Baza Booking Calendar zu ändern, definieren Sie einfach eine oder mehrere dieser Variablen in Ihrem Stylesheet neu.
Sie müssen das Plugin nicht ändern – überschreiben Sie einfach die Variablen in Ihrem Theme.

Zum Beispiel

So ändern Sie die Hauptakzentfarbe und den Randradius:

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