Archives for 

coding

How to style the WordPress Jetpack Twitter Widget

On millions of WordPress sites running the latest twentytwelve theme and automattic’s Jetpack the Twitter widget looks extremely crappy, just surf around:

image

… because nobody wants to spend the 5 minutes it takes to style it … so … I took 5 minutes for the widget in my sidebar because it irritated me:

image

I do realize that it needs a lot more finishing and that the UTF8 symbols are not supported on a lot of devices … but … for the 1 visitor a day on my blog… do I care enough to spend more time?

Here is the CSS code, if you have some time to style this better, please add the link to your improvements in the comments :)

.widget_twitter {-moz-border-radius:10px;border-radius:10px;border: solid 2px #ccc;padding:4px;background-color:#00acee;color:#fff;}
.widget_twitter ul.tweets li,  .widget_twitter ul.tweets li a {border-bottom:dashed 1px #fff;font-size:12px;margin-bottom:0px;color:#fff;text-decoration:none;}
.widget_twitter h3,.widget_twitter h3 a
  {font-size:13px;text-decoration:none;color:#00acee!important;background-color:#fff;-moz-border-radius:5px;border-radius:5px;padding-left:5px;letter-spacing:3px;}
.widget_twitter h3 a:before {content: url('http://www.google.com/s2/favicons?domain=www.twitter.com');}
.widget_twitter h3 a:after {content:' \2669 \266A \266B \266C';}