Find the right theme for you. Browse through our gallery of expertly-crafted free SMF themes to find the perfect one for your needs.

Social Side Block

Mick in Tutorials
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:
Code: [Select]
#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.
Code: [Select]
<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:

Share This Post

Mick

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

cieplutki
Aug 09, 2013
Awesome!
1



Connect with us:


Improve SMF

If you wish to contribute to the development of SMF you can contribute to the coding discussions taking place on Github. You are also welcome to suggest features which you would like to see added to the software in the Feature Requests board.




go up