Content background clear value

[sydneyh]

Hi guys!

I have been lurking like smeagle on the forums but unfortunately I couldn't find any info regarding this.

I would like to have my contentpage colorless so you can see the background except for the threads/nodelist/advanced forum statistics/ portal-home promoted threads etc etc.

I tried some coding in extra.css but i fail horrible with it.
Only the discussion list turns out non-seethrough.

.discussionListItem.visible, .discussionListItem.visible .posterAvatar, .discussionListItem.visible .stats .categoryListItem.visible .nodeList .nodeInfo, .discussionList .discussionListItem, .discussionListItem:hover .posterAvatar, .discussionListItem .stats, .searchResults .searchResult, .profileContent .searchResult {
    background: rgb(240, 240, 240);
    font-style: verdana;
}

 

[Shelley]

Try adding to the background where 0.4 is your opacity/transparency control

background: rgb(240, 240, 240, 0.4);

 

[sydneyh]

Try adding to the background where 0.4 is your opacity/transparency control

background: rgb(240, 240, 240, 0.4);

Hi Shelley!

I'm sorry I think I explained it wrong.
I ment the codes failed .

What I was kinda aiming for is have the these areas marked with red x to be transparent, so I can see the "body" background. Xenporta got a box I could check called Break from content container but that isn't working either sorry for bothering u btw I feel always uneasy when I ask stuff .

 

[MagnusB]

As it seems you have a solid color as background, it would be easier to just set the same background color to #content.

 

[sydneyh]

As it seems you have a solid color as background, it would be easier to just set the same background color to #content.

Hi thanks for replying!
Im using a background wallpaper custom made for us with different colors and shadow.

Btw I tried to play for a few hours with the color palette and clear the @contentbackground with no values but then I the result I want. Except the forum nodelist turns the same as well D:.

 

[MagnusB]

Well, the color pallet will change the color many places, so it would be best to tackle it where you want to change it. If I am not mistaken, you want only the content wrapper to have a transperant background, so try adding background: transparent to #content.

 

[sydneyh]

Well, the color pallet will change the color many places, so it would be best to tackle it where you want to change it. If I am not mistaken, you want only the content wrapper to have a transperant background, so try adding background: transparent to #content.

Hi MagnusB!

Yes I tried that as well in style properties -> General -> Content and made content background transparent .
Didn't work yesterday.
This is my values atm in @content.

 

[MagnusB]

Do you have a link I can take a look at?

 

[sydneyh]

yes www.skilladept.com
change style from ocean blue to test.

 

[MagnusB]

Is it something like that you want? I only changed the background rule of #content .pageWidth

 

[sydneyh]

Is it something like that you want? I only changed the background rule of #content .pageWidth

Wow yes that is what I need :O
Im gonna try it out thank you , but isn't the correct background settings setted already ? @ content no values?

*edit*

 

[MagnusB]

You can change it in public.css or you can add this to extra.css:

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

EDIT:
You will also have problems with white artifacts on the border radius on the xenporta date block. There is no real way to get around this other than removing the border radius.

 

[sydneyh]

You can change it in public.css or you can add this to extra.css:

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

EDIT:
You will also have problems with white artifacts on the border radius on the xenporta date block. There is no real way to get around this other than removing the border radius.

Thank you so much for your time !
Couldn't figure it out I really need to learn more about basic CSS.
Again thank you very much for your time!

*edit*
Yes saw the date boxes.
I will probably remove them.

 

[MagnusB]

Wow yes that is what I need :O
Im gonna try it out thank you , but isn't the correct background settings setted already ? @ content no values?

*edit*

I see you changed your post a bit, so to answer the question about content, it seems a child of content, .pageWidth had a background color set. I keep forgetting that xf has this "fixed width class". #content is everything between the navigation bit and the footer, entire width. #content .pageWidth is basically the wrapper that contains everything, like node list etc. Childs will only inherit from their parents if there is no equivalent rule set for the child, or you have specified it to inherit, so since .pageWidth had a background set, the one on content had was not inherited.

Thank you so much for your time !
Couldn't figure it out I really need to learn more about basic CSS.
Again thank you very much for your time!

Codeacadamy has some decent tutorials, though I have not use the html / css ones.

 

[sydneyh]

Very useful information MagnusB.
Thank you for the clear explanation and I will definately check the Code academy out.

 

[MagnusB]

Be prepare to rage a bit though, they interpret your answers very literal over there, some times it is just something as simple as forgetting to uppercase one letter and you will pass

BTW, CSS is very straight forward. When I started out running a website, I forced my self to understand what was happening with firebug and then slowly understanding what everything was doing. I like to think I don't know that much CSS, I am just good at Firebug

 

[Jake Bunce]

You can change it in public.css or you can add this to extra.css:

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

EDIT:
You will also have problems with white artifacts on the border radius on the xenporta date block. There is no real way to get around this other than removing the border radius.

That's exactly right. This CSS definition removes the duplicate content background which allows you to implement transparency.

It sounds like you got it working already but I will link this anyways:

http://xenforo.com/community/threads/background-opacity.22729/