Archived topic
Adding drop-shadow css to site container
5 replies · Started by Frank on May 21, 2019
I was trying to figure out how to add a drop shadow (or any other basic styled element, like a border) to the overall site container (e.g. the one you can manipulate the widget and padding of in customizing > layout > container in GP Premium).
I attempted to isolate it with CSS with different combinations of body.grid-container or body.container but could only manage to put drop shadow around every grid-container element.
Found this thread: https://generatepress.com/forums/topic/adding-a-box-shadow/
But couldn't quite understand what Tom was suggesting with the link to CSS (which didn't quite work here, not sure if he meant to add that in the hook in the before header hook?
Hi there,
so you will need to use 2 Element hooks to create a wrap around the entire content.
1. Create new Hook Element
https://docs.generatepress.com/article/hooks-element-overview/
2. Add this as content:
<div class="full-container grid-container grid-parent"><!-- open body wrap -->
2.1 Note: the editor will automatically add a </div> - remove that.
3. Select the before_header hook and give it a Priority: 0
4. Set the display Rules for the entire site.
Now repeat the above except:
1. Content:
</div><!-- .full-container -->
2. Hook: after_footer hook. Leave priority as default
Then you can style the container by adding the CSS to the Additional CSS in customizer or your child theme style sheet.
.full-container {
box-shadow: 0 10px 10px #555;
}You're my super hero today David! Worked like a charm and very clear / concise instruction / clarification.
You're welcome.
Brilliant solution! These are the slightly different steps for use with Cobalt Apps Extender Pro plugin:
1. Go to Custom Options > Add custom hook box
2. Give it a name, for example 'Open body wrap'
3. Select 'generate_before_header' in the dropdown
4. Set priority 0
5. Select 'Hooked' in the dropdown
6. Add content:
<div class="full-container grid-container grid-parent">
7. Save the hook box
Now repeat the above except:
1. Name: for example 'Close body wrap'
2. Content:
</div>
3. Select hook 'wp_footer'. Leave priority as default (10)
I use it on a 1100px wide contained site with 40px top and bottom margin, so the site is 'floating' on a static background-image. I use a very subtle shadow all around, just enough to let the site stand out from the background:
.full-container {box-shadow: 0px 0px 5px rgba(0,0,0,0.10);}
Thanks for sharing :)
