Do you ever wonder how people customize their twitter badges with custom text, colors, images and layouts? I'm not a big fan of the default widgets and bland badges that twitter offers on the official website, so I went snooping around the net to find a solution and end shitty looking tweets for good :] .
Suprisingly, altering and customizing your twitter badge is pretty easy! All you need is some styles for twitter inserted in your website stylesheet. some javascript for your tweets, and your good to go!
Step One: Create Your Twitter Style Codes In Your Stylesheet
Either between the <style> </style> codes or in your "stylesheet.css" for your website. Here are the styles we will insert. I will explain them in further detail below:
The list in order: we have a div box around yout tweets, your tweet updates container and properties, the tweet text properties, tweet link properties, and what happens when your mouse hovers over a link. In the example above iv'e given you a simple template you can customize and get a feel for how you can change it to your liking, and what each style will do. Heres a few tricks to get you started:
"list-style: none" will get rid of the bullet point infront of each tweet
"background: url(yourcustombulletimage.gif)" : place that in "ul#twitter_update_list li" to create your own custom bullet image beside each tweet. place that in "#twitter_div" to make a background image for your whole twitter badge.
Step Two: Put The Java Twitter Code In Your Html Page With The Style Id's
Now code in the desired location between the <body> </body> tags. Very simple and easy! It looks like this:
Just make sure to change "twitterusername" to your personal twitter id, and "callbackcount=3" to the desired number of tweets you want displayed on your page.
Done! That was pretty easy, huh? Hope this helps you out :)
hello there
ink ablaze is my personal blog of adventures. and a haven for my art scans, resources, graphics, and tutorials for web design. enjoy!
