Social Side Block

Written by Mick in Tutorials on 29 Jul 2013


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 Generator

Open 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>
Mick is an American theme designer for Simple Machines Forum software currently living in South Florida, USA. He runs idesignSMF and started tinkering with SMF in 2006 where he created several SMF forums of his own before he founded idesignSMF in 2009 to which he is dedicated full time.
    

1 Comments


Get more stuff like this

Subscribe to our mailing list and get interesting content and updates.