Recent Tweets CSS Makeover

Played a bit with styles for the Recent Tweets widget from Twitter Tools.  I just wanted to give it some pizazz.  To do this I made the Tweets it shows look/behave somewhat like they do on on the Twitter home page.  First you’ll notice that I replaced the bullets with a smaller version of the social media icon I used (see the top right of the blog).  Then I placed a very grey one pixel line above list item in the widget.  And finally I set each Tweet so that when the mouse hovers over it it gets a darker grey background.

The CSS code looks like this:

/* Twitter Tools */
.aktt_tweets ul li { font-size: 85%; list-style-image: url(tweet.png); border-width: 0; border-top: 1px solid #EEEEEE; }
.aktt_tweets ul li:hover { background-color: #F7F7F7; }
.aktt_tweets .aktt_more_updates { list-style-image: none; list-style-type: none; font-size: 75%; font-weight: bold; font-variant: small-caps; }
.aktt_tweets .aktt_more_updates:hover { background-color: transparent; }

Edit: Forgot to mention how the syntax highlighting block above works.  This is done using the WP-Syntax plugin which uses GeSHi style syntax highlighting.  Basically it involves specifying a language in your <pre> block. For example the block above is using <pre lang=”css”>.