[Resolved] Adding drop-shadow css to site container

Home Forums Support [Resolved] Adding drop-shadow css to site container

Home Forums Support Adding drop-shadow css to site container

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #907425
    Frank

    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?

    #907607
    David
    Staff
    Customer Support

    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;
    }
    #908079
    Frank

    You’re my super hero today David! Worked like a charm and very clear / concise instruction / clarification.

    #908097
    David
    Staff
    Customer Support
    #1180735
    argosmedia

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

    Jurgen Nijhuis - Argos Media

    #1180936
    Leo
    Staff
    Customer Support

    Thanks for sharing 🙂

Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.