• 0
Sign in to follow this  
Followers 0

White background to the content area ONLY

Question

Posted · Report post

Hey there...How do I keep the page background but just change the color of the background behind the content so it looks boxed.  I don't actually want to activate the boxed feature because that carries, as far as I know, from top to bottom on the page.  I ONLY want it in the content area on a page...so for example on this page

 

www.schutzwhite.com/divorce 

 

I want white behind the text / content area but the white should stop above the simple nav.  Hope that make sense I look forward to your response.  Oh and please answer as if you are explaining this to a 3rd grader lol...

 

 

Share this post


Link to post
Share on other sites

9 answers to this question

  • 0

Posted · Report post

OK, when you said you wanted your sidebar and content area with a white background that is what I thought you meant, if you want both areas to have a white background and have no gap in between use the following CSS:

 

#page-main .pl-content {
background-color: #FFF;
}
 
If that isn't to your taste, try this instead:
 
#pl_areau60e19 .pl-content {
background-color: #FFF;
}

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Ok I read through the response but I'm a bit unclear...do I take the code: 

 

#site .thepage {
background-color: lightblue;
}

 

#site .pl-area-wrap {
padding: 0 !important;

 

#site .pl-content {
background-color: #FFF;
}

 

 

and paste it directly into the Custom CSS area?  Do I then call to to those elements specifically in the Styling CSS area?   Now when I do install that code it gives the home page's ENTIRE content area a white background..from the top nav area all the way through the footer...That is NOT the affect I am after...I ONLY want the sidebar widget area and the actual body text area...if you look at link: http://www.schutzwhite.com/divorce I left the result of the CSS code you gave me in place so you could see what it did...This might help you understand what I am trying to accomplish.  The original site's homepage gives you an idea, it's not a WP site, and what I am trying to do is recreate that "look" but with PL DMS...http:schutzwhite.com <---that is the original site / homepage...see how the content has the white-ish background...Thanks in advance!

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

OK, well if that is the case, then first of all remove the following:

 

#site .pl-area-wrap {
padding: 0 !important;
 
#site .pl-content {
background-color: #FFF;
}

 

Now you will need to create some custom CSS like so:

 

.mywhite-bg { background-color: white; }

 

Then add that class name to the sections you wish to have a white background, you add the class name to the styling classes field in the sections options. The end result will be this:

 

http://d.pr/i/7JFE

 

You can find more information on styling classes field and how to add different backgrounds in our documentation - http://docs.pagelines.com/tutorials/section-area-styling

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Danny-

 

Ok thanks for the tip, respectfully, I was able to achieve the white background for the content area like you demonstrated here: http://d.pr/i/7JFE .  I actually got that "look" before I posted here.   My issue with that though is if you look you can see the blue background bleeding through between the two sections.  I don't want that, I want an even background that the content sits so there are no seams.  Does that make sense?  Is that possible or will that require some crazy CSS coding?  Thanks again!!

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Hi there, looks like you've resolved this since the last post, currently shows as http://screencast.com/t/2UCL1MJVt without the bleed. Let us know if you require further assistance.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

James-

 

No not resolved at all...what you saw in the screen cast was NOT what I was looking for...that sets a white background that runs all the way top - bottom of the page...I ONLY want the white background in the content area...The solution that Danny was kind enough to suggest created that seam gap that allowed the bleed through of the background.  So as of right now I do NOT have a solution...

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

That seemed to do the trick!!!  Thanks a ton for all the help.  I really appreciate it!!

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

No problem, happy to hear this resolved your issue.

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
Sign in to follow this  
Followers 0