Customize

Modified on May 18, 2014

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.

tutorials-sitetitle-tagline


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.

tutorials-logo

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

tutorials-login-logo


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.

tutorials-toolbar-fluid

Float Right

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

tutorials-toolbar-float


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.

tutorials-colors


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.

tutorials-fonts


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.

tutorials-social-links


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');
}

Comments

  1. Hi There –

    I was wondering if the theme comes with a page editor? I would like to incorporate elements similar to the ones on your features page ( https://www.buddyboss.com/features/phones/) with tabs for different features (in my case, descriptions for a few courses I’m offering). Also would like to be able to be able to design areas with multiple columns.

    Thanks so much for your help,

    Anthony

  2. Thanks so much for getting back to me. Love the template, having a lot of fun discovering what it can do

  3. Hi,

    Would you have a simple method to customize a connection page, to make disappear both header and footer (so that only the fields regarding login and links towards registration and lost password would appear)?

    The problem I have is that menus in the header are visible and functional, making the process unusable.

    I read that I should copy the header.php file from the parent to the child theme but I couldn’t find enough reliable ressource regarding customization of One social theme in the Social Marketplace solution, and I am not yet fluent in customization in general.

    Thanks so much for your help,

    David

  4. Hi Michael, I like your Boss theme and i want to purchase it soon.
    and 1 question that do u have wordpress theme like Facebook , same front page and same function inside ?

  5. Great article. The only problem I’m having is that I change the site logos, save and publish, but the social learner logo remains on the WP-login page. Do you have any suggestions to make this work?

  6. I’m setting up a Buddyboss social site for a client and the page color he chose was black with grey text…which is working fine for the most part. however inspite of the CSS editing, the theme seems to default to black text in certain pages rendering the text illegible. I was wondering how to customize the email notification preferences page which is the page that is most negatively effected.

  7. I’m using the OneSocial theme with Beaver Builder but I can’t get my full width rows to stretch across the page and flush with the header… they get confined to a boxed layout and pushed down from the header. I’m no good with code, could someone help me out?

    thanks

  8. One more question: I’m considering purchasing either Boss or Social Learner. Do they come with Visual Composer included? Because I already have Beaver Builder which I use on several sites but apparently its not working so well with OneSocial. Will it work perfectly with Boss/Social Learner?

    thanks again.

Leave a Reply

Your email address will not be published. Required fields are marked *