> ## Documentation Index
> Fetch the complete documentation index at: https://docs.broadcast.events/llms.txt
> Use this file to discover all available pages before exploring further.

# Customize widget styles

> 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:

1. Click on manage custom files to upload the relevant OTT,WOFF or TTF font file.
2. Update the custom CSS to define the new font:

```
@font-face {font-family: YOUR-FONT-NAME;src: url()}
```

3. 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)
```

4. 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](https://support.squarespace.com/hc/en-us/articles/206545327-Changing-fonts).

<Info>
  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. 🤓
</Info>