• 0

Boxed backgrounds

Question

Posted · Report post

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
 

  

Share this post


Link to post
Share on other sites

12 answers to this question

  • 0

Posted · Report post

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...
 

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Hi there,

 

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

 

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

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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!

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Danny worked like a charm.  :D

Share this post


Link to post
Share on other sites
  • 0

Posted (edited) · Report post

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

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Ok, thanks Danny your input is greatly appreciated

Sent from my Lumia 900 using Tapatalk

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

No problem.

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