Introduction
BuddyBoss does not offer a built-in option to modify the active status icon in the profile header. You can use a CSS snippet to change the tiny green dot into a larger indicator that surrounds the profile header avatar. This customization enhances the visibility of online status but involves modifying the look and layout of the profile header.
Custom Workaround
- In your WordPress admin, go to BuddyBoss > Theme Options
- Under Custom Codes, toggle Enable CSS to On
- Paste the following CSS:
body.bbp-user-page span.member-status.online {
width: 185px;
height: 185px;
z-index: 1;
right: -7px;
top: -7px;
}
body.bbp-user-page #buddypress #item-header-cover-image #item-header-avatar img.avatar {
z-index: 999;
position: inherit;
border: 0 !important;
}- Click Save Changes
Troubleshooting and FAQs
Q: The active status icon did not appear as expected, what should I check?
A: Ensure the CSS was pasted exactly as shown and that Enable CSS was turned on before saving. Clear your site cache or CDN cache if changes do not appear
Q: Can I adjust the size or position of the icon?
A: Yes. Modify the width, height, top, or right values in the CSS to fit your design preference
Q: Will this affect other profile elements?
A: The CSS targets the profile header active status and avatar only, so other elements should remain unaffectedQ: Who can I contact for further assistance?
A: Submit a support ticket through your BuddyBoss account dashboard for personalized help.
