⚡️Cyber Monday Flash Sale 70% Off:
H :
M :
S
⚡️
  1. Home
  2. Knowledge Base
  3. BuddyBoss Theme
  4. Theme Options
  5. How to Customize Website Styling in BuddyBoss Theme

How to Customize Website Styling in BuddyBoss Theme

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

  1. Log in to your Wordpress Dashboard.
  2. In the left-hand menu, click on BuddyBoss.
  3. Under BuddyBoss, select Theme Options.
BuddyBoss > Theme Options options are highlighted
  1. Click on Styling to open the settings panel.
Clicking on the Styling tab then selecting 1.0 under theme style.

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.
Selecting 1.0 for the theme style
  1. Click the Save Changes button.
  2. Refresh the frontend of your BuddyBoss community to view the subtle changes:
showing how the styling looks like in the Members Page

Customize the Button Radius

  1. Go to the Styling panel > Button Radius setting.
Adjusting the Button radius under the styling tab
  1. To achieve a straight square button look, set the Button Radius to 0 and click the Save Changes button.
  2. Refresh your website’s frontend to verify that the buttons are square.
Showing how buttons with 0 radius will look like in the frontend
  1. To revert to the classic opal shape of the 1.0 style, set the Button Radius to 100 and click Save Changes.
Changing the Button radius to 100%
  1. Refresh your website to confirm that all buttons now have a fully rounded shape.
Showing how buttons with 100 radius will look in the frontend
  1. 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.
Changing the button radius to 6
  1. Refresh your site to ensure the changes align with the 2.0 theme design.
showing how buttons with 6 radius will look in the frontend

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.

Was this article helpful?

Related Articles

Subscribe to Our Newsletter

Stay In Touch

Subscribe to our Newsletter, and we’ll send you the latest news from BuddyBoss

  • This field is hidden when viewing the form
  • This field is for validation purposes and should be left unchanged.

To speak to our Agency consultant, fill in the form found at our Contact Page.

  • Get Started

    Enter your name and email address to get started with your project...

  • This field is for validation purposes and should be left unchanged.