How to Add Top Padding and Make Cover Image Round Corners in Groups

Introduction


By default, BuddyBoss does not provide an option to add top padding and rounded corners to group cover images. Using a simple CSS snippet, you can create spacing above the cover image and apply top-rounded corners for a cleaner and modern look.

Custom Workaround


Follow the steps below to add top padding and rounded corners to group cover images:

1. Go to BuddyBoss > Theme Options.
2. Under Custom Codes, enable CSS.
3. Append the following code:

body.groups div#cover-image-container { 

    margin-top: 0; 

    border-top-right-radius: 5px !important; 

    border-top-left-radius: 5px !important; 

}

body.groups #buddypress #item-header #header-cover-image.has-cover-image { 

    border-top-right-radius: 5px !important; 

    border-top-left-radius: 5px !important; 

}

4. Save changes.

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

Troubleshooting and FAQs

Q: The rounded corners are not showing. What should I do?

A: Ensure your browser cache and any site caching are cleared. If the corners still don’t appear, submit a ticket to the support team for assistance.

Q: Can I increase or decrease the corner radius?

A: Yes. Change the 5px value to your preferred radius, e.g., 10px for more rounded corners.

Q: Does this affect the top margin?

A: Yes, the margin-top controls the spacing above the cover image. You can adjust it as needed.

Q: Will this work for all group cover images?

A: Yes, this CSS applies to all group cover images on your site.