How to change the radius of the button in the blog page

Hello everyone,

I need your help please. I want to change the buttons specifically in the blog section (I mean, the main page that lists all the blog posts).

In the collection container → Style → Preset-> Blog section I can change the colors of the text and the background. But couldn’t change the round corner (radius) of the button.

I have tried to change this in the site theme but it doesn’t work unfortunatelly.

So, I need to change the CSS.

Could some one help me with that please?

Thanks very much by advance.

Isabelle.

1 Like

hello, double-click on button > style > Element > Border > Round Corners. If you have it on default it will respect buttons global settings.

Hello Kamil,

Thank you for your reply.

For the button on the blog section I cannot have access to that: button > style > Element > Border > Round Corners.
It does’nt exist for this kind of button.

I only can change the label color and label background in collection >style > blog unfortunately.

So it seems that the only way is to change the CSS😣

This is the button from the blog section and as you can see you can change button radius.


if you have something different you can use this code for button CSS:
.yourclass {border-radius: 10px;}

Sorry Kamil,

I was not very clear. I talk about the button that specify the category of the post, just under the title of the post in the main blog posts page (I mean the page where you find all the blog posts). Do you want a screenshot?

maybe this can help? Screen recording

1 Like

Thank you very much Kamil!
It works!:wink::ok_hand:t4:

Isabelle

1 Like