Thesis makes customizing your Twitter feed incredibly easy. Thanks to the Custom.css file, you can make a few simple tweaks to your Twitter widget and your Tweets can look freakin’ sweet.

Installing The Widget

From the Dashboard, go to Plugins→Add New. Search for “Twitter For WordPress.” The top result should be what you want. Click “Install” in the upper right hand corner of the widget. Then, click “Install Now” in the new window that opens. From the next screen, click “Activate Plugin.”

Now that the plugin is activated, go to Appearance→Widgets. In the Widgets area, drag “Twitter #1″ to the sidebar of your choosing. Also, notice at the bottom of the Widgets page that you can add more Twitter Widgets, if you are that crazy for sharing updates.

Now Comes The Tweaking

In my example, I put the following in my Custom.css:

.custom .twitter-item { margin-bottom: 0em; padding: .5em 0 .5em 0; border-bottom: 1px solid #000; }
	.custom .twitter-item:hover { background: #ccc; }
	.custom .twitter-item a { color: #ffff00; }
	.custom .twitter-item a:hover { color: #ff00ff; }

Don’t Forget To Pick Up Your Copy Of Thesis!

Also, help keep Thesis Tutor alive by donating!

IE7 and IE8 display issue is fixed!

Changed the background position from “-3.2em” to “32px.” Changed width from “3.2em” to “32px.” Simply make those changes and it should work great! Thanks to gtalbot.org, who listed it as number 37 of 171 allegedly fixed bugs in IE 8 [fixed as of 6001.18343]. Sorry I didn’t notice this sooner, guys!

Social Icons Code Update: 8/14/2009

The code for this tutorial has been updated in the text, with a new video coming momentarily. Please make sure that you make the proper adjustments. This now validates like a mofo

Share Yourself In Under Seven Minutes

So, as I sit here and get severely tortured by my wife’s new obsession called “More To Love”, I figured I should share a really awesome way to display some social networking icons, RSS and email just like you see to the left on my site. In less than 7 minutes you will be able to connect your readers/users/subscribers to your Twitter, Facebook, RSS and Email all using Thesis Hooks. Below is the code you need to make it all happen.

Put This In Your Custom_Functions.PHP

function social_iconz() {
?>
<div id="feedback"><a href="http://twitter.com/yourusername" id="twitter">[your name] on Twitter</a><a href="http://facebook.com/yourusername" id="facebook">[your name] on Facebook</a><a href="Your RSS Feed URL" id="rss">[your] RSS Feed</a><a href="mailto:youraddress@whatever.com" id="email">[your] Email</a></div>
<?php
}
add_action('thesis_hook_after_html','social_iconz');

Put This In Your Custom.CSS

.custom #feedback { background: transparent; width: 3.2em; position: fixed; top: 40%; left: 0.25%; }

.custom #feedback a { display: block; text-indent: -9999px; height: 32px; outline: none; }

.custom #feedback #twitter { background: url('http://thesistutor.com/wp-content/uploads/2009/07/twittericon.png') no-repeat 0 -32px; }
	.custom #feedback #twitter:hover { background-position: 0 0; }

.custom #feedback #facebook { background: url('http://thesistutor.com/wp-content/uploads/2009/07/facebookicon.png') no-repeat 0 -32px; }
	.custom #feedback #facebook:hover { background-position: 0 0; }

.custom #feedback #rss { background: url('http://thesistutor.com/wp-content/uploads/2009/07/rssicon.png') no-repeat 0 -32px; }
	.custom #feedback #rss:hover { background-position: 0 0; }

.custom #feedback #email { background: url('http://thesistutor.com/wp-content/uploads/2009/07/emailicon.png') no-repeat 0 -32px; }
	.custom #feedback #email:hover { background-position: 0 0; }

Special Cases

Special cases will be updated as I discover them. Special cases can, from time to time, cause HTML validation errors. The errors are NOT a product of my work, but are issues with the way that sites such as Delicious and StumbleUpon work their magic. If you have a validation concern, please email me.

For Delicious, the CSS principle stays the same but what goes into custom_functions changes.

<a href="http://delicious.com/save" onclick="window.open('http://delicious.com/save?v=5&noui&jump=close&url='+encodeURIComponent(location.href)+'&title='+encodeURIComponent(document.title), 'delicious','toolbar=no,width=550,height=550'); return false;" id="delicious">Bookmark this</a>

For StumbleUpon, the CSS principle stays the same but the custom_functions changes.

<a href="http://www.stumbleupon.com/submit?url=<?php the_permalink(); ?>&title=<?php the_title(); ?>" id="stumbleupon" target="_blank">Stumble</a>

AND DON’T FORGET!
You are WELCOME to use the images I have made for YOU! In fact, if you want me to make others, I will!

Here are the ones I can make:

• AIM
• Apple
• Bebo
• Blogger
• BrightKite
• Delicious http://thesistutor.com/wp-content/uploads/2009/07/deliciousicon.png
• DesignFloat
• Digg http://thesistutor.com/wp-content/uploads/2009/07/diggicon.png
• Dopplr
• Flickr http://thesistutor.com/wp-content/uploads/2009/07/flickricon.png
• FriendFeed http://thesistutor.com/wp-content/uploads/2009/08/friendfeedicon.png
• Gamespot
• Google
• GoogleTalk
• Last.fm
• LinkedIn http://thesistutor.com/wp-content/uploads/2009/07/linkedinicon.png
• Mixx
• MobileMe
• MySpace http://thesistutor.com/wp-content/uploads/2009/07/myspaceicon.png
• NetVibes
• NewsVine
• OpneID
• Picasa
• Plurk
• Posterous http://thesistutor.com/wp-content/uploads/2009/07/posterousicon.png
• Reddit
• Skype
• StumbleUpon http://thesistutor.com/wp-content/uploads/2009/07/stumbleuponicon.png
• Technorati
• Tumblr
• Viddler http://thesistutor.com/wp-content/uploads/2009/07/viddlericon.png
• Vimeo http://thesistutor.com/wp-content/uploads/2009/07/vimeoicon.png
• Virb
• Windows (though I won’t be happy)
• WordPress
• Yahoo
• YahooBuzz
• Yelp http://thesistutor.com/wp-content/uploads/2009/07/yelpicon.png
• Youtube http://thesistutor.com/wp-content/uploads/2009/07/youtubeicon.png

How To Get Your Icon

In order for me to make an icon you may either leave me a comment on this post or send me an email by clicking the little mail image to the left of the screen.

Don’t Forget To Pick Up Your Copy Of Thesis!

Also, help keep Thesis Tutor alive by donating!