[Resolved] Adding a drop shadow to a border

[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/

[Tom]

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 🙂

[Anne]

Thank you.

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

[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.

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

[David]

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 ) ?

[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.

[David]

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

[Anne]

Sorry. Pressed reply before ready.

[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

[David]

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

[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

[David]

Glad we could be of help 🙂

[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?

[Leo]

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 🙂

[Author]

Posts