📖 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 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">
{
"joinCode": "EVENT JOINCODE HERE",
  "stickyFilter" : "true"
  }
</script>

👉 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. 

natasha-rounded

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

👇