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() { ?>
<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>
<?php }
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:
/* SAVE THIS IN CUSTOM.CSS FILE */ .custom #feedback {background: transparent; width: 3.2em; position: fixed; top: 10%; left: 0.55%;} .custom #feedback a {display: block; text-indent: -9999px; height: 3.2em;} .custom #feedback #twitter {background: url('http://www.yourdomain.com/images/yourimage.png')} .custom #feedback #rss {background: url('http://www.yourdomain.com/images/yourimage.png')} .custom #feedback #email {background: url('http://www.yourdomain.com/Blog/wp-content/uploads/2009/08/contact-new.png')} .custom #feedback #linkin {background: url('http://www.yourdomain.com/images/linkedin.png')} .custom #feedback #skype {background: url('http://www.yourdomain.com/images/youtube.png')}
Similar Phoenix SEO,Web Design Phoenix and WordPress Designer Tips:
- Customize WordPress Thesis Theme with Icons…I’ve gone icon crazy! I was searching around trying to find some really great...
- WordPress Designer Tip #3 How to Add Pics to Your Thesis Teasers Section Hey everyone, long time no blog post. I sure have...
- WordPress Designer Secrets Revealed- How to add social media icons to sidebar Eat, Pray, WordPress Designer Love…in that order. Maybe add some...
- Customizing Thesis Theme for WordPress 102 | Firefox Add-On Tools Welcome to my 2nd tutorial in my new series,”Customizing Thesis...
- Remove tiny space between header and navigation in Thesis So it took me probably 3 whole weeks to figure...
{ 15 comments… read them below or add one }
Thanks for the tutorial. How can I line them up horizontally instead of vertically?
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.
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!!!
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!
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
Awesome thanks!
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?
Hi Jared-
Can you provide a link?
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.
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?
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.”
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!
Hi! Can you send a link to your site?
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.
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