My goal is to have the blocked page format with rounded corners and a drop shadow as one unit. I can add corners to the head and footer by customizing these two parts with this custom CSS:
#masthead {
background: #fcfcfc;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
padding: 0 35px 0 35px;
-ms-box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
zoom: 1;
}
#colophon {
margin-bottom: 20px;
background: #2f3033;
-webkit-border-bottom-right-radius: 20px;
-webkit-border-bottom-left-radius: 20px;
-moz-border-radius-bottomright: 20px;
-moz-border-radius-bottomleft: 20px;
border-bottom-right-radius: 20px;
border-bottom-left-radius: 20px;
padding: 20px;
}
I would rather perform this on the whole page container, because when you add shadows to each of the page sections, there’s an unnatural break in the shadows between sections. How can I do this?
Thanks,
Jere
Hi Jereiles
I apologize for the delayed response
Do you have a public URL where we can take a look at your site? If you need to keep this URL private from other users, just select “Private Reply” on the bottom right of the comment box.
Looking forward to hearing from you
This is a private message.
Hi Everyone
Please give this a go from scratch:
/* Boxed Layout: Rounded Corners Drop Shadow */ #masthead { border-radius: 10px 10px 0 0; box-shadow: rgba(0, 0, 0, 0.25) 0 3px 8px, rgba(0, 0, 0, 0.25) 3px 0 8px, rgba(0, 0, 0, 0.25) -3px 0 8px; } #main-slider, #main { box-shadow: rgba(0, 0, 0, 0.25) 3px 0 8px, rgba(0, 0, 0, 0.25) -3px 0 8px; } #colophon { border-radius: 0 0 10px 10px; box-shadow: rgba(0, 0, 0, 0.25) 3px 0 8px, rgba(0, 0, 0, 0.25) 0 -3px 8px, rgba(0, 0, 0, 0.25) -3px 0 8px; }If it works for you, you can then customize it to your needs.
Hope that helps.