I'm using the html twitter widget from twitter (it's not an actual widget, it's html that's pasted into a text widget), and I'm having an issue with the @replies, where the user's name, which is a link, appears on it's own line. I understand that this is because the widgets for the theme are displayed as block rather than inline, but I haven't been able to figure out how to change it for this particular widget. Is there a way for me to do this?

Here's the html from my text widget:

<div id="twitter_div">
<h2 style="display: none;" ></h2>
<ul id="twitter_update_list"></ul>
<a href="http://twitter.com/keriflur"><img alt="" src="http://www.siahdesign.com/images/twit2.gif" width="144" height="30" /></a>
</div>
<script type="text/javascript" src="http://twitter.com/javascripts/blogger.js"></script>
<script type="text/javascript" src="http://twitter.com/statuses/user_timeline/keriflur.json?callback=twitterCallback2&amp;count= 3"></script>

Thanks!

Look into the source code of the browser-rendered page to see the classes and ID that those Javascripts produce then add a CSS Insert

div#id-of-widget li a:link,
div#id-of-widget li a:active,
div#id-of-widget li a:visited,
div#id-of-widget li a:hover {
display: inline;
border-left: none;
padding-left: none;
}

div#id-of-widget li {
border-left: solid 5px #123456;
padding-left: 8px;
}

div#id-of-widget li:hover,
div#id-of-widget li:sfhover {
border-left: solid 5px #654321;
}

And for IE6 which doesn't know li:hover, find in header.php this:

if (document.getElementById("bfa-recent-comments") != null) {sfHover( 'bfa-recent-comments' ); }

and add this after it:

if (document.getElementById("id-of-widget") != null) {sfHover( 'id-of-widget' ); }

I'll change this border-left decoration style to inline for all widgets then only widgets with multi level items such as the pages and the categories widget will have to get a different style, in the next version.

Works perfect. Thanks!

http://thewandergirl.com/