Sirrob01

So I was hunting around for some project bars to provide a rough graphical representation of the completion stage of my top 4 current projects (progress meters). Unfortunately I couldn’t find a widget that was available on wordpress (did I miss it?).

I spent a fair chunk of time exercising my google-fu and stumbled upon this site:

CSS Global Progress Bar

Thinking all my problems were solved I attempted to upload the solution to a sidebar text widget…no good, seemed the text widget would only accept inline css. I spent an hour or so rewriting the above solution so that it was fully contained inline. I thought for sure it’d work this time but it would appear wordpress filters all styles from dl, dt and dd tags…Frustrating as other tags are allowed styles but apparently not those 3 or the em tag (query sent to technical support). I really wanted a solution now so I spent another hour playing around with the code replacing the above tags but trying not to destroy the look of the bars and got some working css code:

I did a few versions of the final code as I wasn’t sure what I’d use,  I then ended up needing a customized one anyway as my sidebar is a bit of a funny size;  examples below:

Stock Bar

Stock Bar
<p style=”margin:0;padding:0;”>Blue Bar
<div style=”margin:0;padding:0;width:216px;height:41px;background:url(bg_bar_25.gif) no-repeat 0 0;position:relative;”>
<span style=”position:absolute;display:block;width:200px;height:25px;background:url(bar_red_25.gif) no-repeat 0 0;top:8px;left:8px;overflow:hidden;text-indent:-8000px;”>
<div style=”position:absolute;display:block;width:200px;height:25px;background:url(bg_cover_25.gif) repeat-x;top:0;left:130px”>65%</div>
</span></div></p>

Narrow Bar

Narrow Bar
<p style=”margin:0;padding:0;”>Small Blue Bar
<div style=”margin:0;padding:0;width:216px;height:23px;background:url(http://somewhere/bg_bar_15_196.gif) no-repeat 0 0;position:relative;”>
<span style=”position:absolute;display:block;width:200px;height:15px;background:url(http://somewhere/bar_blue_15.gif) no-repeat 0 0;top:4px;left:8px;overflow:hidden;text-indent:-8000px;”>
<div style=”position:absolute;display:block;width:200px;height:15px;background:url(http://somewhere/bg_cover_15.gif) repeat-x;top:0;left:130px”>65%</div>
</span></div></p>

Short Stock Bar

Short Stock Bar
<p style=”margin:0;padding:0;”>Blue Bar
<div style=”margin:0;padding:0;width:108px;height:41px;background:url(bg_sbar_25.gif) no-repeat 0 0;position:relative;”>
<span style=”position:absolute;display:block;width:100px;height:25px;background:url(bar_blue_25.gif) no-repeat 0 0;top:8px;left:4px;overflow:hidden;text-indent:-8000px;”>
<div style=”position:absolute;display:block;width:100px;height:25px;background:url(bg_cover_25.gif) repeat-x;top:0;left:65px”>65%</div>
</span></div></p>

Short Small Bar

Short Small Bar
<p style=”margin:0;padding:0;”>Blue Bar
<div style=”margin:0;padding:0;width:108px;height:23px;background:url(bg_sbar_15.gif) no-repeat 0 0;position:relative;”>
<span style=”position:absolute;display:block;width:100px;height:15px;background:url(bar_blue_15.gif) no-repeat 0 0;top:4px;left:4px;overflow:hidden;text-indent:-8000px;”>
<div style=”position:absolute;display:block;width:100px;height:15px;background:url(bg_cover_15.gif) repeat-x;top:0;left:65px”>65%</div>
</span></div></p>

You can grab an example zip from here. I suspect I’ve butchered good css and html practice but it works so that’s all I really wanted but feel free to take what i’ve done and correct the code. As you can see it’s working on the side bar of my blog so I’m counting this one as a win :).