Wordpress Themes - WP Forum at BFA - Changing a widget display from block to inline (Twitter Text Widget)

Wordpress Themes - WP Forum at BFA (http://forum.bytesforall.com/index.php)

- Sidebars & Widgets (http://forum.bytesforall.com/forumdisplay.php?f=14)

- - Changing a widget display from block to inline (Twitter Text Widget) (http://forum.bytesforall.com/showthread.php?t=1566)

Changing a widget display from block to inline (Twitter Text Widget)

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&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

HTML Code:

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:

HTML Code:

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

and add this after it:

HTML Code:

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/