Jump to content

Archived

This topic is now archived and is closed to further replies.

Aires

Boxed backgrounds

Recommended Posts

Aires+    258
Aires

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
 

  


ndTgvai.jpg

Visit iheartpagelines.com for the latest tutorials on PageLines related products.

 

Share this post


Link to post
Share on other sites
James B    436
James B

Hi there,

 

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

 

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


Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites
Aires+    258
Aires

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


ndTgvai.jpg

Visit iheartpagelines.com for the latest tutorials on PageLines related products.

 

Share this post


Link to post
Share on other sites
Aires+    258
Aires

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.


ndTgvai.jpg

Visit iheartpagelines.com for the latest tutorials on PageLines related products.

 

Share this post


Link to post
Share on other sites
fliptheu    4
fliptheu

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!


fliptheu

"Finding beauty one picture and one pixel at a time."

http://www.fliptheu.com

Share this post


Link to post
Share on other sites
Danny    1,327
Danny

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


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
Danny    1,327
Danny

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.

Please search our forums, before posting!

Share this post


Link to post
Share on other sites
Aires+    258
Aires

Danny worked like a charm.  :D


ndTgvai.jpg

Visit iheartpagelines.com for the latest tutorials on PageLines related products.

 

Share this post


Link to post
Share on other sites
Aires+    258
Aires

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.


ndTgvai.jpg

Visit iheartpagelines.com for the latest tutorials on PageLines related products.

 

Share this post


Link to post
Share on other sites
Danny    1,327
Danny

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

Please search our forums, before posting!

Share this post


Link to post
Share on other sites
Aires+    258
Aires
Ok, thanks Danny your input is greatly appreciated

Sent from my Lumia 900 using Tapatalk

ndTgvai.jpg

Visit iheartpagelines.com for the latest tutorials on PageLines related products.

 

Share this post


Link to post
Share on other sites
Danny    1,327
Danny

No problem.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites

×