Archived topic
drop shadow around site
11 replies · Started by orlando britain on May 8, 2015
recently bought the premium, very happy with it.
I want to have drop shadow around the full site border/container...
at the moment I can only get it on the right of content and footer-widgets section using:
#content {box-shadow: 5px 5px 5px #555;}
#footer-widgets {box-shadow: 5px 5px 5px #555;}is there one container/div that i can use for this instead of doing each section. if not can you tell me the correct # anchor to use for the header, navigation and bottom footer section as i can't work it out.
this is the site (work in progress): http://harddrivepros.orlando-b.co.uk/
many thanks,
orlando
Try this:
.site-header, .main-navigation, .container, .site-footer, .site-info {
box-shadow: 0 10px 10px #555;
}this is perfect. thanks tom!
You're welcome :)
Hi Tom
I use this Css but it does'nt work on my site. There is now a shadow between the header and navigation and a wrong shadow at the footer. Could you take a look?
Thanks a lot.
Marko
Hi Tom
It was a chaching problem, but there is only a small problem in the "inside-header"
How can i remove the shadow between the header and the top navigation "site-navigation".
Thanks a lot.
Marko
and the shadow on the following sites are different.
http://dev.webseite-online.de/business-e-mail/
http://dev.webseite-online.de/kontakt/
http://dev.webseite-online.de/support/
There are used sections on these sites.
Try changing your "Content Layout" (Customize > Layout) to "One Container".
Also, set your footer area to contained (in the same section).
Hi Tom
Thank you for your feedback.
It doesn't work on pages which have a section in it.
Take a look here: http://dev.webseite-online.de/support/
Do you have a solution for that different displaying?
And how can i remove the shadow in the bottom of the header?
Marko
Any reason you're using Sections for that page? Looks like it could just use the regular content.
As for the shadow, try this:
In GP Hooks:
1. Add this to the "Before Header" hook:
<div class="full-container grid-container grid-parent">
2. Add this to the "wp_footer" hook:
</div><!-- .full-container -->
3. Add this CSS:
.full-container {
box-shadow: 0 10px 10px #555;
}Perfekt! Thanks a lot for your perfect support.
Happy to help! :)
