Notice: This thread is over two years old; the information may be outdated. Please consider creating a new thread if you require free support. If you have an active SiteOrigin Premium license, you can email our premium support desk at [email protected].
How can I change the opacity of the background of some widgets? Can I do this directly in the Attributes of the Widget Style (directly in the settings of the Widget)? If yes, how? Thank you!
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:
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
Hi Blang13
Did you have this solved? Kindly confirm
@Magus much appreciated
Cheers
Hi Magus,
sorry for late response. Normally I get the thread-messages in my Inbox. This time, it seems, it did not work.
Thank you so much for your feedback. I just tried it out and everything worked really great. Yipieeeeehhhh!
Cheers :-)))
Perfect :-)
Always feel free to open a new thread whenever you require support
Cheers