Archived topic
Shadow for Block Element created with GenerateBlocks
5 replies · Started by Alexandra on November 2, 2020
Hi there!
I've created a Block Element using GenerateBlocks that I've hooked at the end of all my posts as an Author Block.
You can see it here: https://alex.bandiwork.dev/2020/10/postare-test.html
Can you please tell me how I could give a shadow to the grey container and the round image?
I would like it to look like the Author box here: https://sitkatheme.com/lifestyle/2019/10/03/our-favorite-airbnbs-on-a-budget/
Thank you!
Hi there,
edit the Container Block and go to Settings > Advanced and in Additional CSS add:
box-shadow
Save that. And then add this CSS to your site:
.gb-container.box-shadow .gb-inside-container {
box-shadow: 0 0.3rem 2.9rem 0 rgba(0,0,0, 0.1);
}Hi, David!
Thank you so much for this!
It did not work with my first configuration of the block, because I had 2 inside containers, but I rebuilt the block with the image in a separate container and gave it a z-index of 1 and it worked! :D I'm so happy!
I left both blocks for now so you can see them here: https://alex.bandiwork.dev/2020/10/postare-test.html
Thank you so much!
Alexandra
Aah my CSS should have been this:
.gb-container.box-shadow > .gb-inside-container {
box-shadow: 0 0.3rem 2.9rem 0 rgba(0,0,0, 0.1);
}It was missing the direct descendent selector > which would apply only to the immediate inside container.
But even better that you removed the extra container.
And they look great!
Oh, that is awesome!
Great to know in case I might need that for other blocks :)
Thank you so much!
Glad to be of help!
