Styling an html Twitter Widget for your website with CSS

You can display the 'Teets' from your Twitter account on your own website by adding an html widget . Visitors can follow you from your own site rather than from your Twitter page.

Unfortunately, Twitter have removed the html option from their list of widgets. If you already have the original code and want to style the display using CSS, you can make the display fit your own site design.

If you didn't get the code before Twitter removed it, you can still use this method. Here is the code you need:

==================================================================================
<div id="twitter_div">
<h2 class="sidebar-title">Twitter Updates</h2>
<ul id="twitter_update_list"></ul>
<a href="http://twitter.com/yourtwittername" id="twitter-link" style="display:block;text-align:right;">follow me on Twitter</a>
</div>

Replace the yourtwittername with your own twitter identity and the number 5 with the number of tweets you wish to display.

Place your html Twitter widget in your web page in the following way:

First: take the first section of code between <div id="twitter_div">.... and ....</div> and place this on your web page where you would like the Twitter feed to display.

Next put the call to the javascript at the very bottom of the page just below </body>:

=================================================================================
<script type="text/javascript" src="http://twitter.com/javascripts/blogger.js"></script>
<script type="text/javascript" src="http://twitter.com/statuses/user_timeline/yourtwittername.json?callback=twitterCallback2&count=5"></script>

==================================================================================

This is important! If you put the javascript with the html for the widget, then if Twitter is offline (and it often is!) your page would not load. Putting it before the </body> means that everything else on your web page will have loaded before the javascript calls the Twitter widget.

Here's a sample html Twitter widget styled with CSS:

follow me on Twitter

Here's the fun part - time to style the html Twitter widget with CSS

Below are 2 examples of CSS for styling the widget.

#twitter_div {} Styling this allows you to give the feed a background colour, or even a background image.

#twitter_update_list li span { } << is where you style the comments you post on Twitter

#twitter_update_list li span a{ } << styles the link to the person

#twitter_update_list li a { } << styles the line showing how long ago it was posted

#twitter-link {} << styles the link to Twitter

Html Twitter Widget Style 1 - Styling as the example above

This has a background image. Notice it only displays 1 'Tweet'.

/*-----------------------------Sample 1 - CSS for styling Twitter with image as background-------------------------*/

#twitter_div {
width: 485px;
height:232px;
padding: 0px;
background-color: #ffffff;
border: solid 1px #999999;
font-family:Arial, Helvetica, sans-serif;
margin-top:10px;
background-image: url(../images/your background image);
background-repeat: no-repeat;
background-position: left top;
}
ul#twitter_update_list { width: 280px; padding: 0px; margin:30px 0 0 175px; overflow: hidden; }

ul#twitter_update_list li { width: 280px; padding: 5px 0 5px 0; border-bottom: solid 1px #9BBE32; list-style: none; display: block; color:#666666;}

#twitter-link{ margin:10px 50px 0 0;}
.sidebar-title {
color:#ffffff;
margin-bottom: 40px;
margin-left: 208px;
font-size: 14px;
}

ul#twitter_update_list li a { color:#9BBE32; border-bottom: dotted 1px; text-decoration: none; }
ul#twitter_update_list li a:hover { color: #CA0A6C; border-bottom: solid 1px; }
#twitter-link {color:#cccccc;}

/*----------------------------------------------End Sample 1 - CSS for styling Twitter --------------------------------------*/

Html Twitter Widget Style 2 - Simple Styling

This example has a header image but no background to the feed.

You can see thisTwitter widget example here. (Right-hand column of the page)

/*--------------------------------------------------Sample 2 CSS for styling Twitter -----------------------------------------*/
#twitter_div {
width: 250px;
padding: 10px;
background-color: #ffffff;
border: solid 1px #999999;
font-family:Arial, Helvetica, sans-serif;
margin-top:10px;
background-image: url(../images/your header image);
background-repeat: no-repeat;
background-position: left top;
}
.sidebar-title {
color:#9BBE32;
margin-bottom: 40px;
margin-left: 58px;
font-size: 14px;
}

ul#twitter_update_list { width: 250px; padding: 0; margin: 0; overflow: hidden; }

ul#twitter_update_list li { width: 250px; padding: 5px 0 5px 0; border-bottom: solid 1px #9BBE32; list-style: none; display: block; color:#666666;}

ul#twitter_update_list li a { color:#9BBE32; border-bottom: dotted 1px; text-decoration: none; }

ul#twitter_update_list li a:hover { color: #CA0A6C; border-bottom: solid 1px; }

#twitter-link {color:#cccccc;}

/*-------------------------------------end sample 2 CSS for styling Twitter ------------------------------------------------*/

Call 01780 740893 if you'd like help adding and styling a Twitter widget to your own website.