[Resolved] Shadowed Border

[Anthony]

Hi,

With the design I had done the background of the website and the content area / sidebar connected have a shadowed border around them and I was wondering how would I do this in the generate press premium theme as I would like to use the same colours as my design but it does require a shadowed edge 1cm thick maybe around the content area so it separates itself from the rest of the website.

[Tom]

Hi there,

Your site seems to be in maintenance mode, so I can’t see it.

Here’s the CSS we use on our Marketer site in the library though:

.inside-article, 
.sidebar .widget, 
.comments-area {
    border: 1px solid rgba(232, 234, 237, 1);
    box-shadow: 0 0 10px rgba(232, 234, 237, 0.5);
}

[Anthony]

Hi,

Yeah sorry about that I’m testing everything before it goes live but I have a custom design done for me that I am basing it on.

I know this will prob sound like a daft few questions as this is pretty new to me.

1. Where in the CSS do I add this?
2. How do I make the border thicker?

Many Thanks Anthony

[David]

Hi there,

this article explains how to add CSS.

https://docs.generatepress.com/article/adding-css/

Increasing the border thickness is defined by the pixels eg:

/* This has a  1px border */
border: 1px solid rgba(232, 234, 237, 1);

/* This has a 5px border */
border: 5px solid rgba(232, 234, 237, 1);

[Anthony]

Hi David,

This does indeed add the border however the shadow around the articles rather than site itself I think my previous comment was incorrectly phrased. The menu, sidebar and content are all joined together as one unit and that is where I need the border around rather than the individual posts.

If that makes sense? Please let me know if you need more info. My website is now live so if you have a look I think that may help.

[David]

So you need the shadow to wrap around the navigation (but not site header) and the rest of the page content?

[Anthony]

Hi David,

From the navigation & body (that is currently white as this needs to be same colour as background eventually) but excluding the copyright bar at the bottom yes.

[Anthony]

Actually it should end at the copyright on the left & right side thinking about it.

[David]

Is it just the shadow? Or the border as well?

[Anthony]

The shadow will be the border to be honest to separate the two.

[David]

OK, so we’re gonna need to put a wrapper around the various elements so we don’t end up with horizontal shadows between them. So create 2 Hook Elements:

https://docs.generatepress.com/article/hooks-element-overview/

Both of them will have their display rules set to Entire Site.

Hook 1 name it: Open Site Wrapper
Select the after_header hook
And add this content:

<div class="site-wrapper grid-container">

Hook 2 name it: Close Site Wrapper
Select the after_footer hook
And add this content:

</div><!-- closing body wrap -->

Once they are published, add this CSS:

.site-wrapper {
    box-shadow: 0 0 10px rgba(232, 234, 237, 0.5);
}

[Anthony]

Brilliant thanks David I have managed to get this to work now cheers for your help with this. I changed it slightly but with your instructions I managed to get it to work how I wanted so it reaches the stops before the footer. 🙂 Many Thanks Anthony

[David]

Awesome, glad i could be of help 🙂

[Author]

Posts