Archived topic

Border and box-shadow for main container?

9 replies · Started by Harry on January 2, 2022

Viewing posts 1–10 of 10

January 2, 2022 at 12:32 pm #2066720

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

January 2, 2022 at 12:50 pm #2066736

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?

January 2, 2022 at 1:51 pm #2066769

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?

January 2, 2022 at 2:45 pm #2066805

Can you link me to your current site?

January 2, 2022 at 5:25 pm #2066907

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

January 3, 2022 at 4:53 am #2067279

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.

January 3, 2022 at 9:55 am #2067794

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

January 3, 2022 at 11:14 am #2067883

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

January 3, 2022 at 11:46 am #2067917

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

January 4, 2022 at 4:23 am #2068579

Glad we could be of help!

This archived topic is closed to new replies.

Start building better websites today.