The following tutorial will teach you how to add social media in Black Bee Responsive Theme on a Plone 4.2 website.
Black Bee theme features social media to connect your business to the most popular social media which is essential today. First, you need to install quintagroup.portlet.static product and activate it via Site Setup -> Add-ons section. Select Static Stylish Portlet* from Add portlet... drop-down menu. Insert the following piece of html code :
<ul class="social-icons">
<li> <a href="#" id="youtube">YouTube</a> </li>
<li> <a href="#" id="google">Google</a> </li>
<li> <a href="#" id="twitter">Twitter</a> </li>
<li> <a href="#" id="picasa">Picasa</a> </li>
<li> <a href="#" id="flickr">Flickr</a> </li>
<li> <a href="#" id="vimeo">Vimeo</a> </li>
<li> <a href="#" id="skype">Skype</a> </li>
<li> <a href="#" id="rrs">RSS</a> </li>
<li> <a href="#" id="linkedin">LinkedIn</a> </li>
<li> <a href="#" id="myspace">Myspace</a> </li>
<li> <a href="#" id="dribbble">Dribbble</a> </li>
<li> <a href="#" id="itunes">Itunes</a> </li>
<li> <a href="#" id="deviantart">Deviantart</a> </li>
<li> <a href="#" id="facebook">Facebook</a> </li>
</ul>
As you can see each list element corresponds to some social network/media. Instead of # you need to insert the link to your social profile. You can configure the portlet the way you like and select only those social networks that are suitable for you. It's simple as that, just edit the list.
Lastly, in Portlet style list choose Social icons and save it.
Each icon is highlighted to match the look of the corresponding social network. You can tweak the html code, adjust the column width and have it displayed the way you need.
