Amazingly Simple and Beautiful. Brand spankin' new free SMF themes every month.

Social Side Block

Mick in Tutorials on Jul 29, 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>

Tagged with:


Mick

Mick G

idesignsmf.com

    

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 and has a weakness for Tacos and Pizza.


1 Comments

Awesome!
1




Latest Discussions

Join the conversation

Our Most Popular Features