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

XF 1.2 Changing Main Background Colour?

UKD

Active member
#1
I'm using this code:

Code:
#headerMover #headerProxy, #header, #content
{
background-image: url('@imagePath/xenforo/background.png') !important;
}
However the footer/bottom section of my website has not changed colour and remains the default gray, the rest of the website has changed (top section, and middle section). Is there something I am missing for the footer?

If anyone knows please let me know. Thanks.
 

UKD

Active member
#3
I just changed it to a more obvious colour so you can see it easier:



Thanks.

Background is blue, yet bottom still remains gray.
 

UKD

Active member
#5
I changed it all through EXTRA.css with the code above, I thought that was the only option?

I called upon the '#headerMover #headerProxy, #header, #content' and I was wondering what else I needed to call upon to fill in the footer? Is there an easier option?
 

Amaury

Well-known member
#6
I changed it all through EXTRA.css with the code above, I thought that was the only option?

I called upon the '#headerMover #headerProxy, #header, #content' and I was wondering what else I needed to call upon to fill in the footer? Is there an easier option?
Yes, indeed.

Either edit the@pageBackground color palette item or the HTML style property.
 

UKD

Active member
#7
Yes, indeed.

Either edit the@pageBackground color palette item or the HTML style property.
Thanks for pointing me in the direction of the HTML style properties :).

I managed to get it all done with a combination of the two, as the HTML style properties covered the background but did not cover the heading, so for anyone searching this with a similar issue this is how I did it:

For the background (minus heading):

Appearance > Styles > YOUR-STYLE > Style Property Groups > General > Miscellaneous
Code:
background-image: url('@imagePath/xenforo/YOUR-IMAGE-HERE.png') !important;
and then for the heading:

Appearance
> Styles > YOUR-STYLE > Templates > EXTRA.css
Code:
#header
{
background-image: url('@imagePath/xenforo/YOUR-IMAGE-HERE.png') !important;
}