25
Apr

Get yourself a great looking custom Twitter badge

Posted by Nouveller in CSS, Design, Web Design, jQuery

Get yourself a great looking Twtitter badge

Twitter has absolutely exploded over the past few months, it’s all over the radio and TV; even some ‘celebrities’ can’t get enough of Twitter - yes I am refferring to Ashton Kutcher.

With a lot of social experiments like this you need and should want to make it your own, by using a custom Twitter badge. Of course you can already customise your background on Twitter among other things, but what can you do about it outside of the birds nest? Once again CSS (bless those CSS gods up there) is on our side and as the ground work of Twitter is essentially one big list <ul><li></li></ul> it’s dead easy to style up.

Let start with a basic Twitter badge and explanation of the custom CSS

This is what we’re going to create.

View the demo for the Basic Twitter Badge

Download the ZIP which contains the HTML, CSS and jQuery for the custom badge

First we need the worm, or Twitter’s script to get your feed working. The correct place for this is really your <head> but I find the best place is to stick it just before your end </body> tag. I suggest this because for one, the script is coming from a remote site (though you could make it local if you wish) and having it at the bottom of the page will allow the rest of your more important content to load first. Anyway, lets get started and add this in to our page.

HTML

Be sure to take note of src in the second included bit of script. You’ll need to replace BenjaminReid with your own username and change count=5 to the amount of tweets you would like to show on your page.

<script src="http://twitter.com/javascripts/blogger.js" type="text/javascript"><!--mce:0--></script>
 
<script src="http://twitter.com/statuses/user_timeline/BenjaminReid.json?callback=twitterCallback2&amp;count=5" type="text/javascript"><!--mce:1--></script>

The only other bit you need to get it working is the layout HTML below, which is also provided by Twitter.

HTML

<div id="twitter_div">
 
	<ul id="twitter_update_list">
 
 
	</ul>
 
</div><!-- /twitter_div -->

If you’re ever doing this for a client and they can only see the source of your page, instead of the full generated source and they want the page to validate just add <li></li> to the list.

CSS

Now for the magic. Add this into your stylesheet and watch it transform. I’ll explain it line by line below.

#twitter_div { width: 300px; padding: 10px; background-color: #410323; border: solid 1px #5E0F38; }
 
ul#twitter_update_list { width: 300px; padding: 0; margin: 0; overflow: hidden; }
 
ul#twitter_update_list li { width: 300px; padding: 5px 0 5px 0; border-bottom: solid 1px #680441; list-style: none; }
 
ul#twitter_update_list li a { color: #FFFFFF; border-bottom: dotted 1px; text-decoration: none; }
 
ul#twitter_update_list li a:hover { color: #CA0A6C; border-bottom: solid 1px; }

First let’s just look at each element that’s in play. Just reference the colours below to the boxes in the diagram to see what’s going on.

#twitter_div
ul#twitter_update_list
ul#twitter_update_list li
ul#twitter_update_list li a

#twitter_div

The <div> that contains the Twitter is given deep background colour that will stand out off the <body>’s dark grey background and a sharp one pixel border to create a nice contrast. It’s also got ten pixels of padding to keep the list from butting up against the edges.

CSS

#twitter_div { width: 300px; padding: 10px; background-color: #410323; border: solid 1px #5E0F38; }

ul#twitter_update_list

The main list also given a width just for protection, the padding and margin’s have been taken removed to stop the default indentation and the overflow is set to hidden so that we stop something like IE6 kicking out.

CSS

ul#twitter_update_list { width: 300px; padding: 0; margin: 0; overflow: hidden; }

ul#twitter_update_list li

Each list item has had the bullet points removed as they don’t look to great in this case, some padding to spread each item out and a border just to define the end of each one that little more.

CSS

ul#twitter_update_list li { width: 300px; padding: 5px 0 5px 0; border-bottom: solid 1px #680441; list-style: none; }

ul#twitter_update_list li a

The <a> tags are styled up as per the rest of my site with a dotted white border which then joins into a solid pink when rolled over.

CSS

ul#twitter_update_list li a { color: #FFFFFF; border-bottom: dotted 1px; text-decoration: none; }
 
ul#twitter_update_list li a:hover { color: #CA0A6C; border-bottom: solid 1px; }

