[Support request] Border and box-shadow for main container?

[Harry]

Hello gain GP Team,

I’ve designed my site so that all the content sits in one 1000 px white container (plus a right sidebar) over a blue grey background. I’d like to add a border and box shadow to the left and right sides. Is there an adjustment somewhere, or do I need to add CSS somewhere? On my original (non-wordpress) site I did this like so:
.main-box-homepage {
background-color: white;
max-width: 62.5rem; /* 1000px */
margin: 2px auto 20px;
border: 2px;
padding: 10px 25px;
box-shadow: 5px 0 20px black, -5px 0 20px black;
}

Here’s what the site looks like:
http://www.medangel.org/

Thanks for your help!
Harry

[Ying]

Hi Harry,

Yes, the border and shadow will require the CSS with a different selector, give this a try: div#content.

The content width, you can set it at customizer > layout > container > container width.

If the CSS selector doesn’t work, can you link us to your current GP site?

[Harry]

Thanks, Yang, that almost solved it! Unfortunately the shadow and border also appear at the top of the content, separating it from the header. Is it possible for the border and shadow to also run along the sides of the header and nav menu region?

[Ying]

Can you link me to your current site?

[Harry]

Here you go, Ying: http://medangel.org/blog/
and the link to my original site I’m trying to duplicate, with the border and shadow including the header: http://www.medangel.org/

Thanks,
Harry

[David]

Hi there,

it will require a PHP Snippet to add a wrapper around the header/content/footer – try this:

add_action('generate_before_header', function(){
    echo '<div class="full-site-wrapper">';
},1);
add_action('generate_after_footer', function(){
    echo '</div>';
},50);

How to add PHP: https://docs.generatepress.com/article/adding-php/

You can then add use the .full-site-wrapper selector to set your styles.

[Harry]

Hmmm, didn’t work. I used the snippets plugin and pasted in the code. Did it need a closing angle bracket? I noticed that the plugin added <?php to start the snippet.

For the added CSS, I pasted it in like this, was that correct? Or does it need a div before the period? Or #, like in the first CSS code I got?

.full-site-wrapper {
border: 2px;
box-shadow: 5px 0 20px black, -5px 0 20px black;
}

Sorry, my coding skills are limited!

Thanks,
Harry

[David]

The full-site-wrapper needs the max-width and auto margins – try this:

.full-site-wrapper {
    border: 2px;
    box-shadow: 5px 0 20px black, -5px 0 20px black;
    max-width: 1000px;
    margin: auto;
}

[Harry]

That did it, David! Thanks!
I’m really liking GeneratePress and how much I can do with it.
Harry

[David]

Glad we could be of help!

[Author]

Posts