XF 1.3 Node Transparency question

[Harkin]

Hello,

On the forum that I maintain, I've recently adopted using the "opacity" CSS for nodes and all forum messages to help offset the glaring white that previously existed.

I've set the opacity to 80%, and it looks great! The only issue is that images, embedded media and text have the same opacity level. This can be a real problem with bigger images as you can see the forum background through them quite clearly.

After spending some time on the issue, I had read that it's a limitation of CSS where you cannot have a child with greater opacity than its parent, so I'm a bit stuck as to my options here.

The best idea I've thought of so far is to create a transparent PNG and use it as the background image for the nodes - removing the "opacity" CSS altogether in the process - thus allowing all images/text/embedded media to stay opaque. Unfortunately, I'm a bit stuck as to how to accomplish this, or if it is even feasible.

Can someone assist me with this matter? The forum URL is http://vexxgaming.com/forum/, and I have access to a testing site.

Thanks!

 

[Harkin]

Any takers? I could really use some assistance or tips with this.

 

[Harkin]

I have to say that I'm a little disappointed. Good money was paid for this forum. Are there better ways I can get some support if needed?

 

[DEZero]

you need to make a png image maybe 50 by 50 fill it in with the color you want and then tone down the opacity. After that just put it in place as the background-image,( you'll need to set it on repeat), and remove any background-color from the places you want low opacity.

 

[Harkin]

Thank you, I'll give that a try.

 

[Optic]

Hello @Harkin,

I had the exact same issue as you awhile ago.

Solution is to use the CSS3 RGBA to change the background colour, this will allow opacity for the background colour without affecting text/images.

Example:

.sectionMain {
background-color: rgba(255, 255, 255, 0.6);
}

Where 0.6 is the opacity (60%) and the three numbers are RGB values (currently white). You may want to use a hexadecimcal to RGB converter.

 

[DEZero]

Or that, which is a cleaner solution than my application. @Optic