Customize

In this tutorial I will teach you how to use the advanced theme options to customize the look and feel of your site (requires BuddyBoss 3.1+).

You can access all of the theme customizer options at Appearance > Customize from your WordPress dashboard. Every time you change a setting, you will see your site dynamically update in the live preview next to the settings. To preview what it would look like on a mobile device, just make your browser window skinny while using the customizer.

If you want a completely unique design, ask about our custom theme and plugin development.

Changing the Site Title & Tagline

If you have not uploaded a logo, your Site Title and Tagline will automatically display where the logo would be.

1. Go to Appearance > Customize.
2. Open Site Title & Tagline.
3. Type your desired text.
4. Click Save & Publish.

Adding a Logo

If you upload a logo, it will display instead of the Site Title & Tagline.

1. Go to Appearance > Customize.
2. Open Logo.
3. Click “No Image” so it opens up.
4. Under “Drop a file here or select a file“, click “select a file”. Find your logo from your computer.
5. Click Save & Publish.

Your newly upload logo will now be visible on the WordPress login screen as well.

Changing the WordPress Toolbar layout

Starting in BuddyBoss 3.1.1, you can change the toolbar layout via the customizer settings. The two options are Full Width, which is similar to the default WordPress Toolbar, or Float Right which will dock the Toolbar to the right side of the screen.

Fluid Width

1. Go to Appearance > Customize.
2. Open WordPress Toolbar.
3. Select “Fluid Width” which should be the default.
4. Click Save & Publish.

Float Right

1. Go to Appearance > Customize.
2. Open WordPress Toolbar.
3. Select “Float Right”.
4. Click Save & Publish.

Customizing Colors

You can easily change the colors for all of the major elements of your site.

1. Go to Appearance > Customize.
2. Open Colors → Layout, or Colors → Text.
3. For each element you want to adjust, select your desired color using the color picker.
4. Click Save & Publish.

Customizing Fonts

You can easily change the fonts for all of the major elements of your site.

1. Go to Appearance > Customize.
2. Open Typography.
3. For each element you want to adjust, select your desired font using the font dropdowns.
4. Click Save & Publish.

Adding social media links to your footer

You can easily social media links (Facebook, Twitter, etc.) into your site’s footer. For this particular section, you will only see the preview update after clicking Save & Publish.

1. Go to Appearance > Customize.
2. Open Social Media Links.
3. Enter your social media link for each icon that you want to display.
4. Click Save & Publish.

Pro Tip: Deactivating the color and font styles

The color and font options are automatically outputted as inline styles into the HTML of your website. If you inspect the HTML you will see them in <style type=”text/css”> [styles] </style>. Even if you have not used the customizer, it will still output the default colors into the HTML, which will generally override styles set for the same CSS attributes in your child theme.

If you are making a lot of custom CSS edits you may wish to disable the customizer’s CSS output entirely. This is easy to do. Just add this function into your child theme’s functions.php file:

// Remove customizer CSS output
add_action( 'after_setup_theme', 'remove_buddyboss_customizer_css') ;
function remove_buddyboss_customizer_css() {
remove_action('wp_head', 'buddyboss_customizer_css');
}