Progressbar color

Is there anyway that I could change the standard color (green) of the progressbar (widget) to a gradient from red-to-green, where 0 would red and 100 would be green? Ideally, I would want to change the background of the progressbar to this gradient, and the actual progressbar itself to a transparent white of lets say 50%. Any tutorial or explanation would be much appreciated!
2 answers

It is possible to change the background. Standard the background is an image that repeats.

One option is to change the background image in Photoshop or another program. A second option is to use a different background color.

Use the following class:

.progressBarValue {
background: #color;


The third option is to use CSS3 Gradient (will not work in IE, not even IE9).


It is doable but you would have to dive into the widget code a bit. You can unpack the progressbar.mpk just like a zip to get to the code.

All the widget does is receive a value between 0-100 and increases the size of the green progress bar based on that.

You can change the jpgs used for the bar and the background to change those statically or you could use CSS to set color/transparency based on the value.