Customize Notifications Red Badge

Learn how to customize your notification center and menu notifications to display a custom badge.

Employee App
Staffbase Intranet

When new content is available, a red badge appears over the notification center and the menu items to alert users. In this tutorial, you will learn how to replace the red badge for the notification center and menu items using custom CSS.

The tutorial walks you through changing the badge to a festive Santa hat or a snow-themed badge to match the season.

On mobile devices, the custom badge is applied only to the notification center, not to menu items.

By the end of this tutorial, you’ll understand which CSS selectors control the badge and how to replace it with a custom badge of your choice to create a personalized, seasonal look.

Using custom CSS can result in undesired formatting or styling. Apply custom CSS only if you’re familiar with it, and always preview your app’s appearance after making changes.

  • You are an administrator in the Staffbase Studio.
  1. In the Studio, navigate to the Settings > App and Intranet.
    The App and Intranet Branding page opens.
  2. Under Custom CSS, click and hold Show Editor.
    The Custom CSS editor opens.
  3. In the editor, copy and paste the following CSS lines:

If there are other code snippets in the editor, paste this CSS after the existing code and do not modify the existing code.

/* SANTA HAT ============================= */
.desktop span.unread-count:before,
.desktop span.notifications__unseen-count:before,
.mobile .mobile-menu-header.bg-header-appintranet span.unread-count:before,
.mobile .mobile-menu-header.bg-header-appintranet span.notifications__unseen-count:before {
    content: "";
    width: 37px;
    height: 31px;
    background: url(https://cc-scripts.staffbase.com/graphics-asset/santa_hat.png) no-repeat top center;
    position: absolute;
    top: -10px;
    left: -7px;
    z-index: 5;
    display: block;
    background-size: 50%;
    opacity: 1;
}
/* SANTA HAT ===============================*/
  1. Click Preview to test your CSS customizations in both App and Intranet.
  2. Click Save.

You have customized the notification badge as a Santa hat.

  1. In the Studio, navigate to the Settings > App and Intranet.
    The App and Intranet Branding page opens.
  2. Under Custom CSS, click and hold Show Editor.
    The Custom CSS editor opens.
  3. In the editor, copy and paste the following CSS lines:

If there are other code snippets in the editor, paste this CSS after the existing code and do not modify the existing code.

/* SNOW CAP ============================= */
.desktop span.unread-count:before,
.desktop span.notifications__unseen-count:before,
.mobile .mobile-menu-header.bg-header-appintranet span.unread-count:before,
.mobile .mobile-menu-header.bg-header-appintranet span.notifications__unseen-count:before {
    content: "";
    width: 28px;
    height: 13px;
    background: url(https://cc-scripts.staffbase.com/graphics-asset/snow_cap.png) no-repeat top center;
    position: absolute;
    top: -6px;
    left: -4.5px;
    z-index: 5;
    display: block;
    background-size: 73%;
    opacity: 1;
}
/* SNOW CAP ============================= */
  1. Click Preview to test your CSS customizations in both App and Intranet.
  2. Click Save. You have customized the notification badge as a snow badge.