Anpassen des Erscheinungsbilds des Baza-Buchungskalenders mit CSS in WordPress

Das „Baza Booking Calendar“-Plugin 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

Der Baza-Buchungskalender verwendet benutzerdefinierte CSS-Eigenschaften (Variablen), die sein 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_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);
}

So überschreiben Sie die Stile des Plugins

Um das Erscheinungsbild des Baza-Buchungskalenders anzupassen, müssen Sie lediglich eine oder mehrere dieser Variablen in Ihrem Stylesheet neu definieren.
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;
}