Customize Notification Badges

Learn how to customize notification badges in your Staffbase Employee App and Intranet to match your company branding, campaigns, or seasonal themes.

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.

You can replace this badge with a custom design using CSS. In this guide, you will understand which CSS selectors control the badge and how to replace it with a custom design.

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

Custom badges can be:

  • Company event badge
    Highlight important company events such as annual meetings, product launches, or internal campaigns with an event icon or logo.

  • Awareness or celebration badge
    Support initiatives like International Women’s Day, Pride Month, or mental health campaigns with themed visuals.

  • Seasonal badge
    Reflect seasonal themes such as winter holidays, summer events, or regional festivals to create a timely and engaging experience.

  • Campaign or branding badge
    Strengthen internal branding during campaigns or initiatives by aligning badge visuals with your messaging.

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.

  • Use transparent PNG or SVG images.
  • Keep the badge small and readable to avoid UI overlap.
  • Test on both desktop and mobile views.
  • Adjust width, height, top, and left values to fine-tune positioning.
  • You are an administrator in the Staffbase Studio.
  • You have uploaded the custom badge image using the Media API or the File Manager, and you have its URL for it.
  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 is existing code, add your CSS after it without modifying existing snippets.

/* CUSTOM BADGE ============================= */
.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: 30px;
   height: 30px;
   background: url(YOUR_IMAGE_URL) no-repeat center;
   position: absolute;
   top: -8px;
   left: -6px;
   z-index: 5;
   display: block;
   background-size: contain;
}


/* CUSTOM BADGE ===============================*/
  1. Replace YOUR_IMAGE_URL with the URL of your custom badge image.
  2. Click Preview to test your CSS customizations in both App and Intranet.
  3. Click Save.