Bubble Effect With CSS – Thesis Array

by Shubham on February 11, 2010

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.

download Bubble Effect With CSS   Thesis Array download1 Bubble Effect With CSS   Thesis Array

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:

sprites Bubble Effect With CSS   Thesis Array

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.

  • Similar Articles

    { 14 comments… read them below or add one }

    avatar blinkky February 11, 2010 at 2:29 am

    I usually use Photoshop =)

    Reply

    avatar Shubham February 11, 2010 at 2:43 am

    Yeah..Its good..! You can use photoshop also to create sprites.!
    .-= Shubham´s last blog ..Bubble Effect With CSS – Thesis Array =-.

    Reply

    avatar Mad Geek @beingPC February 11, 2010 at 1:12 pm

    Wow that was awesome effect, please continue posting this kind of customization…

    Between welcome back and yeah I like your logo very much.
    .-= Mad Geek @beingPC´s last blog ..New IE Flaw – Turn Protected Mode On To Stay Safe =-.

    Reply

    avatar Shubham February 11, 2010 at 1:48 pm

    Thanks… Ritesh..! I have some cool stuff’s like this..! Will post them too.! I am glad you liked our logo..! It’s designed by my buddy Aditya.! ;-)
    .-= Shubham´s last blog ..Bubble Effect With CSS – Thesis Array =-.

    Reply

    avatar SmashinGeeks February 11, 2010 at 3:45 pm

    Nice Share Shubham ,thanks
    .-= SmashinGeeks´s last blog ..Download Old & Maggazine Styled Wordpress Themes =-.

    Reply

    avatar Shubham February 11, 2010 at 5:36 pm

    I am glad you liked it..! Will post some new cool effects soon..!
    .-= Shubham´s last blog ..Bubble Effect With CSS – Thesis Array =-.

    Reply

    avatar Loveish February 11, 2010 at 5:54 pm

    Nice post dude. Its really helpful for bloggers who don’t knw much about customization. Keep up the great work :)
    .-= Loveish´s last blog ..60 Greatest Grunge Style Fonts =-.

    Reply

    avatar Shubham February 11, 2010 at 6:04 pm

    Yup..! Thanks man.!

    Reply

    avatar Chethan February 12, 2010 at 3:45 pm

    Bubble Effect! Lol!
    I am Loving it!
    Thanks Shubam
    .-= Chethan´s last blog ..How to Tweet From Google Reader? =-.

    Reply

    avatar SmashinGeeks February 14, 2010 at 9:07 am

    You are a creative dude, it is really awesome.
    .-= SmashinGeeks´s last blog ..How to Disable Password Prompt in Windows XP Login =-.

    Reply

    avatar Jayce February 21, 2010 at 5:36 pm

    Cool… But no time to implement it now. :P
    .-= Jayce´s last blog ..Google Maps for Mobile 4.0 ~ Android, BlackBerry, iPhone, Nokia S60 and Windows Mobile. =-.

    Reply

    avatar Gojeg February 26, 2010 at 6:33 am

    Thank you! Maybe I’m gonna try this tips.. :D
    .-= Gojeg´s last blog ..BuzzExt, a Google Buzz Extension for Chrome =-.

    Reply

    avatar Prashant March 31, 2011 at 2:03 pm

    nice.. keep up the good work…

    Reply

    avatar Raj @ WordPress Tips & Tricks September 15, 2011 at 12:21 pm

    Thanks for sharing this tutorial, I instantly fall in love with your design..
    Raj @ WordPress Tips & Tricks´s last [type] ..Top 5 Free Hosted Blogging Platforms

    Reply

    Leave a Comment

    CommentLuv badge

    Previous post:

    Next post: