• 0
Sign in to follow this  
Followers 0

Change Color Everywhere Outside Content Pad on specific page

Question

Posted · Report post

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.

Share this post


Link to post
Share on other sites

5 answers to this question

  • 0

Posted · Report post

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: [code]body #page { background-color: #FFFFFF; }[/code] 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: [code].page-id-384 #page { background-color: transparent; }[/code]

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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?

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Margin did the trick, I added this CSS .page-id-384 #page { background-color: #E7ECEF; } body.page-id-384 {background-color: #E7ECEF;[b] margin-top: 40px;}[/b]

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!


Register a new account

Sign in

Already have an account? Sign in here.


Sign In Now
Sign in to follow this  
Followers 0