Posts Tagged 'css'

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


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 108 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: