Jump to content

Archived

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

lindaped

change background color?

Recommended Posts

lindaped

I'd like to change the background color on all my pages to a light gray, with the main content area having a white background. I used this custom css, which is close to what I want...

 

div.pl-area-wrap {

  background-color: #CCCCCC !important;
}
div.pl-content {
  background-color: #FFFFFF !important;
  padding: 0px 20px;
}
 
...but only the individual sections (header, template, footer) have a white background--the gray background shows through between the sections. I inspected with Firebug and can't figure out if there is a div wrapping all the sections that I could style with a white background, rather than the individual sections. Is there an easier way to do this? I'm building the site on a local server, so I don't have a link, but I have attached a screenshot.

Share this post


Link to post
Share on other sites
Jake

Hi lindaped - Try just adding the following:

.pl-bg-cover {background: #FFFFFF;} for the content area.

And use the Color and Style global options to change the site background to the gray. 


Have you searched the forums yet or checked out the DMS user docs?

PageLines geek, blogging at MyUntangledLife.com

Share this post


Link to post
Share on other sites
lindaped

Thanks, Jake, but changing the background color on "pl-bg-cover" still shows an all-white background. It looks like styling the "nested-area-section" class with a white background would also work, but again, the gray background shows between the sections. 

Share this post


Link to post
Share on other sites
Jake

Hmmm...I've got that code in my test site and this is what I see http://d.pr/i/n6zA so I'm thinking perhaps you've got some other custom CSS in there? Also/or, what do you have selected in your Global Options - Layout & Nav - Display Mode dropdown? If it's not "boxed display" make that change and see if that does the trick.


Have you searched the forums yet or checked out the DMS user docs?

PageLines geek, blogging at MyUntangledLife.com

Share this post


Link to post
Share on other sites
Jake

lindaped - Did a little more fooling around on my end. Try giving the .pl-area-wrap a white background as well. I put in your code exactly as you wrote it, changed the background to gray via the Global Options and got the same result you posted. When I made this one slight change it filled in the gray with white. Let me know how that goes.


Have you searched the forums yet or checked out the DMS user docs?

PageLines geek, blogging at MyUntangledLife.com

Share this post


Link to post
Share on other sites
lindaped

Well, that works for me, too, but only if I choose pixel-based layout. I would prefer percentage-based. Another weird issue is that when I'm using percentage-based layout, the section editing buttons don't show anymore--I can see them in the pixel-based layout, but they are positioned to the left on the outside of the main content. It wasn't like that when I first started working with DMS. I'm sure something has been corrupted because my computer crashed a few hours ago, but I'm at a loss to know what file to fix or replace.

Share this post


Link to post
Share on other sites
Rob

Can you snapshot that condition?

 

Did you refresh? Clear the cache in your browser?


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
lindaped

HI Rob

Yes, I refreshed the page/s and cleared the browser cache. Then, I reinstalled WP, the DMS theme and deactivated all plugins. Here are two screenshots, one with pixel-based layout, the other with percentage-based layout. There is no custom CSS, no activated plugins and no content.

 

 

 

Share this post


Link to post
Share on other sites
Rob

Linda,

 

In the principal sections of DMS, when you click the little pencil icon to edit, you'll see an option to include a Styling Class. 

 

Let's say in your body, on a page, you typed in my-bg-1.  Then, you add custom code:

.my-bg-1 {background-color: red;}   <--NOTE, I'm using red for effect. Make this any color you desire. You can use color names, hex code (#FF0000), RGB or RGBA (with opacity).

 

Then, save the template as a new template, giving it a name and a description.

 

You can apply the template anywhere you want, or, make a new one with a different (or no) background color for other pages.

 

That said, you can also do this for each section you add. So, if you made the page body grey, with let's say 20px padding, then you added a text area, you could give that a different color entirely or, set some opacity too, to give it a transparent look. See what I did under the slider here: http://www.epicurusgroup.com/


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites

×