Jump to content


Photo
- - - - -

Boxed backgrounds


Best Answer Danny , 05 December 2013 - 12:06 PM

Not entirely sure what you mean, but for me you should just add multiple CSS for each page, thats what i'd do. Like so:

 

body.page-id-5 .site-wrap { background-color: #FFC0CB; }
body.page-id-6 .site-wrap { background-color: #004400; }
body.page-id-7 .site-wrap { background-color: #123456; }
body.page-id-8 .site-wrap { background-color: #224433; }
 
And so on...
 
Go to the full post


  • Please log in to reply
12 replies to this topic

#1 Aires

Aires

    Advocate

  • Members

  • 308 posts
  • LocationAlabama
  • Framework Version:DMS2
  • Country: Country Flag

Posted 03 December 2013 - 02:15 AM

Doing some experimenting with boxed setup and layouts and I wanted to change the color of the background of a particular page. I tried multiple variations to no avail.

 

.page-id-X .body-canvas{
  background-image: url()
}
 
body {
  background-color: #ffffff;
}
 
Thanks
 

  



#2 James B

James B

    Advocate

  • Members

  • 5126 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 03 December 2013 - 08:03 AM

Hi there,

 

Try the following, remember to change the id and color to suit.

 

.page-id-xx body.display-boxed .boxed-wrap {background:#ffffff;}



#3 Aires

Aires

    Advocate

  • Members

  • 308 posts
  • LocationAlabama
  • Framework Version:DMS2
  • Country: Country Flag

Posted 03 December 2013 - 11:02 PM

I tried the suggested CSS but didn't see any changes.



#4 Aires

Aires

    Advocate

  • Members

  • 308 posts
  • LocationAlabama
  • Framework Version:DMS2
  • Country: Country Flag

Posted 03 December 2013 - 11:16 PM

Well after some testing it does change the color of the content area but only when you remove the .page-id-xx   I am looking to change the area outside the boxed content.



#5 fliptheu

fliptheu

    Advanced Member

  • Members

  • 92 posts
  • LocationConcord, CA USA
  • Framework Version:DMS
  • Country: Country Flag

Posted 04 December 2013 - 01:12 AM

I believe you can set the content area to have a desired background-color, and then change the body to a desired background-color. Does that make sense?

 

So for example, your content(inner) can be #fff and the body (outer) can be #000

 

Hope that helps!



#6 Danny

Danny

    Is Awesome!

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

Posted 04 December 2013 - 11:31 AM

Can you provide a link to the page you wish to have change color please.



#7 Aires

Aires

    Advocate

  • Members

  • 308 posts
  • LocationAlabama
  • Framework Version:DMS2
  • Country: Country Flag

Posted 04 December 2013 - 12:40 PM

My test site  http://mytestdesigns.pw/

 

Thanks



#8 Danny

Danny

    Is Awesome!

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

Posted 04 December 2013 - 12:51 PM

You can try this and it will turn your Test Page background pink:

 

body.page-id-5 .site-wrap {
background-color: #FFC0CB;
}
 
 
Just rinse, repeat the code and change the page id to match the id of the page you wish to have different colors.


#9 Aires

Aires

    Advocate

  • Members

  • 308 posts
  • LocationAlabama
  • Framework Version:DMS2
  • Country: Country Flag

Posted 04 December 2013 - 06:51 PM

@Danny worked like a charm.  :D



#10 Aires

Aires

    Advocate

  • Members

  • 308 posts
  • LocationAlabama
  • Framework Version:DMS2
  • Country: Country Flag

Posted 04 December 2013 - 06:57 PM

@Danny Im not if sure you can recommend purchases from the store but if i wanted to have a different background across multiple pages would it beneficial to purchase pageless or add css with page-id-xx for every page. Currently im looking at a couple pages ... I also noticed that adding a background image in the setting overrides the color.


Edited by Aires, 04 December 2013 - 06:59 PM.


#11 Danny

Danny

    Is Awesome!

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

Posted 05 December 2013 - 12:06 PM   Best Answer

Not entirely sure what you mean, but for me you should just add multiple CSS for each page, thats what i'd do. Like so:

 

body.page-id-5 .site-wrap { background-color: #FFC0CB; }
body.page-id-6 .site-wrap { background-color: #004400; }
body.page-id-7 .site-wrap { background-color: #123456; }
body.page-id-8 .site-wrap { background-color: #224433; }
 
And so on...
 


#12 Aires

Aires

    Advocate

  • Members

  • 308 posts
  • LocationAlabama
  • Framework Version:DMS2
  • Country: Country Flag

Posted 05 December 2013 - 02:59 PM

Ok, thanks Danny your input is greatly appreciated

Sent from my Lumia 900 using Tapatalk

#13 Danny

Danny

    Is Awesome!

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

Posted 05 December 2013 - 03:01 PM

No problem.