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

Content background clear value

Discussion in 'Styling and Customization Questions' started by sydneyh, Oct 21, 2012.

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

    .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;
  2. Shelley

    Shelley Well-Known Member

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

    background: rgb(240, 240, 240, 0.4);
  3. sydneyh

    sydneyh Member

    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.
  4. MagnusB

    MagnusB Well-Known Member

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

    sydneyh Member

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

  6. MagnusB

    MagnusB Well-Known Member

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

    sydneyh Member

    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.

  8. MagnusB

    MagnusB Well-Known Member

    Do you have a link I can take a look at?
    sydneyh likes this.
  9. sydneyh

    sydneyh Member

  10. MagnusB

    MagnusB Well-Known Member


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

    sydneyh Member

    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?

  12. MagnusB

    MagnusB Well-Known Member

    You can change it in public.css or you can add this to extra.css:
    #content .pageWidth {
      background: transparent !important;
    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.
    Jake Bunce and sydneyh like this.
  13. sydneyh

    sydneyh Member

    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!

    Yes saw the date boxes.
    I will probably remove them.
  14. MagnusB

    MagnusB Well-Known Member

    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.

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

    sydneyh Member

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

    MagnusB Well-Known Member

    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
  17. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

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

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


Share This Page