You can also combine this with the style selection of your skin. So if you have a dark style you can make sure that the black version of the bar is used and if you have a light style you can make sure that the white version is used. Here's an example of how to do this:
Then you would override the background-image property for #jalbumwidgetcontainer (the first styled defined in the examples). So if you put a blue widgetsbg.png in the styles/Blue directory you would add something like this in your widgets-blue.css (which also should go in the styles/Blue directory):
Thanks for the update and the two zip files.
I have tried to use my own widgetsbg.png image, modifying one of the original images, but I seem to loose the transparency. There are a load of options when saving png's, is there a particular setting that needs to be used? Having said that though, I notice that most new widget backgrounds are now a solid colour, rather than transparent.
Anyway, I can now make a better customised widget colour scheme than I've done before.
I found out how to use a transparent png image (easiest way is to use PNG24 rather than PNG8) but it turns out not all browsers support transparent PNGs yet!) and it can give a really nice multi-shaded background effect.
I've updated my Notables skin to allow the use of custom widget colours/images - will be releasing it soon. Thanks to everyone who has helped me.
IE6 doesn't support transparent PNGs, but all modern browsers do (and also IE7). We are no longer officially supporting IE6 on our own site (and recommend anyone still using it to either switch or to upgrade), when we first built the widgets we were still supporting it (so that's why we aren't using transparent PNGs in the widget bar).
_jaWidgetBarColor = "white";
To accomplish this, I did the following:
In each style's css file that requires a white widget bar, add: