How to Customize Website Styling in BuddyBoss Theme

Introduction

BuddyBoss Theme provides you with the flexibility to customize your website’s styling to perfectly align with your brand identity.

This guide shows how you can switch between available theme styles and tailor key elements like buttons, forms, and navigation bars to create a seamless and engaging user experience.

Tutorial Video

Access the Styling Settings

1. Log in to your WordPress Dashboard.
2. In the left-hand menu, click on BuddyBoss.
3. Under BuddyBoss, select Theme Options.

4. Click on Styling to open the settings panel.

Switch Between Theme Styles

Select Your Preferred Theme Style

1. In the Styling panel, locate the theme style options.
2. Click on 1.0 style if you need maximum backend compatibility due to extensive customizations; otherwise, choose 2.0 style for a unified, modern design.

3. Click the Save Changes button.
4. Refresh the frontend of your BuddyBoss community to view the subtle changes:

Customize the Button Radius

1. Go to the Styling panel > Button Radius setting.

2. To achieve a straight square button look, set the Button Radius to 0 and click the Save Changes button.
3. Refresh your website’s frontend to verify that the buttons are square.

4. To revert to the classic opal shape of the 1.0 style, set the Button Radius to 100 and click Save Changes.

5. Refresh your website to confirm that all buttons now have a fully rounded shape.

6. To match the 2.0 style, click on 2.0 style, adjust the Button Radius to 6 (or another preferred value), and click Save Changes.

7. Refresh your site to ensure the changes align with the 2.0 theme design.

Troubleshooting and FAQ’s

Q: Why are my styling changes not appearing on the frontend?

A: Ensure you clicked Save Changes after adjusting the settings. If the issue persists, clear your browser cache and refresh the page.

Q: Which theme style should I use?

A: If you are new to the BuddyBoss Theme, we recommend using the 2.0 style for a modern, unified design. If you have extensive customizations, the 1.0 style may provide better backend compatibility.

Q: How do I revert the button shape if I’m unhappy with the changes?

A: Adjust the Button Radius setting in the Styling panel to your desired value and click Save Changes. Refresh your frontend to view the update.