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

@pageBackground

Discussion in 'Styling and Customization Questions' started by Neil E., Oct 18, 2012.

  1. Neil E.

    Neil E. Active Member

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

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

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

    xenforo80.jpg

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

    cclaerhout Well-Known Member

    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.
     
  3. Neil E.

    Neil E. Active Member

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

    cclaerhout Well-Known Member

    ... 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.
     
  5. cclaerhout

    cclaerhout Well-Known Member

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

    #element => is the ID of the element
    .element=> is the CLASS of the element
     
    Jake Bunce likes this.

Share This Page