How to change the color/size of one progress bar

Answer 1

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.

Answer 2

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.