A simple social side block to be used with your favorite portal left or right block. Social colors appear on hover. Very cool and very eye catchy. I downloaded the icons from IcoMoon app at 28 pixels in height with #ffffff color. No sprite images are used here since i wanted to put together something quick, only .png images are used.
I forked this from
Google Play Store Menu - CodePen and grabbed the icons from
IcoMoon App - Icon Font GeneratorOpen your theme's css/index.css and at the very end, add:
#social {
background: rgba(245, 245, 245, 0.95);
width: 300px;
}
#social ul {
padding: 0;
margin: 0;
}
#social ul li {
list-style: none;
height: 50px;
}
#social ul li:hover {
width: 300px;
height: 50px;
}
#social ul li a {
position: absolute;
width: 300px;
height: 50px;
text-decoration: none;
color: #555;
padding: 15px 0 0 60px;
}
#social ul li a:hover {
color: #fff;
}
.facebook {
background: #3b5998;
width: 50px;
height: 50px;
margin-bottom: px;
}
.twitter {
background: #00aced;
width: 50px;
height: 50px;
margin-bottom: px;
}
.google-plus {
background: #dd4b39;
width: 50px;
height: 50px;
margin-bottom: px;
}
.contact {
background: #658092;
width: 50px;
height: 50px;
margin-bottom: px;
}
.rss {
background: #ff6600;
width: 50px;
height: 50px;
margin-bottom: px;
}
.facebook-icon {
position: absolute;
margin-left: 10px;
padding-top: 12px;
}
.facebook-icon:before {
width: 50px;
height: 50px;
margin-right: 30px;
content: url("../images/facebook.png");
}
.twitter-icon {
position: absolute;
margin-left: 10px;
padding-top: 12px;
}
.twitter-icon:before {
width: 50px;
height: 50px;
margin-right: 30px;
content: url("../images/twitter.png");
}
.google-plus-icon {
position: absolute;
margin-left: 10px;
padding-top: 12px;
}
.google-plus-icon:before {
width: 50px;
height: 50px;
margin-right: 30px;
content: url("../images/googleplus.png");
}
.contact-icon {
position: absolute;
margin-left: 10px;
padding-top: 12px;
}
.contact-icon:before {
width: 50px;
height: 50px;
margin-right: 30px;
content: url("../images/mail.png");
}
.rss-icon {
position: absolute;
margin-left: 10px;
padding-top: 12px;
}
.rss-icon:before {
width: 50px;
height: 50px;
margin-right: 30px;
content: url("../images/rss.png");
}
Modify the widths according to your portal.
Create an HTML side block, add the following and add your URL's.
<div id="social">
<ul>
<li class="facebook"><span class="facebook-icon"></span><a href="#">Facebook</a></li>
<li class="twitter"><span class="twitter-icon"></span><a href="#">Twitter</a></li>
<li class="google-plus"><span class="google-plus-icon"></span><a href="#">Google +</a></li>
<li class="contact"><span class="contact-icon"></span><a href="#">Contact Us</a></li>
<li class="rss"><span class="rss-icon"></span><a href="#">RSS</a></li>
</ul>
</div>