Jump to content


Photo
- - - - -

Change Content Background Color For Homepage Only


Best Answer batman , 01 December 2012 - 11:28 AM

Hi Dan B

You can change only the home page background add something like:

 

.home .content-pad {background-color: white;}

or

 .page-id-501 .content-pad {background-color: white;}

 

.content-pad ..... is only an example, add your code after  .home or .page-id-XXX

 

If you also wish to know how I find the page ID, all you need to do is load up FireBug or Google Chromes web dev tool and inspect your page html, at the top you should see body which has a number of classes assigned to it, one of these is page-id-XX (replace XX with your pages id value. I have added a screenshot to assist you.

 

http://screencast.com/t/HOsjhjnUIYX

 
Go to the full post


This topic has been archived. This means that you cannot reply to this topic.
2 replies to this topic

#1 bankrollbuilder

bankrollbuilder

    Member

  • Members
  • 21 posts

Posted 01 December 2012 - 10:20 AM

Hi,

 

I am using a masthead section on my homepage.  (I got the idea from the pagelines homepage - I love it).

 

sitewide I am using a light gray on the content background color, but I would like the color on the homepage to be white because the image I created for the masthead is white.  Right now the image is in a white box against the gray background. 

Please Login or Register to see this Hidden Content

 

Thanks for the help in advance!

 

Dan B.



#2 batman

batman

    Bat Learning

  • Members

  • 2217 posts

Posted 01 December 2012 - 11:28 AM   Best Answer

Hi Dan B

You can change only the home page background add something like:

 

.home .content-pad {background-color: white;}

or

 

Please Login or Register to see this Hidden Content

501 .content-pad {background-color: white;}

 

.content-pad ..... is only an example, add your code after  .home or .page-id-XXX

 

If you also wish to know how I find the page ID, all you need to do is load up FireBug or Google Chromes web dev tool and inspect your page html, at the top you should see body which has a number of classes assigned to it, one of these is page-id-XX (replace XX with your pages id value. I have added a screenshot to assist you.

 

Please Login or Register to see this Hidden Content

 


#3 bankrollbuilder

bankrollbuilder

    Member

  • Members
  • 21 posts

Posted 01 December 2012 - 07:56 PM

Thanks Batman,

 

I use firebug before I come here for help.  sometimes I can figure it out and sometimes I'm waaay off. 

 

you nailed it!  I really appreciate it.

 

Dan.