Introduction
This guide shows how to customize website styling in the BuddyBoss Theme. You’ll learn how to switch between style versions (1.0 or 2.0), adjust button shapes, and apply styling that matches your brand. Properly styling your website helps create a polished, cohesive user experience across your community.
Explore BuddyBoss Platform | BuddyBoss App | BuddyBoss Pricing | Try BuddyBoss Demo
Tutorial Video
Access the Styling Settings
- Log in to your Wordpress Dashboard.
- In the left-hand menu, click on BuddyBoss.
- Under BuddyBoss, select Theme Options.
- Click on Styling to open the settings panel.
Switch Between Theme Styles
Select Your Preferred Theme Style
- In the Styling panel, locate the theme style options.
- 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.
- Click the Save Changes button.
- Refresh the frontend of your BuddyBoss community to view the subtle changes:
Customize the Button Radius
- Go to the Styling panel > Button Radius setting.
- To achieve a straight square button look, set the Button Radius to 0 and click the Save Changes button.
- Refresh your website’s frontend to verify that the buttons are square.
- To revert to the classic opal shape of the 1.0 style, set the Button Radius to 100 and click Save Changes.
- Refresh your website to confirm that all buttons now have a fully rounded shape.
- 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.
- Refresh your site to ensure the changes align with the 2.0 theme design.
Explore BuddyBoss Platform | BuddyBoss App | BuddyBoss Pricing | Try BuddyBoss Demo
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.