Custom CSS
If the default configuration options aren't enough for you, then you can use custom css to override the default settings rendered by your widget by targeting the id selector for specific elements.
Available IDs
The following ID selectors are available to override:
| id | description |
|---|---|
| bc-widget-wrapper | Outer wrapper |
| bc-widget-event-venue | The name of the venue |
| bc-widget-event-date | The event date |
| bc-widget-event-name | Name of the event |
| bc-widget-event-tags | Tags for the event |
| bc-widget-event-daily-container | Wrapper for the desk calendar style date (optional) |
| bc-widget-event-daily-container-day | The day of the event as a number |
| bc-widget-event-daily-container-month | The month of the event as a 3 character stub |
| bc-widget-fallback-text | Text display when using the data-fallback-text attribute |
Example
Here is a practical example implementation for a Squarespace site, where we override the default font provided by the widget, and instead use one of the default Squarespace fonts.
Navigate to Home / Design / Custom CSS and in the text area and add the following CSS:
#bc-widget-event-name {
font-family: HalyardDisplay !important;
text-transform: uppercase
}
Here we are targeting the bc-widget-event-name id selector and overriding font-family to use an alternative font included by Squarespace.
If you then wanted to add you own font, you could do the following:
- Click on manage custom files to upload the relevant OTT,WOFF or TTF font file.
- Update the custom CSS to define the new font:
@font-face {
font-family: YOUR-FONT-NAME;
src: url()
}
- Click between the brackets in the
url()line, and you should be able to select your upload font file location from a list. The result will look something like this:
url(https://static1.squarespace.com/static/635fc13e5sjerteeryrdf12302ef911/t/63724e8zxc3453vcz42d6/166846854354591/YOUR-FONT-NAME.otf)
- Save and exit, and you should now see your custom font in the widget.
For more information about custom fonts in Squarespace have a read of their docs here.
This example is specific to Squarespace, but the CSS principles are the same for most scenarios. Let us know if you are having problems getting this working on another platform. 🤓