I should really have been filling out job applications this morning, but got carried away with fixing this issue having acccidentally come across a site that was clearly doing almst exactly what I wanted. A bit of searching after that led me to Oliver Brechét’s page, which contained the CSS, JQuery and brief explanation of how to apply the “widget”.

Although there is a WordPress version, these widget’s tend to knacker any preferred settings that I’ve already written in to the underlying PHP, so I added this by linking in the PHP itself, rather than using the WP widget.

I don’t quite follow 100% of the JQuery script (another item on my to do list!) but could garner enough of what was going on in it to rewrite it to fit my own, rather more sparse, needs. This also meant that a lot of the included CSS was unnecessary so could just be copied in to my main CSS sheet and adjusted for appearance (no header, no separator lines, no borders and no background). I imagine this is against Twitter’s new usage requirements and that I will thus soon be excommunicated…

Main change was to the fetchTweetsData function, edited down as follows, preceding lines to the first, italicised one unchanged:

obj.finalText = $([linkURLs(obj.writeTweet, obj.entities)]).linkUser().linkHash()[0];
obj.header = '';
obj.avatar = '<div class="tweet"><div class="avatar"><a '+rel()+' '+target()+' href="'+obj.userUrl+'"></a></div>';
obj.textTweet = '<div class="mt_text">'+obj.finalText;
obj.footer = '<div class="time">'+obj.tweetTime+'</div></div><div style="clear:both;"></div></div>';
return obj;

Consequently, the only CSS used was:

.tweets {
 max-width:245px;
 max-height:150px;
 font:13px/17px "Tahoma",Helvetica,Arial,sans-serif;
 color:#CCC;
 background-color:transparent;
 margin:auto;
}

.tweets a {
 color:#d08702;
 text-decoration:none;
}

.tweets a:hover {
 color: #f7d274;
}

.tweets .tweet {
 padding-bottom: 15px;
 text-align: left;
}

.tweets .tweet .time {
 float:right;
 color:#999;
 font-size:11px;
 padding-left: 10px;
}

.tweets .tweet .avatar {
 display:block;
 float:left;
 background-image: url(images/tweet.png);
 height: 15px;
 width: 21px;
 background-repeat: no-repeat;
 background-position: top;
}
.tweets .tweet .avatar a {
 display:block;
 height: 15px;
 width: 21px;
}

.mt_text {
 padding-left:25px;
}

Excellent work, Mr Brechét, and thanks!

[Original code that inspired this and has slightly different, or broader, functionality, is here]