Jump to content


Photo
- - - - -
Resolved

different background colors on different pages

background-colors pages home

  • Please log in to reply
13 replies to this topic

#1 svabodesign

svabodesign

    Advanced Member

  • Members
  • 43 posts

Posted 20 September 2012 - 10:11 PM

On my home page I want to have a different background color than the other pages on the website.
I added this

body.home {background:#01293D;}

But when I did the image stopped showing. Is there anyway I can still apply background color and keep the image?


Please Login or Register to see this Hidden Content



#2 James B

James B

    Advocate

  • Moderators
  • 4979 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 20 September 2012 - 10:58 PM

Hi there,

Try this

Please Login or Register to see this Hidden Content



#3 svabodesign

svabodesign

    Advanced Member

  • Members
  • 43 posts

Posted 21 September 2012 - 10:13 AM

Hi,

I applied the code you gave me but the other pages got the same background color as home

#4 Danny

Danny

    Is Awesome!

  • Moderators
  • 13021 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 21 September 2012 - 10:23 AM

Hi,

You need to identify all the page ID's that you wish to have different background colors on. For example:

Please Login or Register to see this Hidden Content


You can identify the page id by viewing the body class using Firefox or Google Chrome web dev tool.

#5 svabodesign

svabodesign

    Advanced Member

  • Members
  • 43 posts

Posted 21 September 2012 - 10:41 AM

ok, I tried this


.page-id-13 body, .page-id-13 body.fixed_width {
background-color: #01293D;
}
.page-id-blog body, .page-id-blog body.fixed_width {
background-color: #ffffff;
}
.page-id-shop body, .page-id-shop body.fixed_width {
background-color: #02847e;
}

But somehow it is the blogs background color on all pages

#6 Danny

Danny

    Is Awesome!

  • Moderators
  • 13021 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 21 September 2012 - 10:57 AM

Can you provide a link to these pages so I can take a closer look.

#7 svabodesign

svabodesign

    Advanced Member

  • Members
  • 43 posts

Posted 21 September 2012 - 11:01 AM

yes of course

Please Login or Register to see this Hidden Content



Please Login or Register to see this Hidden Content



Please Login or Register to see this Hidden Content



#8 Danny

Danny

    Is Awesome!

  • Moderators
  • 13021 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 21 September 2012 - 11:27 AM

Hi,

Add this to your custom CSS:

Please Login or Register to see this Hidden Content


However, this may over write your background image.

#9 svabodesign

svabodesign

    Advanced Member

  • Members
  • 43 posts

Posted 21 September 2012 - 11:56 AM

Yeah it did write over the background image. This was a tricky one..

#10 Danny

Danny

    Is Awesome!

  • Moderators
  • 13021 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 21 September 2012 - 11:59 AM

Do you require any further assistance or can I mark this topic resolved.

#11 svabodesign

svabodesign

    Advanced Member

  • Members
  • 43 posts

Posted 21 September 2012 - 12:06 PM

My client want both background color and a background image on the site. If it's possible I would appreciate more assistance

#12 Danny

Danny

    Is Awesome!

  • Moderators
  • 13021 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 21 September 2012 - 12:36 PM

Well you could use basic CSS and add the image to another element on the site, for example:

Please Login or Register to see this Hidden Content



#13 svabodesign

svabodesign

    Advanced Member

  • Members
  • 43 posts

Posted 21 September 2012 - 01:28 PM

Problem solved, thank you guys :)

#14 mackenzie

mackenzie

    Advocate

  • Members
  • 333 posts
  • Country: Country Flag

Posted 21 September 2012 - 11:00 PM

The topic was marked as resolved.





Also tagged with one or more of these keywords: Resolved, background-colors, pages, home