WordPress Project Bars

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

65%

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

50%

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

65%

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

35%

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 :).

3 Responses to “WordPress Project Bars”


  1. 1 billieryder October 20, 2010 at 1:46 pm

    Thanks for this. I managed to figure out how it worked and it worked perfectly!


  1. 1 Progress Bars subdued! | Billie's Ongoing Saga Trackback on October 20, 2010 at 1:57 pm

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s




Project Status


WWII Project First Release

80%


B-tech Buildings Five

20%


Design Victorian era City

15%


Something Different

5%


Enter your email address to follow this blog and receive notifications of new posts by email.

Join 105 other followers

Content Released Under

Creative Commons License
This work is licensed under a Creative Commons Attribution-NonCommercial 3.0 Unported License.
Please Attribute to Sirrob01 with a link back to my blog

%d bloggers like this: