Theme Website Styling

Why Use Styling in BuddyBoss?

Styling offers you the option to choose between the available BuddyBoss theme styles. Theme style controls the look of elements like buttons, forms, navigation bars, and form fields. Today in this video you will learn how to switch between BuddyBoss 1.0 and 2.0 theme style. The 2.0 style now provides unified design in all devices. It creates a cleaner and more specious experience for the users. 

Configure the BuddyBoss Styling

  1. Navigate to BuddyBoss - Theme Options - Styling. Here you will change the theme style. If you are new to BuddyBoss theme then we prefer you to use 2.0. But in the case of an older user who has done a lot of customization, you should go with 1.0 style to maintain the best backend compatibility. Click on the 1.0 style and Save Changes button. 

Refresh the frontend of your BuddyBoss community. You will see the changes are pretty subtle. The navigation is back to the 1.0 style, the corners are a little bit more rounded, the widgets have 1.0 heading style, and all elements of the page have the smaller border areas with less padding. BuddyBoss has kept the New Tab Bar style in the header and still has a section in the Buddy Panel, as well as the other new features. Both of these styles have the same feature in the BuddyBoss theme. The only difference between these 2 styles is CSS, so basically the look of your site. layout changes. 

Now, make the Button Radius to 0 and click Save Changes.

Refresh the frontend of your website and check the buttons are straight square now. 

But the older 1.0 version has more opal shape buttons. So, let’s adjust the shape by making the Button Radius to 100 and don’t forget to press Save Changes

Again, refresh your frontend and see every button has a full round shape.

Now let’s switch to the 2.0 style. Click on 2.0 style and put the Button Radius to 6, here you can change the radius number as you want. Lastly, click Save Changes

Everything is matched with the 2.0 style theme now. 

That’s the Styling setting for your BuddyBoss network website. 

Related Material

Styling Options in BuddyBoss Theme 2.0 (New Template Pack)