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

XF 1.2 Opacity in @content

Discussion in 'Styling and Customization Questions' started by BassMan, Dec 29, 2013.

  1. BassMan

    BassMan Well-Known Member

    I can change the colours in style properties/general/content/background color and it looks how it looks.

    But if I put the opacity in the css box, the whole forum looks transparent. I want only the @content area to be affected, like changing the colours.

    I was trying with this in EXTRA.css, but it's not ok:
    #content {
    How can I achieve that?
  2. Russ

    Russ Well-Known Member

    Are you trying to achieve a slightly transparent BACKGROUND? If so Style Properties -> General -> Page Content -> Edit the background there and add in some opacity there.
  3. BassMan

    BassMan Well-Known Member

    I did, but here's the catch. If I edit the Page Content background color it looks nice, but when I add opacity the whole forum is affected (sidebar, avatars, posts etc.). I don't want that elements to be affected by opacity.
  4. BassMan

    BassMan Well-Known Member


    Added in EXTRA.css:
    #content .pageContent {
  5. Russ

    Russ Well-Known Member

    Just a heads up too if you put the opacity: 0.95 into extra it will have that effect, however if you edit the actual background color, the highlighted green box can add transparency into the color.


    Just a FYI as it's easy to-do with XenForo style properties :D
    BassMan likes this.
  6. Amaury

    Amaury Well-Known Member

    Since we're discussing transparency, despite having everything in the color palette set to one (no transparency) why do the popup menus, such as when hovering over your name, still have a little transparency?
  7. Russ

    Russ Well-Known Member

    XF by default chose to do that, check the xenforo_popup.css:

    .Menu .primaryContent
       background-color: {xen:helper rgba, @primaryContent.background-color, 0.96};
    .Menu .secondaryContent
       background-color: {xen:helper rgba, @secondaryContent.background-color, 0.96};
    Adam K M, BassMan and Amaury like this.
  8. Amaury

    Amaury Well-Known Member

    Just change 0.96 to 1 and it'll be good to go, right?
  9. mistypants

    mistypants Well-Known Member

    For reference, in CSS opacity will affect everything within that div--so if you specify a lowered opacity the background will be semi-transparent, but so will all the text inside of it. If you're looking to just make the background semi-transparent, you should use rgba (which you figured out :)).

    Most people use opacity to create hover effects or some such, imo it's not really good for much else (but you should of course be creative with it!).
    BassMan and Amaury like this.
  10. Amaury

    Amaury Well-Known Member

    Since you brought it up, I know in RGB that R is red, G is green and B is blue, but in RGBA, but what is A?
  11. Brogan

    Brogan XenForo Moderator Staff Member

  12. BassMan

    BassMan Well-Known Member

    Your right. I've decided not to use opacity in background. I doesn't look to good for me too.

    Thanks for help to all who envolved in this thread.

Share This Page