[Resolved] Help with CSS for tip boxes

[Anna]

Hi GeneratePress,

I followed your instructions to create content/tip/attention boxes by adding CSS from these support forum threads.

https://generatepress.com/forums/topic/attention-box-theme-feature-or-plugin/
https://generatepress.com/forums/topic/content-boxes-2/

It’s working. You can see an example here:
https://garlicdelight.com/chinese-garlic-cucumber-salad/#what-are-the-best-cucumbers-for-this-salad

I would like to create more advanced styling of these boxes for Tip and Recipe Variations such as in this example (scroll to the end of the recipe):
https://www.thespruceeats.com/taiwanese-beef-noodle-soup-4777014

Can you guide me on how to make the tip boxes have the standard “Tip” heading and the icon on the left of the heading?

Thank you in advance for your help. Let me know if this is beyond the scope of support from GP.

[Leo]

Hi there,

Have you considered using GenerateBlocks to create things like that?
https://generateblocks.com/

It should make it a lot easier without having to write your own CSS and HTML.

The Headline block would help with this as it allows you to add icons:
https://docs.generateblocks.com/article/headline-overview/#icon

Let me know 🙂

[Anna]

Ah, I didn’t realize you’re out of beta for Generate Blocks. I also thought it was mostly for grids and didn’t realize the Headline block would achieve this. I used Atomic Blocks for this initially but it was too heavy for my site. I will check it out and let you know if it doesn’t work for me. Thanks!

[Leo]

Sounds good 🙂

[Anna]

Hi Leo,
Thanks for your suggestion on the Headline block. I’m not finding it meets my needs because I need to manually style the block everytime I want to use it. Let me know if I’m missing something but the documentation also tells me not to use it for paragraphs but for headlines. Does that mean I can’t use it for bullet points like in The Spruce Eats examples I shared?
https://generatepress.com/forums/topic/removing-links-from-the-author-date-in-comment-section/page/2/

I’m looking for a block where I can set a default style and everytime I use the same block, it will retain that default style. I get this with Atomic Blocks inline notice block: https://atomicblocks.com/blocks/inline-notice-block/
I just wish that Atomic blocks wouldn’t load CSS on every page, even pages where I don’t have any Atomic blocks. Ideally, I’d like to use Generate blocks because it’s lightweight. So let me know if there’s a better solution with the Headline block that I’ve missed.

[David]

Hi there,

Headline Block is great for Icon Lists – we just do not recommend it as replacement for the text block when writing a post for example.

‘Templates’ will be a part of the Pro version which will allow you to create and save your own pre-styled blocks ( or entire layouts of blocks ).

For the time being the simplest solution is to create your block, style it and then save it as a Re-usable block. Whenever you then need it you can add the Re-usable block and convert it to a regular block to update its content.

[Anna]

Thank you David for the update. I will simply wait for the Pro version because if I follow the re-usable block strategy, I will have a lot of technical debt if I ever want to change the style of my block and have to manually go back to old blocks to update them.

I didn’t know that GenerateBlocks was generally available until Leo told me. Do you send email updates to let GP users know when the Pro version will be released?

[Tom]

Hi there,

We have a signup form on the website at the bottom: https://generateblocks.com

We’ll be sending out emails once the pro version is available.

However, it sounds like you’re wanting to do a global style sort of thing, where you can change the style of something and have it apply to all of the blocks using that style. While that is planned, it will take a little longer than regular templates, as it’s quite complex in Gutenberg at the moment.

[Anna]

Thanks for the link Tom. I didn’t realize GB would be a separate opt-in form GP. Makes sense.
I’ll likely do a bit more CSS styling then as I had planned to do when I first opened this support ticket. Once the Pro version of GB is out with global styling, I’ll consider switching.

Thank you all for your help.

[Tom]

No problem 🙂

[Author]

Posts