• 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

BassMan

Well-known member
#1
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:
PHP:
#content {
opacity: 0.95;
}
How can I achieve that?
 

Russ

Well-known member
#2
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.
 

BassMan

Well-known member
#3
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.
 

Russ

Well-known member
#5
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.
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.

Screenshot_2.jpg


Just a FYI as it's easy to-do with XenForo style properties :D
 

Amaury

Well-known member
#6
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.

View attachment 63858


Just a FYI as it's easy to-do with XenForo style properties :D
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?
 

Russ

Well-known member
#7
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?
XF by default chose to do that, check the xenforo_popup.css:

Code:
.Menu .primaryContent
{
   background-color: {xen:helper rgba, @primaryContent.background-color, 0.96};
}

.Menu .secondaryContent
{
   background-color: {xen:helper rgba, @secondaryContent.background-color, 0.96};
}
 

Amaury

Well-known member
#8
XF by default chose to do that, check the xenforo_popup.css:

Code:
.Menu .primaryContent
{
   background-color: {xen:helper rgba, @primaryContent.background-color, 0.96};
}

.Menu .secondaryContent
{
   background-color: {xen:helper rgba, @secondaryContent.background-color, 0.96};
}
Just change 0.96 to 1 and it'll be good to go, right?
 

mistypants

Well-known member
#9
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!).
 

Amaury

Well-known member
#10
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!).
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?
 

BassMan

Well-known member
#12
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!).
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.