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">
{
  "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.

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

👇