1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

XF 1.3 Node Transparency question

Discussion in 'Styling and Customization Questions' started by Harkin, Aug 25, 2014.

  1. Harkin

    Harkin New Member


    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.

  2. Harkin

    Harkin New Member

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

    Harkin New Member

    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?
  4. DEZero

    DEZero Well-Known Member

    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.
  5. Harkin

    Harkin New Member

    Thank you, I'll give that a try.
  6. Optic

    Optic Well-Known Member

    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.

    .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.
  7. DEZero

    DEZero Well-Known Member

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

Share This Page