Jump to content
Sign in to follow this  
illinimatt81

Change Color Everywhere Outside Content Pad on specific page

Recommended Posts

illinimatt81    21
illinimatt81

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
Jenny    33
Jenny
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]

Jenny :: Web designer at Simple Mama (follow me at @simplemamacom)

Check out Share Me, a social sharing add-on for DMS that is super simple to set up.

Share this post


Link to post
Share on other sites
illinimatt81    21
illinimatt81
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
Jenny    33
Jenny
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.

Jenny :: Web designer at Simple Mama (follow me at @simplemamacom)

Check out Share Me, a social sharing add-on for DMS that is super simple to set up.

Share this post


Link to post
Share on other sites
illinimatt81    21
illinimatt81
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
illinimatt81    21
illinimatt81
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  

×