Quick Twitter Widget Customization Tip

Posted on Monday, January 31, 2011 01:46 PM by K. Latham

Did you know you can customize the Twitter widget a little? All you need to do is remember to use the !important tag in your CSS.

First wrap the Twitter widget code inside a DIV with an ID tag.

<div id="twitbox1"> ... twitter widget code ... </div>

Next in your stylesheet (CSS) add something like this:

#twitbox1 .twtr-hd, #twitbox1 .twtr-ft {background: url("/img/someimage") top left !important;}
#twitbox1 .twtr-hd h3, #twitbox1 .twtr-hd h4 {background: transparent !important;}

This example puts a background image in the header and footer of the Twitter widget. (See example in previous post)

This should get you started. Happy coding.