This thread is over two years old and may be outdated. Please create a new thread if you need help, or email us if you have an active Premium license.

Vantage CSS for blocked page layout as a whole unit

Open 3 replies premiumthemetheme-vantage
jereiles
10 years ago · Last reply by Andrew Misplon 10 years ago

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

This is our free support forum. Replies can take several days.

Need fast email support? Get SiteOrigin Premium

Replies

3
  1. Daniel Staff 10 years, 9 months ago

    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

  2. jereiles Private 10 years, 9 months ago

    This is a private message.

  3. Andrew Misplon Staff 10 years, 9 months ago

    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.

Replies on this thread are closed.

Please create a new thread if you have a question, or purchase a SiteOrigin Premium license if you need one-on-one email support.

Have a different question or issue?

Start New Thread