How do you style the mybloglog widget?

[kingjacob]

I had thought putting the widget inside a shortened div would cut off the text at the bottom of the widget but I was wrong. So does anyone know how to style it so that all you have is the pictures, kinda like how johncow has.

[SarahG]

When you go into MBL and click on the Get widget and generate the javascript code to display your recent visitors on your site, below it gives you example XHTML markup for you to then target in your CSS. The code is below

Example XHTML Code

<table cellspacing='0' cellpadding='0' id='MBL_COMM'>
<tr><td colspan='2' class='mbl_h'>Recent Readers</td></tr>
<tr id='tr1'>
<td id='tdd11' class='mbl_img'><img /></td>
<td id='tdd21' class='mbl_mem'><a href='#'></a></td>
</tr>
<tr id='tr2'>
<td id='tdd12' class='mbl_img'><img /></td>
<td id='tdd22' class='mbl_mem'><a href='#'></a></td>
</tr>
<tr id='tr3'>
<td id='tdd13' class='mbl_img'><img /></td>
<td id='tdd23' class='mbl_mem'><a href='#'></a></td>
</tr>
<tr id='tr4'>
<td id='tdd14' class='mbl_img'><img /></td>
<td id='tdd24' class='mbl_mem'><a href='#'></a></td>
<tr id='tr5'>
<td id='tdd15' class='mbl_img'><img /></td>
<td id='tdd25' class='mbl_mem'><a href='#'></a></td>
</tr>
</table>

Example CSS Override

body table#MBL_COMM {border:2px solid red;}
body table#MBL_COMM td.mbl_img {background:green;}
body table#MBL_COMM img {border-color:blue;}


Also, the very bottom part of that code you can see by highlighting the actual MBL output and then view the selection source and you'll get

<tr><td colspan="5" class="mbl_fo_hidden" onclick="gU(2);"><a href="http://www.mybloglog.com/buzz/community/stuffbysarah/" target="_top">View Reader Community</a></td></tr>
<tr><td colspan="5" class="mbl_fo_hidden" onclick="gU(5);"><a href="http://www.mybloglog.com/buzz/yjoin/?ref_id=2007010716522205&amp;ref=w" target="_top">Join this Community</a></td></tr>
<tr><td colspan="5" class="mbl_fo_hidden" onclick="gU(3);"><a href="http://www.mybloglog.com/" target="_top">(provided by MyBlogLog)</a></td></tr></tbody></table>

So here you could use the mbl_fo_hidden class on the tds and set it to no visibility or display none.

[kingjacob]

Sorry,Sarah for some reason that went straight over my head. Would the css look like body table#mbl_fo_hidden {display:none;}

[SarahG]

No, the mbl_fo_hidden is a class. Personally I'd just do

td.mbl_fo_hidden { display: none; }

Alternatively, if John Chow does it how you like, why not look at his CSS ;)

[kingjacob]

No, the mbl_fo_hidden is a class. Personally I'd just do

td.mbl_fo_hidden { display: none; }

Alternatively, if John Chow does it how you like, why not look at his CSS ;)

Im not sure what I did but it works now thanks.:rockon:

[deronsizemore]

I've been meaning to make a post about it for a while now.

Feel free to use the html/css I'm using on my site to style your own.

[lilmissjenny]

I wanted to know how to do this with my new theme. Thanks!