How to Change the Notification Side Edge Color

Introduction

The Notification side edge color in BuddyBoss does not have a built-in setting for customization. If you want to change the colored edge that appears on recent notifications to better match your site branding, you can apply a custom CSS snippet using Theme Options in BuddyBoss.

Custom Workaround

1. In your WordPress admin, go to BuddyBoss > Theme Options.
   
2. Under Custom Codes, toggle Enable CSS to On.
   
3. Paste the following CSS:
   

.bb-onscreen-notification-enable 

.bb-onscreen-notification 

.notification-list 

.read-item.recent-item:before {

  background: red;

}

You can replace red with any color value that matches your design.

4. Click Save Changes.
   

Note: Any custom code is considered custom work. Please review our Support Policy for more details.

Troubleshooting and FAQs

Q: The notification edge color did not change. What should I check

A:

• Clear your site cache, caching plugin, or CDN cache.
  
• Make sure the CSS was pasted exactly as shown with no missing brackets or semicolons.
  
• Confirm that Enable CSS was turned on before saving.
  

Q: Can I use a different color format

A: Yes. You can use hex, RGB, RGBA, or named colors. For example:

background: #1e73be;

Q: Will this affect old notifications as well

A: This styling applies to recent notification items only and does not affect older or already styled notifications.

Q: Who can I contact for further assistance

A: You can submit a support ticket through your BuddyBoss account dashboard for personalized help.