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


  • Please log in to reply
2 replies to this topic

#1 bankrollbuilder

bankrollbuilder

    Member

  • Members
  • 21 posts
  • Framework Version:pagelines pro

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.


  • Glastyroato likes this

#2 batman

batman

    Bat Learning

  • Members

  • 1776 posts
  • LocationBuenos Aires, Argentina
  • Framework Version:DMS
  • Country: Country Flag

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
  • Framework Version:pagelines pro

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.