CSS Customization
Customize the booking flow appearance with CSS
The CR Bee Connect plugin uses a namespaced CSS system with CSS custom properties for easy customization.
CSS Namespace
All plugin elements use the .cr-bee CSS class namespace. This prevents conflicts with your theme's styles.
/* All plugin elements are inside .cr-bee */
.cr-bee .crbc-card { ... }
.cr-bee .crbc-btn { ... }
.cr-bee .crbc-input { ... }CSS Custom Properties
The plugin injects CSS custom properties from your CR Bee tenant settings. You can override these in your theme:
.cr-bee {
/* Colors */
--crbc-brand-color: #2563eb;
--crbc-accent-color: #f59e0b;
--crbc-accent-text: #ffffff;
--crbc-accent-hover: #d97706;
/* Buttons */
--crbc-btn-hover-color: #1d4ed8;
--crbc-btn-text-color: #ffffff;
--crbc-btn-text-hover: #ffffff;
--crbc-btn-border-width: 0px;
--crbc-btn-border-color: transparent;
/* Cards */
--crbc-card-border-width: 1px;
--crbc-card-border-color: #e5e7eb;
/* Inputs */
--crbc-input-border-width: 1px;
--crbc-input-border-color: #d1d5db;
/* Typography */
--crbc-font-family: 'Inter', sans-serif;
--crbc-border-radius: 8px;
/* Shadows */
--crbc-shadow-color: #000000;
--crbc-shadow-style: 0 1px 3px rgba(0,0,0,0.1);
}Overriding Styles
To customize the appearance in your theme, add CSS rules targeting .cr-bee elements:
/* In your theme's style.css or customizer */
/* Change the primary button color */
.cr-bee .crbc-btn-primary {
--crbc-brand-color: #059669;
}
/* Increase card padding */
.cr-bee .crbc-card {
padding: 24px;
}
/* Custom font size for vehicle names */
.cr-bee .crbc-car-name {
font-size: 1.25rem;
}Mobile Considerations
The plugin enforces a minimum font size of 16px on mobile for interactive elements (select, input, textarea). This prevents iOS Safari from auto-zooming when focusing form fields.
@media (max-width: 767px) {
.cr-bee select,
.cr-bee input,
.cr-bee textarea {
font-size: 16px;
}
}Do not override this to a smaller size — it will cause zoom issues on iOS.
Safe Overrides
When customizing, follow these guidelines:
- Always scope your selectors under
.cr-bee - Use CSS custom properties when possible (they're designed to be overridden)
- Avoid
!importantunless necessary for specificity battles - Test on mobile devices, especially iOS Safari