-
hi there – Thanks to Fernando he gave me this CSS to insert in my ‘Additional CSS’ section on my site:
figure.gb-block-image.gb-block-image-8b182043 {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19) !importantThis works magically for images on all my content pages see here for example (formatted by a Content Template Element – Block Page Hero). However, I want to apply the same formatting for my featured images I create in my “Hub” pages (basically these are category pages). I have an Element I created called “Hub Content Loop” which is a Block Loop Template (see here)…
Can you help me with more CSS to add the same formatting for the images on these ”Hub” pages? Thank you for all your guys’ help…my site is looking great and I think I’m almost done with transitioning off of Elementor onto Generatepress / GenerateBlocks so I can go live soon – thanks for everyone’s help! –
-
Hi there,
However, I want to apply the same formatting for my featured images I create in my “Hub” pages (basically these are category pages).
You are a GB pro user, you do NOT need this CSS at all.
You can add box shadow to any GB blocks via the Effect panel > box-shadow:
https://docs.generateblocks.com/article/effects-overview/ -
Hey Ying – ahh gotcha! Of course, okay.
Okay so I set up the box shadow like this: https://postimg.cc/gallery/mzpFC0W
Yet it looks like this when live: https://staging.learnplanting.com/soil-care/fertilizer/
I want the shadow to look like this, specifically how come the shadow doesn’t extend below my green banner and is it possible if you could help me with he Box shadow toggles to get it to look like my Oak tree article?
-
Hm okay so I fixed the other ticket you were helping me with (where I changed my Loop Content to Content Template) and used the Hub Header (Page Hero) for these category / “hub” pages and it looks like the Additional CSS kicked in and the image is now presenting the shadow that I like…https://staging.learnplanting.com/soil-care/fertilizer/…but do you think I should still use the ‘Effects’ to adjust? if so can you help me with matching up the toggles to achieve the shadow format I want?
-
I’m lost, can you make it more clear？
Just give me 2 links, 1st one is what you want, 2nd one is what you get.
And can you share the CSS Fernando provided? I assume that’s the effect you want?
-
This is the shadow effect I want – see the featured image on this article: https://learnplanting.com/soil-care/fertilizer/monstera/
This is the CSS Fernando provided –
figure.gb-block-image.gb-block-image-8b182043 {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19) !important
}I’m mistaken it seems to be working for all the featured images on my site now – including hub pages like https://learnplanting.com/soil-care/fertilizer/
Can you provide me with the Box Shadow effects I can input through GB (Horizontal offset, vertical offset, blur, spread etc) that I can achieve the same effects without the CSS?
I’m also curious is there any downside using the CSS or the GB box shadow feature (i.e. is one more lightweight than the other?)
-
Hi there,
the GenerateBlocks box shadow effect can’t do that particular style at this time.
As it can only display 1 x shadow.
And that CSS Fernando provided contains 2 x shadows which can only be done using CSS. -
ok great – I’ll keep it is is then!
-
You’re welcome
- You must be logged in to reply to this topic.