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

XF 1.4 Show background when not using sidebar

Discussion in 'Styling and Customization Questions' started by Bram, Oct 14, 2014.

  1. Bram

    Bram Well-Known Member

    Hi styling guru's,

    On our main forums I have designed the style myself during the last couple of years. Tweaking it here and there and lots of trial and errors (autodidact :D).

    I am having an issue that I can't seem to solve and I need your help please.

    The site is using the widget framework and on most pages I am displaying the sidebar with information on the latest threads, news and resources and for years I have been using the sidebar on all pages because of a design flaw I made and was too lazy to solve it, until today :)

    Here is my problem:

    The style is not using a content background (via the style properties) as I like to have no background color when using the sidebar. However if there are pages (such as profiles) where I don't want to have sidebar displayed it messes up the look of the design as all the blocks are displayed on the body background color.

    I am using this css code to add color to the mainContent which works fine when the sidebar is enabled.

    .mainContent {
    background: @contentBackground;
    padding: 9px;
    border: 1px solid #a9a9a9;
    box-shadow: inset rgba(0,0,0,0.2) 0px 1px 3px, rgba(255,255,255,0.7) 0px 1px 0px;
    }

    How would I adjust this code that display a content background color when there is no sidebar showing?


    Something along the lines as when no sidebar is displayed then:

    #content .pageContent {
    background: @contentBackground;
    padding: 9px;
    border: 1px solid #a9a9a9;
    box-shadow: inset rgba(0,0,0,0.2) 0px 1px 3px, rgba(255,255,255,0.7) 0px 1px 0px;
    }
     
    Last edited: Oct 14, 2014
  2. Russ

    Russ Well-Known Member

    There's a class for the HTML which you can use.

    NoSidebar

    So:

    Code:
    .NoSidebar #content .pageContent
    {
    background: url(@imagePath/xenforo/nosidebarbg.png) repeat-x 0 0 #CCC;
    }
    .Sidebar #content .pageContent
    {
    background: url(@imagePath/xenforo/sidebarbg.png) repeat-x 0 0 #000;
    }
    
     
    iGloo' likes this.
  3. Bram

    Bram Well-Known Member

    Seriously @Russ thanks a million that fixed my biggest styling frustration ever.!

    awesome.png
     

Share This Page