different backgrounds for different pages – theme: twenty ten

• 

  robgillthings · Member · Dec 21, 2014 at 9:12 am

  • Copy link
  • Add topic to favorites

  Hello, I am trying to have different background colors for different pages of the same blog site. Theme is Twenty Ten. I’m sure this has been posted before in the forum, but I was unable to find it. I am just starting with CSS and have some programming knowledge (C, Java).
  thanks for any help

  The blog I need help with is: (visible only to logged in users)

• 

  staff-happychia · Staff · Dec 21, 2014 at 9:42 am

  • Copy link

  There are two backgrounds, body background and page background.

  Find the page ids (page-id-1325 is contactxx-linxx page, page-id-2083 is the Resume/CV page etc ) using Browser’s Inspector Tools and then append them to the following rule: .

  body.page-id-1325, .page-id-1325 div#main {
  background: green;
  }

  If you wish to have different colors for body and page backgrounds, separate them as following:

  body.page-id-1325 {
  background: green;
  }
  
  .page-id-1325 div#main {
  background: yellow;
  }

  You can append all the page selectors separated by comma (,) to the above rules as following . I just added two page ids. You can add the others.

  body.page-id-1325, body.page-id-2083 {
  background: green;
  }
  
  .page-id-1325 div#main, .page-id-2083 div#main {
  background: yellow;
  }

• 

  robgillthings · Member · Dec 22, 2014 at 4:04 am

  • Copy link

  works perfectly, thank you