This should now give you the basic knowledge to style the badge up how you want. I’m going to style up one more and add a little jQuery to highlight each Tweet when’s it’s rolled over.

The sleek jQuery badge

This is the badge, shiny ‘ey?

View the demo for the Sleek Badge

Download the ZIP which contains the HTML, CSS and jQuery

I’ve modified the CSS slightly but the main importance is the addition of the nice lookin’ but simple jQuery.

This will just change the background colours of each individual <li> depending on which on is being rolled.

JavaScript

$(document).ready(function(){		
 
	$('ul#twitter_update_list li').mouseover(function(){
 
		$(this).css({'background-color' : '#b1b1b1'});
 
	});	
 
	$('ul#twitter_update_list li').mouseout(function(){
 
		$(this).css({'background-color' : '#d5d5d5'});
 
	});				
 
});

Author: Nouveller

My name is Benjamin Reid, I live in the UK and keep the magic locked into this site.

Subscribe to the RSS feed some design goodness, get in on the upcoming software give-aways!

This entry was posted on Saturday, April 25th, 2009 at 5:38 pm and is filed under CSS, Design, Web Design, jQuery & tagged with CSS, jQuery, XHTML. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

16 Responses | Make a comment

Nick wrote on May 4, 2009

This is incredibly handy and will come in useful, especially with all the hype surrounding Twitter. I’ll be sure to give this a try! Cheers Ben

Reply
50 Twitter Tools and Tutorials For Designers and Developers | Developer's Toolbox | Smashing Magazine wrote on June 1, 2009

[...] Custom Twitter Badge Tutorial CSS If you’re struggling to get Twitter to suit your website, then this tutorial will show you how to customize the different elements and create your own Twitter badge. View demo here. [...]

Reply
50 Twitter Tools and Tutorials For Designers and Developers | Tasarım,Bilim,Müzik,Kitap,Sanat,Weblog wrote on June 6, 2009

[...] Custom Twitter Badge Tutorial CSS If you’re struggling to get Twitter to suit your website, then this tutorial will show you how to customize the different elements and create your own Twitter badge. View demo here. [...]

Reply
drale wrote on June 23, 2009

Nice guide, I like the color reference box. I don’t like how the time gets wrapped around and think it should be on its own line. It is a single piece of information I believe should not break apart. You can do li span{display:block;} to the tweet which will push the time to a single line.

Reply
- Nouveller wrote on June 26, 2009
  
  Nice call! I’ve actually added that to my sites CSS.
  
  Reply
Creative Web Design wrote on July 6, 2009

Awesome! This is going to be on the frontpage of our new layout… Expecting that to be launched around the end of the month.

Thanks for the code!

Reply
- Nouveller wrote on July 6, 2009
  
  Let me know when it’s there.
  
  Reply
Kira wrote on July 22, 2009

Thanks very much! I’ve been looking for a way to prettify the official Twitter badge, and your instructions and template really helped. Really appreciate it.

Reply
Twitter wrote on August 12, 2009

[...] can override everything with CSS. Link: Get yourself a great looking custom Twitter badge | Nouveller __________________ Jordan Marcotte . Portfolio of Freelance Web [...]

Reply
10 Cool Twitter Custom Button Generators & Badges - Daily SEO blog wrote on August 13, 2009

[...] 5. Create a custom JQuery/CSS custom Twitter badge [...]

Reply
Zean Design Mexico wrote on September 8, 2009

Genial, me ayudara mucho en mis proximos proyects… take you.

Reply
Ryan wrote on September 15, 2009

Thank you so much i literally have been searching for 2 hours to just find a simple twitter feed code thanks.

Reply
Joe wrote on October 6, 2009

worked like a champ! And you made it so clear and simple to execute.
Thanks

Reply
Palmer wrote on January 14, 2010

Hey- thanks for the great script! Just what I needed for a customized Twitter feed for a client’s site.

Reply
- Nouveller wrote on January 14, 2010
  
  Glad you found it useful!
  
  Reply
Mike @ Twitter Designs wrote on February 10, 2010

Hey this is very useful tool especially for those starters on twitter. I’ll try to improve mine using this tips. if you have time try to check my collections too, thanks!

Reply