Styling the component

You may want to change the style of the Notification Component to match your own website design & colours. For this reason we provide a list of CSS variables that you can override in order to change some design elements of the component.

Easier option available

You can now update the appearance of the component directly from your Belltastic dashboard.

Go to the "Appearance" page in Belltastic to see the options available.

CSS Variables

You can provide a CSS variable with a custom value, like so:

<!-- the <style> tag with variables can be
     provided either above or below the component -->
<style>
    /* Apply the variables to the component tag... */
    belltastic-notifications {
        --brand-color: #9f122e;
    }
    
    /* ... or its ID if provided */
    #belltastic {
        --brand-color: #9f122e;
    }
</style>
<belltastic-notifications id="belltastic" ... ></belltastic-notifications>

Multiple Notification Components

If you have multiple Notification Components, you can apply different styles to each by giving them unique IDs and providing the CSS variables to the respective IDs.

<style>
    #first-bell {
        --brand-color: #9f122e;
    }

    #second-bell {
        --brand-color: #0d7e0d;
    }
</style>

<belltastic-notifications id="first-bell" ...></belltastic-notifications>
<belltastic-notifications id="second-bell" ...></belltastic-notifications>

Available CSS Variables (Reference)

Here's a list of available CSS variables, along with their default values:

.belltastic {
    --brand-color: #6246ea;
    --bg-color: #FFFFFF;
    
    --text-color: #111827;
    --text-color-light: #314268;
    --text-color-lighter: #808080;
    --text-color-lightest: #959595;
    
    /* 
     * By default, the notification component will scale with your website
     * automatically. But if you wish to increase or decrease the scale of
     * the component, just override this --font-size variable:
     */
    --font-size: 1rem;
    --font-family: inherit;
    
    /* Bell button */
    --bell-color: var(--text-color-lightest, #98aad2);
    --bell-color-hover: var(--text-color-lighter, #5170b3);
    --bell-outline-color: var(--brand-color, #281A7B);
    --bell-badge-bg: #DC2638;
    --bell-badge-color: #FFFFFF;
    --bell-badge-font-size: 0.75em;
    --bell-badge-height: 1.5em;
    
    /* Notifications drawer/container */
    --container-width: 496px;
    --container-height: 480px;
    --container-height-mobile: var(--container-height, 480px);
    --container-min-height: 208px;
    --container-min-height-mobile: var(--container-min-height, 208px);
    --container-max-height: 65vh;
    --container-max-height-mobile: var(--container-max-height, 65vh);
    --container-border-radius: 0.375em;
    
    /* Top & Bottom Bars */
    --navbar-bg-color: var(--brand-color, #281A7B);
    --navbar-text-color: #ECEDFF;
    --navbar-text-hover-color: var(--text-color-lightest, #98aad2);
    
    /* Single notification item */
    --notification-icon-color: var(--text-color-lighter, #808080);
    --notification-title-color: var(--text-color, #111827);
    --notification-body-color: var(--text-color-light, #30446e);
    --notification-timestamp-color: var(--text-color-lighter, #5170b3);
    --notification-border-color: #ecedff;
    --notification-bg: var(--bg-color, 'inherit');
    --notification-hover-bg: #f1effc;
    --unread-notification-bg: #f8f7fd;
    --unread-notification-hover-bg: #e6e2f9;
    
    /* Action buttons */
    --action-button-color: var(--text-color-lightest, #959595);
    --action-button-color-hover: var(--text-color-lighter, #808080);
    --action-button-spacing: 0.5em;
    
    /* Other */
    --bell-focus-ring-color: var(--brand-color, #281A7B);
}

Overriding certain parts of the component

In addition to providing custom CSS variables, you can also utilise slots to override some parts of the component's HTML. Here are a few examples:

Custom button

Provide a custom image, an icon, or text for the toggle button:

<belltastic-notifications ...>
    <!-- This "slot" directive tells which part -->
    <!-- of the component you want to override -->
    <img slot="button"
         src="https://your-website.test/notification-icon.png"
         style="height: 20px; width: 20px;" />
</belltastic-notifications>

Empty state

Provide the contents of the container when there are no notifications to display:

<belltastic-notifications ...>
    <!-- This "slot" directive tells which part -->
    <!-- of the component you want to override -->
    <div slot="empty-state">
        <p>You have no notifications at the moment!</p>
    </div>
</belltastic-notifications>

Loading state

Provide the contents of the message that's displayed when loading more notifications:

<belltastic-notifications ...>
    <!-- This "slot" directive tells which part -->
    <!-- of the component you want to override -->
    <div slot="loading-state">
        <p>Loading more notifications...</p>
    </div>
</belltastic-notifications>

End of notifications

Povide the contents of the message that's displayed when there are no more notifications to load:

<belltastic-notifications ...>
    <!-- This "slot" directive tells which part -->
    <!-- of the component you want to override -->
    <div slot="end-of-list">
        <p>You've reached the end of your notifications!</p>
    </div>
</belltastic-notifications>