[Resolved] drop shadow around site

[orlando britain]

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

[Tom]

Try this:

.site-header, .main-navigation, .container, .site-footer, .site-info {
    box-shadow: 0 10px 10px #555;
}

[orlando britain]

this is perfect. thanks tom!

[Tom]

You’re welcome 🙂

[Marko]

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

[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

[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.

[Tom]

Try changing your “Content Layout” (Customize > Layout) to “One Container”.

Also, set your footer area to contained (in the same section).

[Marko]

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

[Tom]

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;
}

[Marko]

Perfekt! Thanks a lot for your perfect support.

[Tom]

Happy to help! 🙂

[Author]

Posts