How to change the color/size of one progress bar

0
votes

I'm pretty new to jQuery-UI, but I love what I see so far.

I am using the 'blitzer' theme (as I needed red progress bars) and I have 4 progress bars side-by-side on one page. Now my PM wants one of them to be green, and bigger than the rest. I looked around the provided theme CSS but couldn't find the right tag to tinker with. Can anyone post a short code of 2 progress bars with different sizes/colors side by side?

Bonus question: I was asked to print the PB's percentage in the PB itself - no biggie - I just added a label inside the div. The problem is the text in the label is colored white, so if the PB is empty or half-empty, the text becomes invisible. Is there any way to control the background color of the PB, or is it a given inside a theme?

Thanks a lot!
Guy

2
jquery-uiprogress-bar
I ended up writing my own progress bar, made of 2 DIVs - but it was easier than configuring all those classes and images. Thanks both for your assistance. – Traveling Tech Guy

2 Answers

0
votes

This is how the bars are set up, so modify the classes inside them.

<div class="ui-progressbar ui-widget ui-widget-content ui-corner-all">
   <div style="width: 37%;" class="ui-progressbar-value ui-widget-header ui-corner-left"></div>
</div>

(Its at the bottom of the badge)

Modify ui-progressbar and ui-progressbar-value.

0
votes

Traveling Tech Guy:

If you look in the css folder of your jQueryUI download, you will find a theme folder; mine is called ui-lightness, yours is probably called ui-blitzer. Go into that folder, and then into the images folder. There, you will find some image files that start with the letters ui-bg_diagonals and ui-bg_gloss. These are the images that drive the progress bars. You should be able to add some images from another theme that are the colors you want, which will drive your other status bars.

In addition, there is a css entry called .ui-widget-overlay that references the image ui-bg_diagonals-thick_20_666666_40x40.png, which I think is the image that actually drives the progress bar. You will have to hack the css so that you can add a new class that references your new image in the other progress bar; I haven't figured out how to do that yet.