@pageBackground

[Neil E.]

I want to style this using EXTRA instead of SP. I don't want @pageBackground in EXTRA because it modifies the original template. Shelley provided some help, but I started a topic so I could add pictures.

@pageBackground seems to be a collection of several areas:
1) outside edges of the page below the header
2) outside edges of the regular footer
3) background of footer legal
4) area below footer legal

Using SP @pageBackground set to red:


Using EXTRA
1) #content
2) ?
3) .footerLegal
4) ?

#content
{
background-color: red !important;
}
.footerLegal
{
background-color: red !important;
}



Anyone know the class or ID for the area below footerLegal and the area outboard of the footer?

 

[cclaerhout]

You should use Firebug, you will find all the class you need to hack your code in extra. It's the fastest way I think.

 

[Neil E.]

Correct, I am using Firebug, but I don't always believe what it's telling me.

For the area below footerLegal:

In Firebug:
html {
background-color: #F0F0F0;
min-width: 1000px;
overflow-y: scroll !important;
}

In EXTRA:
html {
background-color: red;
min-width: 1000px;
overflow-y: scroll !important;
}

Works fine, I thought that would change more areas than what I was looking for. It also changed footerLegal and #content, so I don't need to style those.

 

[cclaerhout]

... but using this html tag in the Css means that all backgrounds of the page will have that background color (providing other elements didn't set a color background). So you just need to target precisely which element you want to apply that background color.

 

[cclaerhout]

... but using this html tag in the Css means that all backgrounds of the page will have that background color (providing other elements didn't set a color background). So you just need to target precisely which element you want to apply that background color.

If you just learnt Css, just two things to remember: # & .

#element => is the ID of the element
.element=> is the CLASS of the element