📖 Schedule & Widget | Stage 2
  1. Help Center
  2. I am an Event Organizer
  3. 📖 Schedule & Widget | Stage 2

Schedule & Widget: Customize the schedule widget

Learn how to customize the schedule widget’s styling through CSS.

You can customize the way the Brella widget looks on your webpage using CSS:

👉 To customize the colors of the tags, days and locations in the filters: 

#brella-widget .schedule-filters-tag {
background-color: blueviolet !important;
color: yellow;
👉 To remove the white space in the agenda widget, from the content session to the filters:
#brella-widget {
  max-width: 820px;
  margin: 0 auto;
#brella-widget .schedule-slot-name {
   font-size: large;
👉 To make the filters 'sticky' when attendees  scroll the agenda, add this:
<script type="text/props">
  "stickyFilter" : "true"

👉 If you want the sticky filter, you need to add this to the widget code (comma separated).

"stickyFilter" : "true"

⚡ NOTE: If you have some sticky elements themselves, the filter might get stuck underneath them and become unusable. Please check the edits you make to make sure they work.

👉 If you want to remove the Day's filter section, you need to add this to the widget code (comma separated).

.schedule-filters-filter-group:first-child {
display: none;

Last updated - July 2022. 

Written by Natasha Santiago. 


If you didn't find an answer to your questions, please get in touch with the Support Team here.