Is it possible to change the shape of the article thumbnails in the home page?

[javierfs]

I was wondering if is possible to change the rectangle shape of the articles thumbnails in the homepage for a more minimalistic & rounded corners as the newsroom theme: https://jamstackthemes.dev/demo/theme/newsroom/

If so, how can I change it?

[HEIGE-PCloud]

You can add your own custom CSS by editing your_site/assets/css/_custom.scss to achieve this looking.

.home[posts] .summary .featured-image-preview img.lazyloaded {
    border-radius: 25px;
}

will give you

Make sure using the extended verion of Hugo to build the site for custom style to work.

[HEIGE-PCloud]

It should be my_site/assets/css/_custom.scss instead of my_site/assets/css/custom.scss if it is not a typo...

[javierfs]

It should be my_site/assets/css/_custom.scss instead of my_site/assets/css/custom.scss if it is not a typo...

it was a typo, sorry. I called it _custom.scss

[HEIGE-PCloud]

Sorry, I have no idea why it is not working, @import "_custom"; is correctly imported and I didn't reproduce that on my side. Maybe you can check whether the modification has been added to the final style.min.css. But if you don't mind modifying the theme, then editing _home.scss should be an acceptable solution. 🤔

[javierfs]

style.min.css

I checked and the modifications didn't happen in mysite/public/css/style.min.css anyways, I don't mind modifying the theme. By the way, is it possible to add a shadow border as in the newsroom theme?

[HEIGE-PCloud]

Well, you can add any CSS style to it. Here is how you can add a box-shadow:

.home[posts] .summary .featured-image-preview img.lazyloaded {
    border-radius: 25px;
    box-shadow: 10px 10px 10px 1px rgba(0, 0, 0, 0.1)
}