Jump to content

Archived

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

lbhansen

How to set contrasting color outside design area

Recommended Posts

lbhansen

I don't even know what terminology to use so please excuse me. I am not a professional web designer and web technology has moved way past where I was current ten years ago.

 

I am building a couple of really simple websites and decided Pagelines DMS is most likely the right tool for me to use. Although tweeking the design is not as easy as I had hoped, I've been able to get something functional up and running.

 

I am going with a relatively narrow page design of 940 pixels. How do I set a custom color for the area that shows up outside the design area? An obvious model for this is LinkedIn, which uses light gray to the left and right of the actual content area below tha navigation stuff.

 

Here's my site: http://friendandchampion.com.

 

Thanks.

Share this post


Link to post
Share on other sites
James B

Hi there,

 

The easiest way to do this would be to set the background color for the page in settings > color and bg. So this will turn the whole page that color, so for example using the linkedin example you posted above, the page would be grey all over.

 

Then in layout and nav, made sure you have boxed display set for the display mode and save. http://screencast.com/t/1rKG3gPxO6

 

Click on the section options for the 'template area'. In the styling classes field write your own class for the area, for example mycontentcolor and save. http://screencast.com/t/qNe7T6XXcl

 

Go to your custom css/LESS panel and put in the below css, change the hex value to suit the color of your choice.

 

.mycontentcolor {background:#ffffff;} and save.

 

Refresh the page, you will now have a page like - http://screencast.com/t/knKFT2obGZqi


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
lbhansen

Thanks, James.

 

It's looking closer to what I want. The problem now is that Boxed Display adds left and right margins which narrow the heading image. Since the heading is intended to have a different color and is, in fact, a gradient, it looks wrong no matter what background color I set for the header area. I kludged it by setting the area background image the same as the media section image. That means the image is being displayed twice but brings the right gradient out to the edges. Unfortunately, the image also has a dark line that shows up at the edge of the reduced image in the Media section.

 

http://friendandchampion.com

 

Isn't there a simple way to remove the left and right margins when using Boxed Display and then control the margins appropriately for each area or section?

Share this post


Link to post
Share on other sites
Danny

Hi,

 

You can resolve your header spacing on the left and right by using the following code:

 

#pl_areau744d2 .pl-content {
padding: 0;
}

Please search our forums, before posting!

Share this post


Link to post
Share on other sites
lbhansen

Thanks, Danny.

 

Things look much better now.

 

I appreciate the help.

Share this post


Link to post
Share on other sites
Danny

No problem.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites

×