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

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:

#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

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.

Website: https://www.idesignsmf.com/

    


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.

  Receive our monthly newsletter right in your inbox.


Advertisement  




 Tutorials
In this section you will find in-depth how-to's involving common SMF development and design techniques.



go up