How to add Cool Floating Social Icons to Thesis WordPress Website

In this tutorial I am going to show you how to add cool floating social icons to your Thesis 1.7 site for WordPress.

I used Trasy’s site as my example. Below is the video, and below the video is the code to copy and paste into your custom_functions and custom_css.

Copy and paste this code for the cool floating social icons into your Custom Functions ( the pink is where you should type in your own information:

/ SAVE THIS IN CUSTOM_FUNCTIONS.PHP FILE /

add_action(‘thesis_hook_before_header’, ‘sitewide_feedback_buttons’); /**************************************************************************/ /* FLOATING SOCIAL PROFILES ON SIDE OF SITE */ /***************************************************************************/ function sitewide_feedback_buttons() { <cite>?></cite> <div id=”feedback”> <a href=”http://www.twitter.com/yourusername” id=”twitter” target=”_blank” title=”Follow @twitterid on Twitter”>Follow @yourtwitterid on Twitter</a> <a href=”http://www.facebook.com/yourusername” id=”rss” target=”_blank” title=”Check out Your Name Facebook Page”>Check out Your Name Facebook Page</a> <a href=”http://www.yourdomain.com/contact” id=”email” title=”Contact Your Name by Email”>Contact Your Name by Email</a> <a href=”http://www.linkedin.com/yourusername” id=”linkin” title=”View Your Name LinkedIn Profile” target=”_blank”>View Your Name LinkedIn Profile</a> <a href=”http://www.youtube.com/yourusername” id=”skype” title=”Watch my Videos on YouTube” target=”_blank”>Watch my Videos on YouTube</a> </div> <cite><?php</cite> }</pre> Copy and paste this code for the cool floating social icons into your Custom CSS( the pink is where you type in your own image path)( If you would like to change where the image floats you can change top:10% to top:20% to move it down, you can put any % you want to give it the position you want: <pre>/* SAVE THIS IN CUSTOM.CSS FILE */ .custom #feedback {<a>background</a>: transparent; <a>width</a>: 3.2em; <a>position</a>: fixed; <a>top</a>: 10%; <a>left</a>: 0.55%;} .custom #feedback a {<a>display</a>: block; <a>text-indent</a>: -9999px; <a>height</a>: 3.2em;} .custom #feedback #twitter {<a>background</a>: url('http://www.yourdomain.com/images/yourimage.png')} .custom #feedback #rss {<a>background</a>: url('http://www.yourdomain.com/images/yourimage.png')} .custom #feedback #email {<a>background</a>: url('http://www.yourdomain.com/Blog/wp-content/uploads/2009/08/contact-new.png')} .custom #feedback #linkin {<a>background</a>: url('http://www.yourdomain.com/images/linkedin.png')} .custom #feedback #skype {<a>background</a>: url('http://www.yourdomain.com/images/youtube.png')}

Posted on June 7th, 2010 by Rachael Butts in WordPress Designer

About Rachael Butts

Rachael Butts is the CEO and lead designer for Rachaelbutts.com Rachael has been designing for WordPress since 2005, and has a passion for keeping up with the latest business practices in WordPress design and development. She thoroughly enjoy sales and marketing , client management, and making website creation fun for her clients.

Connect with Us

15 Responses

kellyhicks
07/29/2010 22:45:28

Thanks for the tutorial. How can I line them up horizontally instead of vertically?
Rachael Butts
08/9/2010 12:51:13

Hi Kelly the first line in the .custom css is .custom #feedback {background: transparent; width: 3.2em; position: fixed; top: 10%; left: 0.55%;}

You would need to set the width wider and play around with how you want it displayed after that.
Ray Nellum
08/12/2010 08:31:36

Rachael,

You Rock!!! I’ve been looking for a tutorial like this for a long time. It was very specific and helped me out so much. Thank you!!!
Rachael Butts
08/14/2010 23:40:22

Hi Ray! Thanks so much, I am really happy it worked for you ! Sometimes giving a tutorial is harder, because you may forget things people don’t know. Glad to know it worked!
bet365
11/20/2010 06:49:18

Good day!This was a really magnificentsuper post!
I come from itlay, I was fortunate to search your theme in bing
Also I learn much in your website really thank your very much i will come daily
Rachael Butts
11/27/2010 23:33:59

Awesome thanks!
Jared Pursell
01/5/2011 12:51:43

I followed the directions, but all I can see is the top corner of my first icon. It seems there part of the page is covering the icon. How do I bring it to the front?
Rachael Butts
01/5/2011 14:05:56

Hi Jared-
Can you provide a link?
Rachael Butts
01/14/2011 16:22:22

I’m guessing that you do not have your icons saved as .pngs. They need to be a .png background with no image.
You can find .pngs free on all softs of icon sites.
wader
01/24/2011 09:56:51

Hello. Thanks for the great tutorial! I’m wondering if the icons can been attached to the content container rather than the page? That way regardless of resizing it could always stay to the left of the main container. Any thoughts?
Rachael Butts
01/25/2011 01:15:41

You are so welcome!
It should be staying in a fixed positions to allow for page scrolling and staying in the same position. Are you viewing it in IE?

If so you would need to add this code instead:
IE7 and IE8 display issue:

Change the background position from “-3.2em” to “32px.” Changed width from “3.2em” to “32px.”
Rachel
08/13/2011 12:07:48

Hi Rachael,

I had these icons, but removed them because in some browsers they overlap my content. Can you tell me how to put the icons above my header to the right instead?

Appreciate Any help!
Rachael Butts
08/20/2011 13:30:16

Hi! Can you send a link to your site?
bakescake
11/27/2011 11:04:16

HI – thanks for this.
Question: how do I get the icons to float on top of the content a bit?
If I resize the browser window, they move closer or farther away and do not stay with the content box.

Any help appreciated.
Rachael Butts
12/5/2011 11:13:44

Hi Bakescake
They will moved down the page if you minimize the browser to the top of them. This is to ensure they always display no matter what the browser size is.
If you want to make place them higher or lower simply adjust the padding.

Thanks!
Rachael