📝 Note on Specificity: To ensure your custom styles are applied over the default widget styles, you may need to use the !important rule, as seen in the examples below. This increases the priority of your declarations.
You may also wish to create specific css files for specific widgets, so that you are targeting just what is needed per widget e.g login and profile will have more specific css classes to target that say, schedule.
Customization Classes Overview
Below is a table listing the available classes, their function, and examples of what you can customize.
CSS Class | Function/Element Controlled | Example Customization |
| The main container for the entire widget content (e.g., the area that holds all the forms, text, and other elements). |
|
| The background layer specifically for the login/initial screen of the profile widget. |
|
| All interactive buttons within the widget (e.g., 'Submit', 'Book Now', 'Sign In'). |
|
| A container for individual sessions or listings (often used in calendar or schedule views). |
|
| A container for location/venue information in a calendar or schedule view.. |
|
| A container for age group selection/information in a calendar or schedule view.. |
|
| Used to highlight the currently selected day in a calendar or schedule view. |
|
| An individual item within a profile/account navigation menu. |
|
| The active/selected item within a profile/account navigation menu. |
|
⚙️ Core Styling Examples
You can use the following patterns to apply your own branding.
1. Main Wrapper and Background
Use these to control the overall widget appearance and the login screen background.
CSS
/* Customizes the main wrapper's background and padding */
.clava-wrapper {
background-color: #f5f8f3 !important; /* Light off-white background */
padding: 20px !important;
}
/* Removes default background image and sets a solid color for the login screen */
.clava-login-bg {
background-image: none !important;
background-color: #f5f8f3 !important;
}
2. Typography
You can target specific elements using the wrapper class to control text styles consistently.
CSS
/* Headers (H1, H2, H3) within the widget */
.clava-wrapper h1, .clava-wrapper h2, .clava-wrapper h3 {
color: #336699 !important; /* Dark blue heading color */
font-family: "Georgia", serif !important;
}
/* Normal text, paragraphs, and labels */
.clava-wrapper p, .clava-wrapper span, .clava-wrapper label {
color: #336699 !important; /* Dark blue body text color */
font-size: 1rem !important;
}
3. Buttons (.clava-btn)
Buttons are critical for user interaction. You can change their color, shape, and typography.
CSS
/* Base button styles */
.clava-btn {
background-color: #ffd200 !important; /* Yellow background */
border-color: #ffd200 !important;
border-width: 0 !important;
border-radius: 100px !important; /* Rounded corners */
color: #1d1d1b !important; /* Dark text */
font-family: "Fjalla One", sans-serif !important;
text-transform: uppercase !important;
}
/* Button hover state for visual feedback */
.clava-btn:hover {
background-color: #e6b800 !important; /* Slightly darker yellow on hover */
color: #ffffff !important;
}
4. Interactive & State-Specific Elements
These classes are key for highlighting selected items or cards.
CSS
/* Styles for an individual session card */
.clava-session-card {
border: 1px solid #ccc !important;
box-shadow: 2px 2px 5px rgba(0,0,0,0.1) !important;
}
/* Highlights the currently selected day in a schedule view */
.clava-day-active {
background-color: red !important;
color: white !important;
font-weight: bold !important;
}
/* Styles for profile navigation links (non-active) */
.clava-profile-nav-item {
background-color: #f0f0f0 !important;
color: #000 !important;
}
/* Styles for the CURRENTLY selected profile navigation link */
.clava-profile-nav-active {
background-color: #ffd200 !important;
color: #fff !important;
}
Complete example below:
/* Remove background image and change background colour */
.clava-login-bg {
background-image: none !important;
background-color: #f5f8f3 !important;
}
/* buttons */
.clava-btn {
background-color: #ffd200 !important;
border-color: #ffd200 !important;
border-width: 0 !important;
border-radius: 100px !important;
color: #1d1d1b !important;
font-family: "Fjalla One", sans-serif !important;
font-size: 0.9rem !important;
font-weight: 400 !important;
letter-spacing: 0.07em !important;
text-transform: uppercase !important;
}
.clava-btn:hover {
background-color: #ffd200 !important;
color: #ffffff !important;
}
/* main content from the widget */
.clava-wrapper {
background-color: #f5f8f3 !important;
}
/* Headers within the widget wrapper */
.clava-wrapper h1, .clava-wrapper h2, .clava-wrapper h3 {
color: #336699 !important;
}
/* Normal text/paragraphs */
.clava-wrapper p, .clava-wrapper span, .clava-wrapper label {
color: #336699 !important;
}
.clava-day-active {
background-color: red !important;
}
.clava-profile-nav-item { background-color: #ffd200 !important; color: #000 !important; }
.clava-profile-nav-active { background-color: #ffd200 !important; color: #fff !important; }
Finally, when you are ready, upload you .css file to your webhosting or github and the add the URL to the widget field called Stylesheet URL.