Bubble Effect With CSS – Thesis Array

From the past few weeks I haven’t posted anything. Well all I can say is that I was busy the past weeks, but not on what I expected. This is my first post on WordPress Theme Customization. Well today, I will explain you how to create a dock( though not smooth like Mac) for your theme using CSS. You can easily integrate it into your theme for a cool bubble effect. Using CSS you can simply create the bubble effect in few steps.

First of all prepare your images for sprites, or download the image from here and add the sprites to the custom/images directory in thesis theme i.e copy the downloaded image in the images folder.

Well I used Flash CS3 to create sprites. If you are creating your own images, the sprites should be pixel precise. Well have a look at the sprites:

First we will create get_bubble function and we will add the code to the custom_functions.php for thesis theme.

function get_bubble (){
?>
<ul id="bubble">
<li>
<a href="http://feeds2.feedburner.com/techcrank" title="Full RSS Feed">Full RSS Feed</a>
</li>
<li>
<a href="http://feedburner.google.com/fb/a/mailverify?uri=Techcrank&loc=en_U" title="Feed via Emal">Feed via email</a>
</li>
<li>
<a href="http://twitter.com/shubhamblog" title="Full RSS Feed">Follow me on Twitter</a>
</li>
<li>
<a href="http://www.facebook.com/pages/TechCrank/156882081490" title="Full RSS Feed">I am on Facebook</a>
</li>
</ul>
<?php
}

add_action('thesis_hook_before_sidebars', 'get_bubble');

Copy the codes into your custom_functions.php. Edit the links in the function. If you want to place it elsewhere just edit the hook.

Now adding CSS into custom.css, just copy the codes into your custom.css to create the bubble effect.

#bubble {list-style: none;margin: 0px;padding-top: 25px;padding-left: 22px;}
#bubble li {display: inline-block; margin: 0px;padding: 0px;}
#bubble li a.icon {background: url('images/sprites.png') no-repeat;border: none;display: block;width: 65px;height: 65px;text-indent: -9999px;}
#bubble li a.feed {background-position: -79px -3px;}
#bubble li a.feed:hover {background-position: -2px -1px;}
#bubble li a.email {background-position: -81px -72px;}
#bubble li a.email:hover {background-position: -2px -72px;}
#bubble li a.twitter {background-position: -84px -142px;}
#bubble li a.twitter:hover {background-position: -2px -141px;}
#bubble li a.facebook {background-position: -84px -212px;}
#bubble li a.facebook:hover {background-position: -2px -211px;}

This is the CSS code you need to add for the default background image of links in your custom.css. You can edit it to get the perfect look for your blog.

Adding It to Another Theme:

Adding it to another theme is easy. Just open theme editor and copy the codes into the php file where you want to place it. For example I used sidebar.php

<ul id="bubble">
<li>
<a href="http://feeds2.feedburner.com/techcrank" title="Full RSS Feed">Full RSS Feed</a>
</li>
<li>
<a href="http://feedburner.google.com/fb/a/mailverify?uri=Techcrank&loc=en_U" title="Feed via Emal">Feed via email</a>
</li>
<li>
<a href="http://twitter.com/shubhamblog" title="Full RSS Feed">Follow me on Twitter</a>
</li>
<li>
<a href="http://www.facebook.com/pages/TechCrank/156882081490" title="Full RSS Feed">I am on Facebook</a>
</li>
</ul>

Now copy the above CSS into your style.css. You’re Done.! You can add more links in your function. Well you can add extra style to your CSS to get a different look.

If you have suggestions or any problems placing it, comment us. And we will reply back.

Tagged as: thesis

Spread it!

Share