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

# How to add custom CSS to notifications

> Override default styles with your own CSS for full design control.

You can add custom CSS to any notification to match your hotel's branding or adjust the design beyond the built-in options.

## Steps

1. Open your notification settings
2. Scroll to the **Custom CSS** section
3. Add your CSS rules
4. Save and preview

## Examples

Change the button color:

```css theme={null}
.tinybell-button {
    background-color: #1a1a2e;
    border-radius: 25px;
}
```

Change the font:

```css theme={null}
.tinybell-notification {
    font-family: 'Georgia', serif;
}
```

Make the notification wider:

```css theme={null}
.tinybell-modal {
    max-width: 600px;
}
```

<Warning>
  Custom CSS overrides TinyBell's default styles. Test your changes on both desktop and mobile before going live.
</Warning>