Archived

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

  • 0

How can I add box-shadow around a full page (header with navbar with content)?


Question

Posted · Report post

I've got a site where the header, navbar, and content all share a white background, so they are all sitting inside of, basically, a white box. I want to style that "box" with the following CSS:

{
-moz-box-shadow: 0 0 5px #B7A2A3;
-webkit-box-shadow: 0 0 5px #B7A2A3;
box-shadow: 0 0 5px #B7A2A3;
}

But I can't find anyway to select a containing element that includes all of them together.

 

I'm only able to select elements within (like the header, navbar, etc) which, of course, adds the box-shadow around each element...not the effect I want.

 

I've tried both fixed and fluid with layouts but can't seem to work this out.

 

What am I missing?

Share this post


Link to post
Share on other sites

3 answers to this question

Posted · Report post

Thanks, James.

 

The only thing with that is that I can't control the colour directly through that option, so .page-canvas does the trick.

 

Cheers,

 

Dawson

Share this post


Link to post
Share on other sites

Posted · Report post

"What am I missing?"

 

Answered my own question: a brain, clearly.

 

.page-canvas {
-moz-box-shadow: 0 0 5px #B7A2A3;
-webkit-box-shadow: 0 0 5px #B7A2A3;
box-shadow: 0 0 5px #B7A2A3;
}

Cheers

1 person likes this

Share this post


Link to post
Share on other sites

Posted · Report post

Hi there,

 

we have the shadow for the canvas area built in, its only setup to be used in 'fixed width mode'. You'll find this in the color control tab. See below

 

http://screencast.com/t/HgvTKWpUZw

Share this post


Link to post
Share on other sites