By default, the option to change the design of the active status icon from a tiny green dot to something that surrounds the profile header will require custom work as this will change the look and functional aspect of the product.


You can use the following CSS code.


Please follow the steps below:


1. Go to BuddyBoss > Theme Options

2. Under Custom Codes, enable CSS

3. Append the following:



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;
}


4. Save changes.


Note: Any modifications are considered as custom work already. Know more about our Support policy here: https://www.buddyboss.com/support-policy/


Screenshots