vBSocial 10

Increases Activity, Engagement, and lifelong members

Installation and Customization of vBSocial 10


Date Version Notes
7/10/2015 Official Release Official Release
7/16/2015 Lite Version 10.0 Official Release
7/17/2015 10.1 Pro Vers Includes thumbnails* in notifications
 7/18/2015 10.3 Fixes Registration Glitch, Works on CMS* now too.
 7/31/2015 10.4 Pro Vers Fixes Avatar issue in profile block

*Premium Fixes


Uninstall any previous versions. Install vBSocial 10 as a new plugin. It is a completely rebuilt platform from previous versions.


2015-07-17_14-45-08Add links like “Artist” to the left side:

Go to styles & templates > style manager > edit theme > vbsocial_notification_navbar

Find <ul class="nav navbar-nav navbar-left">

<li><a rel="Art Gallery" href="http://www.conceptart.org/">Artist</a></li>

Add to the right side:

Find   <ul class="nav navbar-nav navbar-right">


Change your logo:

By default, the location of the theme logo will also be the vBSocial 10 logo. To change, right click using chrome, find the location of your url, and replace it with one you want:





Add custom  forms or custom search:



<div class="collapse navbar-collapse" id="UNIQUE_ID"> <form class="navbar-form navbar-left" role="search"> <div class="input-group"> <input type="text" class="form-control"> <div class="input-group-btn"> <button type="button" class="btn btn-danger" tabindex="-1">Action</button> <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" tabindex="-1"> <span class="caret"></span>  </button>

<ul class="dropdown-menu dropdown-menu-right" role="menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li class="divider"></li> <li><a href="#">Separated link</a></li> </ul> </div> </div> </form>

Add buttons:

You can easily add buttons to callout actions: Again, your going to want to add this to
vbsocial_notification_navbar template in your theme.


<li class="divider"></li> <li style="padding:0 15px;"> <button type="button" class="btn btn-primary btn-block navbar-btn">Primary</button> </li> 

And for a dropdown button like “info”, try this:

<li class="divider"></li> <li style="padding:0 15px;"> <div class="btn-group btn-block" style="margin-top: 8px; margin-bottom: 8px;"> <button type="button" class="btn btn-block btn-info dropdown-toggle" data-toggle="dropdown">Info <span class="caret"></span></button>
<ul class="dropdown-menu" role="menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li class="dropdown-left-onhover no-fix">
<!-- Menu item with submenu -->
<a style="-webkit-box-shadow: none; box-shadow: none;" href="javascript:;" data-toggle="collapse" data-target="#id_5" class="dropdown-toggle collapsed"><i class="fa fa-check-square-o"></i> With submenu</a> <!-- start submenu -->
<ul class="dropdown-menu collapse" id="id_5"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li class="divider"></li> <li><a href="#">Separated link</a></li> </ul>
<!-- start submenu --> </li> <li><a href="#">Something else here</a></li> <li class="divider"></li> <li><a href="#">Separated link</a></li> </ul> </div> </li> <li class="divider"></li>

RTL Sites (Foreign Language/Arabic Sites)

Simply switch your site to RTL in the language settings. vBSocial 10 is smart and will adapt to the changes.

Show the bar on the bottom instead of the top:

<li><a href="javascript://" class="toggle_fixing"><i class="fa fa-chevron-down"></i>&nbsp;</a></li>

Removing this line, from “vbsocial_notification_navbar” template, will remove the chevron.

Note: You can also rearrange any components in the order you want.

How to change Icons


All our fonts are from the Font Awesome Kit, meaning, you can change them out with any of the hundreds that exist as part of that set here: http://fortawesome.github.io/Font-Awesome/icons/

In the “vBSocial Notifications” templates, any time you see:

<i class="fa fa-home">, the red can be changed to that particular icon.

Known Conflict/Fix:

If your using Dbtech SEO – 

1. Contact dbtech to auto convert data-href attribute (vBSEO used to do this)or

2. Find our templates > vBSocial Notifications >  vbsocial_notification_popup_bit

Remove “<vb:if condition=”$message[‘messageurl’]”>style=”cursor: pointer;” data-href=”{vb:raw message.messageurl}”</vb:if>” and that will remove the area box link



Leave a Reply