Jump to content


Photo
- - - - -

Change Color Everywhere Outside Content Pad on specific page


  • Please log in to reply
5 replies to this topic

#1 illinimatt81

illinimatt81

    Super Member

  • Members

  • 205 posts
  • LocationChicago, IL
  • Framework Version:DMS 2
  • Country: Country Flag

Posted 17 May 2012 - 02:53 PM

I am looking to change the background color on one specific page of my site so that the content pad area is white and every area outside of the content pad area is #E7ECEF. Basically I want the the content area to have a white background and everything around it to have a gray background. I have isolated the page id and tried the CSS below but I am only seeing the gray appear at the bottom of my page. body.page-id-384 {background-color: #E7ECEF;} I am assuming I need to define more CSS? I have only the content area enabled on my specific page, full page width, I hid all sidebars, the header and the footer as this will be a sales page.

#2 Jenny

Jenny

    Advocate

  • Unicorn Store Dev

  • 2924 posts
  • LocationWV
  • Country: Country Flag

Posted 17 May 2012 - 03:16 PM

You need to go through the site's CSS and find out where the bg color white is coming from and then add it to your CSS with a bg of transparent or the grey. For example, your site has:

Please Login or Register to see this Hidden Content


This is overwriting anything you're trying to set below it. So start at the top and work your way down. Just be sure to add the .page-id-384 to your CSS so it doesn't change site-wide, like:

Please Login or Register to see this Hidden Content



#3 illinimatt81

illinimatt81

    Super Member

  • Members

  • 205 posts
  • LocationChicago, IL
  • Framework Version:DMS 2
  • Country: Country Flag

Posted 17 May 2012 - 04:22 PM

I have achieved what I am looking for everywhere except above the content-pad with the following code: .page-id-384 #page { background-color: #E7ECEF; } body.page-id-384 {background-color: #E7ECEF;} Any advice on how to get the gray along the top as well?

#4 Jenny

Jenny

    Advocate

  • Unicorn Store Dev

  • 2924 posts
  • LocationWV
  • Country: Country Flag

Posted 17 May 2012 - 04:26 PM

The content pad has a padding of 10px all the way around. That is why you are seeing the white above the text. You can change that padding to 0 and add a margin instead if you want the grey at the top.

#5 illinimatt81

illinimatt81

    Super Member

  • Members

  • 205 posts
  • LocationChicago, IL
  • Framework Version:DMS 2
  • Country: Country Flag

Posted 17 May 2012 - 04:38 PM

Can I change it just on this page or would it have to be global?

#6 illinimatt81

illinimatt81

    Super Member

  • Members

  • 205 posts
  • LocationChicago, IL
  • Framework Version:DMS 2
  • Country: Country Flag

Posted 17 May 2012 - 05:08 PM

Margin did the trick, I added this CSS

.page-id-384 #page {
background-color: #E7ECEF;
}
body.page-id-384 {background-color: #E7ECEF; margin-top: 40px;}