• 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

Bram

Well-known member
#1
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:

Russ

Well-known member
#2
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;
}