CSS: styling a Twitter feed

In this post I will show you how to style a Twitter feed with CSS. To fetch the Twitter feed, we'll use the jQuery's Tweetable plugin , but you can use a server-side approach as well (as explained in this post). Let's start with our basic markup:

<div id="tweets">
 <h3>Twitter</h3>
 <div id="tweets-content">
   <!--tweets here-->
 </div>
</div>

Our heading will have a Google web font as its default font, so the first thing we have to do is to reference our web font in our head section, just before the main styles of our demo:

<link href='http://fonts.googleapis.com/css?family=Permanent+Marker' rel='stylesheet' type='text/css' />

In this case, we're using the Permanent Marker web font. Now we have to initialize our JavaScript code, just before the closing body tag:

<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.tweetable.js"></script>
<script type="text/javascript">
$(function() {
  $('#tweets-content').tweetable({
    username: 'yourtwitterusername', 
    time: true, 
    limit: 5
  });
});
</script>

Just set the username and limit to the values you want and you're done. Finally, we can add our CSS styles:

body {
 margin: 0;
 padding: 2em 0;
 background: #232323;
 font: 100% Arial, sans-serif;
}

#tweets {
 width: 300px;
 padding: 140px 1em 1em 1em;
 background: #fff url(twitter.png) no-repeat 50% 10px;
 border-radius: 12px;
 color: #000;
 margin: 0 auto;
}

#tweets h3 {
 margin: 0;
 padding: 10px 0;
 text-align: center;
 font: 2em 'Permanent Marker', sans-serif;
 color: #232323;
}

#tweets-content {
 width: 90%;
 margin: 0 auto;
}

#tweets-content ul {
 margin: 0;
 padding: 0;
 list-style: none;
}

#tweets-content ul li {
 margin-bottom: 0.5em;
 line-height: 1.3;
 padding-left: 11px;
 background: url(arrow.gif) no-repeat 0 4px;
}

#tweets-content ul li a {
 color: #a40;
}

#tweets-content ul li small {
 display: block;
 font-style: italic;
}

We've set a background image on our tweets container and a marker on each list item generated by our jQuery plugin. This plugin automatically converts plain text URLs into HTML links, so we've also specified some styles for our links. Finally, the date of each tweet is wrapped within a small element, so we've turned this element into block-level elements to make them appear on a new line and changed their font style to italic. You can see the demo below.

Demo

Live demo