Introduction
BuddyBoss does not provide a built-in option to change the on-screen notification image. You can easily customize the notification background image and adjust text colors using a small CSS snippet. This allows you to match your notifications to your branding or visual preference, controlling the On-Screen Notification Image effectively.
Custom Workaround
- In your WordPress admin, go to BuddyBoss > Theme Options
- Under Custom Codes, toggle Enable CSS to On
- Paste the following CSS:
/* Adding a background image */
.bb-onscreen-notification-enable .bb-onscreen-notification .notification-list .read-item,
.bb-onscreen-notification-enable .bb-onscreen-notification .notification-list .read-item:hover {
background-image: url('https://picsum.photos/200.jpg');
}
/* Changing the color according to the background */
.notification-content a,
.notification-list.bb-nouveau-list .actions a {
color: white;
}- Click Save Changes
Any custom code is considered “custom work.” Please review our Support Policy for more details.
Troubleshooting and FAQs
Q: The background image didn’t appear, what should I check?
A: Ensure the image URL is correct and publicly accessible. Clear your site cache, caching plugin, or CDN cache. Confirm that Enable CSS was turned on before saving
Q: Can I use a different image or color?
A: Yes. Replace the URL in the CSS with your preferred image. You can also change the text color in the second block to match your background
Q: Will this affect other notifications?
A: This CSS targets only the on-screen notification elements defined in the snippet
Q: Who can I contact for further assistance?
A: Submit a support ticket through your BuddyBoss account dashboard for personalized help.
