[Resolved] Adding a drop shadow to a border

Home Forums Support Adding a drop shadow to a border

Viewing 15 posts - 1 through 15 (of 17 total)
  • Author
    Posts
  • #1362421
    Anne

    I saw your thread “Adding drop-shadow css to site container” and am trying to figure out how to adapt it to a container block that is within a Grid block. We are absorbing a company and so adding their website content to ours. I am trying to replicate the look here: http://www.leadershipsearch.com/search/

    #1362474
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    You can give the Container block a custom class, then add the CSS to that class:

    .my-box-shadow {
        box-shadow: 10px 10px 10px rgba(0,0,0,0.1);
    }

    The pro version of GenerateBlocks will have box shadow options built in 🙂

    #1362542
    Anne

    Thank you.

    By the way, how soon do you expect GP Blocks Pro to come out?

    #1362584
    Anne

    I am afraid I still need help on this. Using the inspector I found what I thought was the class for the container inside the grid block to which I wanted to add the drop-shadow.

    .gb-inside-container {
    border: 1 px solid;
    box-shadow: 10px 10px 10px rgba(0,0,0,0.1);
    }

    I added the above to the Simple CSS window and it worked except that it also gave me a shadow for the outer container. Furthermore I cannot not figure how to had a border using the block tools the bottom border extends past the drop shadow for the job search box.

    #1362590
    Anne

    Changed code to below and now the border fits but I’m still getting a drop-shadow from some higher level container

    .gb-grid-column {
    box-shadow: 10px 10px 10px rgba(0,0,0,0.1);
    }

    #1362801
    David
    Staff
    Customer Support

    Hi there,

    Pro is under development. We’re currently in the process of updating the theme to 2.5 and GP Premium to 1.11 which are quite major updates. Once there done Pro will become our top priority.

    I notice you have a Grid Container with a single ‘column’ and inside you have your Grid Container with 3 columns. Whats the purpose of the first ( parent Grid ) ?

    #1363742
    Anne

    The parent container happened automatically. I was following the instructions in your video starting at 2:15: https://vimeo.com/412896611 and when I clicked on the grid box to get access to the container width it generated an outer container.

    However, on a separate page I have now tried to create the same set up and this time I was able to get the Container width settings without it creating and outer container. And as longs as I just duplicate the block I’m good to go, so yay!
    wp6.temp.domains/~brakeley/giving-flight-to-great-ideas/brakeley-search/placed-leaders/

    I would now like to add more space between the columns but dealing with Margins only affects the content inside the columns.

    #1363982
    David
    Staff
    Customer Support

    Awesome 🙂
    If you select the Grid container, you can change the Horizontal and vertical gaps:

    https://docs.generateblocks.com/article/grid-overview/#editing-our-grid-block

    #1364773
    Anne

    Sorry. Pressed reply before ready.

    #1365068
    Anne

    OK. I believe I have it all under control now. When I got the gaps properly taken care of it revealed that I still did not have the drops shadow on the right piece.For the record it needs to be:.gb-container (third times the charm).

    .gb-container {
    box-shadow: 5px 1px 20px rgba(0,0,0,0.3);
    }

    http://wp6.temp.domains/~brakeley/giving-flight-to-great-ideas/brakeley-search/current-searches/

    http://wp6.temp.domains/~brakeley/giving-flight-to-great-ideas/brakeley-search/placed-leaders/

    Thank you,

    Anne

    #1365265
    David
    Staff
    Customer Support

    The box-shadows look good to me 🙂

    The issue with using this however:

    gb-container {
        box-shadow: 5px 1px 20px rgba(0,0,0,0.3);
    }

    Means it will add a shadow to every container….. which is not ideal. And in the case of containers inside containers you end up with mulitple shadows.

    Thats why Tom’s recommendation to use a class.

    So if you were to select the Grid Container ( as shown here ) and add the CSS Class of my-box-shadow

    Then you could apply the shadow to all of the Containers that makeup the columns:

    .my-box-shadow > .gb-grid-column > .gb-container {
        box-shadow: 5px 1px 20px rgba(0,0,0,0.3);
    }
    #1366279
    Anne

    Ah yes, I was wondering about that in the middle of the night. Thank you for clarifying. Thank you all again for the excellent user support! I look forward to GP Blocks Pro launching.

    Anne

    #1366471
    David
    Staff
    Customer Support

    Glad we could be of help 🙂

    #1423566
    Anne

    A new question about this topic. I added the CSS using Simple CSS because I wanted to make sure the drop shadows were only applied to the boxes on the particular pages, as opposed to every time I used grid/container setup. In another thread you advised me to use either Additional CSS OR Simple CSS but not both. The only time I am using Simple CSS is for the drop Shadow. Can you advise me on how to add the drop shadow code to Additional CSS while restricting it to those pages?

    #1424053
    Leo
    Staff
    Customer Support

    You would need to target the page ID in your CSS.

    So this:

    .my-box-shadow > .gb-grid-column > .gb-container {
        box-shadow: 5px 1px 20px rgba(0,0,0,0.3);
    }

    Would become something like this:

    .page-id-1234 .my-box-shadow > .gb-grid-column > .gb-container,
    .page-id-5678 .my-box-shadow > .gb-grid-column > .gb-container, {
        box-shadow: 5px 1px 20px rgba(0,0,0,0.3);
    }

    Just replace 1234 and 5678 with the actual ID of the pages you are trying to apply to 🙂

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