[Resolved] Shadowed Border

Home Forums Support [Resolved] Shadowed Border

Home Forums Support Shadowed Border

Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • #715917
    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.

    GP Premium 1.7.3
    #716034
    Tom
    Lead Developer
    Lead Developer

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

    #716300
    David
    Staff
    Customer Support

    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);
    #716350
    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.

    #716359
    David
    Staff
    Customer Support

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

    #716361
    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.

    #716388
    Anthony

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

    #716393
    David
    Staff
    Customer Support

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

    #716397
    Anthony

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

    #716402
    David
    Staff
    Customer Support

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

    #716855
    David
    Staff
    Customer Support

    Awesome, glad i could be of help ๐Ÿ™‚

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