Widgets Opacity

Hi blang13,

There are a couple of ways to achieve this in the attributes, depending on the required effect. The following will affect the entire widget, including any text or other content:

opacity: 0.4;
filter: alpha(opacity=40); /* For IE8 and earlier */

If you want just the background to be opaque then you will need to clear any background colour you have set in the theme options of the widget and use this rgba method instead.

    background: rgba(200, 54, 54, 0.5);
    -pie-background:  rgba(200, 54, 54, 0.5); /* IE8 and earlier */
    behavior: url(PIE.htc); /* IE8 and earlier */

With this the first three numbers are for the colour and the last for the opacity.

You can get the rgba values for your selected theme colour from here

http://www.hexcolortool.com/

If you have more than one widget you wish to do this to then you would be better off assigning the affected widgets a common class name and applying the CSS through Appearance->Custom CSS.

.mywidgetclass {
    background: rgba(200, 54, 54, 0.5);
    -pie-background:  rgba(200, 54, 54, 0.5); /* IE8 and earlier */
    behavior: url(PIE.htc); /* IE8 and earlier */
}

Let us know how you get on

Magus