- This topic has 5 replies, 4 voices, and was last updated 4 years ago by Leo.
-
AuthorPosts
-
May 21, 2019 at 10:55 pm #907425Frank
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?
May 22, 2019 at 3:51 am #907607DavidStaffCustomer SupportHi 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 thebefore_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 defaultThen 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; }
May 22, 2019 at 10:00 am #908079FrankYou’re my super hero today David! Worked like a charm and very clear / concise instruction / clarification.
May 22, 2019 at 10:11 am #908097DavidStaffCustomer SupportYou’re welcome.
February 29, 2020 at 9:27 am #1180735argosmediaBrilliant 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 boxNow 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);}
February 29, 2020 at 4:54 pm #1180936LeoStaffCustomer SupportThanks for sharing 🙂
-
AuthorPosts
- You must be logged in to reply to this topic.