Widget CSS Override Reference Guides
Alerts Widget —
alerts_widget_css_overrides.pdfCalendar Widget —
calendar_widget_css_overrides.pdfGroups Widget —
groups_widget_css_overrides.pdfSignups Widget —
signups_widget_css_overrides.pdf
You can often change the appearance of the groups widget by adding CSS on your own website and targeting the classes already included in the widget HTML.
Note: This is a client-side workaround, not a guaranteed product feature. Results may vary depending on your template and widget configuration.
Before you start
To make changes safely and cleanly:
Start with the groups root class so your CSS only affects the widget.
Target the card, filter, or popup classes listed in this guide.
Test your changes on desktop and mobile after publishing them on your site.
Root class naming
The groups widget renders with these important root classes:
Class | Description |
| Widget-level wrapper |
| One specific widget instance |
| Template/layout classes |
Examples:
.dce-groups { } .dce_groups__12345678-abcd-1234-abcd-123456789abc { } .dce--mosaic { }Naming schema
Prefix | Targets |
| Widget-level wrappers, headers, filters, and modal blocks |
| One specific widget instance |
| Card and shared content blocks |
| Template and layout blocks |
Common targets
Useful classes that appear in the groups widget output:
.dce-groups--header .dce-groups--filters .dce-groups--filters-panel .dce--groups-cards .dce--groups-cards-card .dce--groups-card--cta-btn .dce-groups-modal--wrapper .dce-groups-modal--container .dce-groups-modal--header
Best practices
Use broad, readable selectors first to apply styles across all instances of a widget:
.dce-groups .dce--groups-cards-card { border-radius: 18px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08); } .dce-groups .dce--groups-card--cta-btn { text-transform: uppercase; }Target a specific widget instance using its UUID class when you only want to affect one widget:
.dce_groups__12345678-abcd-1234-abcd-123456789abc .dce-groups--filters-panel { background: #f6f1e8; }Notes
Group detail popups use
.dce-groups-modal--...classes and can be styled separately from the grid.Some styles are shared across templates, while others are template-specific.