Background Opacity

[Brendon Meynell]

Hey All,
So I am new to xenforo so please forgive me if this has already been asked and answered (I did attempt to search but it came up with not many relevent threads).

So I am working on my first style and so far have found everything relatively easy. However have come to a sticking point that I was hoping someone may be able to help with.

I am wanting to give my content-background an opacity of 0.4 - however it makes everything (including forum rows etc the opacity) I am attempting to just get the white stuff around everything to have the opacity.

Here is a screenshot of what I am talking about.


So I have the black background (#000000) and would like to keep the white etc where it is and how it is. The only stuff I want to change to have the opacity is the stuff in the grey/black (#333333) rectangles that I have drawn on there.

Is there some sort of code I can put in the additional html sections, or in extra.css that can help me achieve this?

Hopefully I have gone into enough description. Your assistance will be greatly appreciated.

 

[Jake Bunce]

I encountered the same problem when I was messing with opacity. My solution was to use a PNG image for the background, where the image itself has alpha transparency. For example, here is a blank image with 50% opacity that you can use for a repeating background.

 

[Brendon Meynell]

Just to confirm (sorry only brought this software a couple hours ago and don't want to break it) that is for the content background - when i get to that setting I put that as the background?

Sorry - only thing I hate about new software - looking like a complete newbie!

 

[Jake Bunce]

For example:

Admin CP -> Appearance -> Style Properties -> General -> Content



Point it to the location of the image on your server.

And you will likely want to set the background color to be transparent, otherwise it will merely be an opacity layer on top of @content's own solid background color. Some extra CSS may also be required to completely remove the solid background color:

Admin CP -> Appearance -> Templates -> EXTRA.css

#content .pageWidth
{
	background-color: transparent !important;
}

Here is the result (using a background image in Body to really show the opacity effect):

 

[Brendon Meynell]

wow your a legend. That worked thank you so much!