Content background clear value

sydneyh

sydneyh

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

Code: 
.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;
}
 
Sort by date Sort by votes
Shelley said:
Try adding to the background where 0.4 is your opacity/transparency control

Code: 
background: rgb(240, 240, 240, 0.4);
Click to expand...
Hi Shelley!

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

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 :p.
example.webp
 
Upvote 0 Downvote
MagnusB said:
As it seems you have a solid color as background, it would be easier to just set the same background color to #content.
Click to expand...
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:.


example2.webp
 
Upvote 0 Downvote
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.
 
Upvote 0 Downvote
MagnusB said:
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.
Click to expand...

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.




example3.webp
 
Upvote 0 Downvote
You can change it in public.css or you can add this to extra.css:
Code: 
#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.
 
Upvote 0 Downvote
MagnusB said:
You can change it in public.css or you can add this to extra.css:
Code: 
#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.
Click to expand...
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.
 
Upvote 0 Downvote
sydneyh said:
Wow yes that is what I need :O
Im gonna try it out thank you:eek: , but isn't the correct background settings setted already ? @ content no values?

*edit*
Click to expand...
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.

sydneyh said:
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!
Click to expand...
Codeacadamy has some decent tutorials, though I have not use the html / css ones.
 
Upvote 0 Downvote
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 :mad:

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 :D
 
Upvote 0 Downvote
MagnusB said:
You can change it in public.css or you can add this to extra.css:
Code: 
#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.
Click to expand...

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

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

http://xenforo.com/community/threads/background-opacity.22729/
 
Upvote 0 Downvote
You must log in or register to reply here.

Similar threads

M
  • Question Question
XF 1.2 Some stuff in EXTRA.css isn't working
Replies
1
Views
1K
Matthew Hawley
M
Top Bottom