AWIA LogoFacebookGoogle Plusicon-codingicon-computericon-designicon-drawicon-drupalicon-maintenanceicon-mapicon-wordpressLinked InTwitter

CSS sprites are basically a contact sheet of images. Each image is picked out using CSS positioning properties. The main advantage of sprites is that you use one image for all your icons. That means only one call to the web server which means less overheads. This means less bandwidth and a faster site. Bonus!

How to create your own social media buttons for Drupal.

These steps will give a simple set of social media buttons for Facebook, Twitter, Google Plus, YouTube and Pinterest. The buttons will be monochrome and burst into colour when you hover over them.

This is a quick how to for Drupal. There is no reason why this can't be adapted for another CMS

Step 1

Create a block called Social Media Buttons and insert the following html code:

<ul id="social-media">
<li class="sprites social-media-facebook"><a href="#"
name="Facebook" title="Facebook">Facebook</a></li>
<li class="sprites social-media-twitter"><a href="#"
name="Twitter" title="Twitter" >Twitter</a></li>
<li class="sprites social-media-googleplus"><a href="#"
name="Google Plus" title="Google Plus">Google Plus</a>
<li class="sprites social-media-youtube"><a href="#"
name="YouTube" title="YouTube">YouTube</a></li>
<li class="sprites social-media-pinterest"><a href="#"
name="Pinterest" title="Pinterest">Pinterest</a></li>
</ul>

This is a simple list of links. With no styling that is all they will be. Your links will be easily visible to search engines and text based browsers.

Step 2

Add the following CSS code to your style sheet

/*Social Media Sprites*/#social-media {padding: 10px 0px;margin: 0px;display: block;height: 49px;}

This is to set up the padding around the buttons. The display: block enables us to assign a physical size to the list.

#social-media ul {width: 200px;height: 49px;}

let's se up the dimensions of the block

#social-media li {list-style: none;float: left;padding-right: 10px;}

This gets rid of the bullets and sets the list elements to display horizontally.

#social-media li a {display: inline-block;height: 32px;width: 32px;color: transparent;box-shadow: 1px 1px 1px #999;-webkit-box-shadow: 1px 1px 1px #999;}

This sets the default size of our buttons and adds some shadow to the buttons. The color: transparent option renders the text invisible to the eye but it will still show up on text based browsers

#social-media li a:hover {box-shadow: 1px 1px 1px #666;-webkit-box-shadow: 1px 1px 1px #666;}

This changes the shadow colour when you hover over it.

.sprites { background: url("sprites.png") top left no-repeat; }

Now the real magic starts. This loads the sprite sheet as a background image

.social-media-facebook {width: 32px;height: 32px;background-position: -10px -10px;}

This selects a portion of the sprite sheet as a background image. In out case, it will display the monochrome Facebook icon.

.social-media-facebook:hover {width: 32px;height: 32px;background-position: -52px -10px;}

When we hover over the link, it will shift the sprite sheet over to display the coloured version of the Facebook icon

.social-media-googleplus {width: 32px;height: 32px;background-position: -10px -52px;}
.social-media-googleplus:hover {width: 32px;height: 32px;background-position: -52px -52px;}
.social-media-pinterest {width: 32px;height: 32px;background-position: -10px -94px;}
.social-media-pinterest:hover {width: 32px;height: 32px;background-position: -52px -94px;}
.social-media-twitter {width: 32px;height: 32px;background-position: -10px -136px;}
.social-media-twitter:hover {width: 32px;height: 32px;background-position: -52px -136px;}
.social-media-youtube {width: 32px;height: 32px;background-position: -10px -178px;}
.social-media-youtube:hover {width: 32px;height: 32px;background-position: -52px -178px;}

Step 3

Upload your sprite sheet.

sprites demo

Step 4

Turn on your new block in the area where you want it to display.

Categories

Posts

All posts