• Share this article:

Social Bars

Social bars are small containers, normally located towards the top of a page. Typically the use an ExtraContent container; normally ExtraContent1 or ExtraContent2. These containers are excellent for the placement of important text (like telephone numbers, special messages or links). They are also perfect for the placement of social networking and bookmarking icons (like Facebook, Twitter, Pinterest, Delicious, Google+ or LinkedIn), so people visiting your website can easily bookmark or share it. An example of a social bar in the Wilderness RapidWeaver theme is pictured below; you can see the social networking icons shown on the left within a small box.

Wilderness theme

You can choose in the Social Bar theme settings to have a horizontal-scaling bar that runs the full width of the screen, and contains your social bar content. Or the other option is to use one of the fixed / floating box options (like the one pictured above in Wilderness), which places social bar content in a small box at the top left or top right of the screen. As always, social bars can be easily turned off on smaller screens (like tablets or mobile devices) using the provided options in the Responsive Behaviour group of theme style settings.

As you will see when you experiment with the social bar settings, fixed positioning means that the social bar is permanently 'glued' in the same place on the screen and resists scrolling, whereas floats or relative positioning responds to screen scrolling. Be aware that in some RapidWeaver themes with fixed title bars (like Black & White or Wilderness) a fixed social bar may conflict with other elements on the page. Therefore you may need to adjust the placement of theme elements in the settings or choose one of the other social bar placement options available to you. Normally if horizontal bar options don't work for you, the left or right box options definitely will instead! We also provide a basic array of colour settings for the social bar. Background gradient effects degrade to a flat colour in older versions of Internet Explorer (normally the lower fill colour is used in such instances).

Typically you can setup a social bar using the ExtraContent stack or by typing this code into a page (the number of the ExtraContent container varies in some RapidWeaver themes):

<div id="myExtraContent1">Hello World!</div>

The 'Hello World' text in that above example can then be replaced with text, links or icons. Use the standard HTML image tags for images. It's possible to incorporate support for Font Awesome Icons using example code like this for horizontal social bars:

<div id="myExtraContent1">
    <a href="https://plus.google.com">
        <i class="fa fa-google-plus" style="font-size:25px;"></i>
    </a>
    <a href="http://www.facebook.com">
        <i class="fa fa-facebook" style="font-size:25px;"></i>
    </a>
    <a href="http://www.linkedin.com">
        <i class="fa fa-linkedin" style="font-size:25px;"></i>
    </a>
    <a href="http://twitter.com">
        <i class="fa fa-twitter" style="font-size:25px;"></i>
    </a>
    <a href="http://www.pinterest.com">
        <i class="fa fa-pinterest" style="font-size:25px;"></i>
    </a>
</div><!--/myExtraContent1-->

And for social bar boxes (which require line breaks between each icon) some HTML code like this can be used like this with the addition of break tags:

<div id="myExtraContent1">
    <a href="https://plus.google.com">
        <i class="fa fa-google-plus" style="font-size:30px;"></i>
    </a>
    <br />
    <a href="http://www.facebook.com">
        <i class="fa fa-facebook" style="font-size:30px;"></i>
    </a>
    <br />
    <a href="http://www.linkedin.com">
        <i class="fa fa-linkedin" style="font-size:30px;"></i>
    </a>
    <br />
    <a href="http://twitter.com">
        <i class="fa fa-twitter" style="font-size:30px;"></i>
    </a>
    <br />
    <a href="http://www.pinterest.com">
        <i class="fa fa-pinterest" style="font-size:30px;"></i>
    </a>
</div><!--/myExtraContent1-->

As always, if entering this sort of HTML code into a RapidWeaver styled text area (like a styled content or sidebar region), be sure to highlight the code and select Ignore Formatting from the RapidWeaver Format menu. This action will result in RapidWeaver ignoring the line and paragraph breaks after each line of HTML code.

The addresses (URL) that each icon points towards can be changed to represent your own accounts and usernames. If you're not sure where the address should lead towards, check with the service provider and read their developer documentation provided. Sometimes it's also necessary to supplement the HTML code for social networking icons, with some custom CSS code like this:

#extraContainer1 a [class^="fa fa-"] {
    padding-top: 12px;
    padding-bottom: 12px;
    padding-left: 8px;
    padding-right: 8px;
}

Custom CSS code like this can be used to improve the line heights and spacing around icons. In particular, it can make the 'clickable' regions bigger and easier to mouseover. There are lots of other possible CSS styling options available to use.

Provide Feedback

Please use this form to provide feedback about this particular knowledgebase article. For example; to report broken links, errors or things you think could be worded better. We welcome all constructive feedback. All fields are required.

 

Feedback is submitted anonymously (unless you otherwise provide your name or contact details). We don't promise to reply to every feedback message received; neither is this a good place to request technical support. You can continue to request one-to-one support through the ThemeFlood website. See getting in contact for details.