Rounded corners

[fernandol97]

Hey, Is there any method of turning all of the images/carousels on my homepage to have slightly rounded corners? https://www.fernandolobina.com

[arminunruh]

.lay-carousel{
    border-radius: 20px;
    overflow: hidden;
}

.type-elementgrid .img{
    border-radius: 20px;
    overflow: hidden;
}

[arminunruh]

Enter this css in "lay options" -> "custom css & html" -> "custom css"

at the moment, if you click on an image element in the gridder or on a text element, it already gives u rounded corners settings on the right

[fernandol97]

thanks so much man

[fernandol97]

@arminunruh any idea whats going on with the element gird at the bottom of the page? any way to make them match the carousels above? thanks
https://www.fernandolobina.com/

[arminunruh]

.type-elementgrid .img img{
    border-radius: 20px;
    overflow: hidden;
}
.type-elementgrid .img .ph{
    border-radius: 20px;
    overflow: hidden;
}

can you try this instead please

(remove this css from my previous post):
.type-elementgrid .img{
border-radius: 20px;
overflow: hidden;
}

[fernandol97]

Hey @arminunruh, hope you are good.
is there any way to turn off the rounded corners for selceted pages? i only want the rounded corners on my home page. I am thinking about adding a phoogaphy page and i woul like to turn the rounded corners off for that, and would also like to turn off the rounded corners on my case study pages. this is the current code i have in there

.lay-carousel{
    border-radius: 12px;
    overflow: hidden;
}.type-elementgrid .img img{
    border-radius: 12px;
    overflow: hidden;
}
.type-elementgrid .img .ph{
    border-radius: 12px;
    overflow: hidden;
}

[alasdair17]

@fernandol97 hey, try adding:

"body.slug-photography" before your selectors on your new photography page like:

body.slug-photography .type-elementgrid .img img{
border-radius: 0px;
overflow: hidden;
}

if your photography url page isn't /photography you would just change photography to whatever you've called it :)

for a case study try:

body.slug-volvoex90 .type-elementgrid .img img {
border-radius: 0px;
overflow: hidden;
}

There's useful css info here: https://laytheme.com/documentation/custom-css-styling.html

[fernandol97]

@alasdair17 Thank you, do i just add it to the bottom like this? Excuse my niavety when it comes to CSS stuff. I there a way of me also to disable it from other pages like my case study pages?

[alasdair17]

@fernandol97 I've noticed on your website your photos page has a -2 after the url so it would need to be:

body.slug-photographs-2 .lay-carousel {
border-radius: 0;
}

body.slug-photographs-2 .type-elementgrid .img img {
border-radius: 0;
}

etc etc

for case studies, just take the individual case study url so for the car one it would be:

body.slug-volvoex90 .lay-carousel {
border-radius: 0;
}

etc etc

Any issues let me know, i'm happy to help :)

[fernandol97]

@alasdair17 Thank you for this. i am super uneducated when it comes to CSS i think i am doing somthing wrong.
I updated the Page URL to https://www.fernandolobina.com/photographs/, but am i copy and pasting the lines of text yoyu supplied me with into the correct locations here?

[arminunruh]

or in lay options -> custom css & hml

[alasdair17]

@fernandol97

body.slug-photographs .type-elementgrid .img img {
border-radius: 0;
}

try pasting this in, strange why its not working hmm

[fernandol97]

Chat GPT seemed to supply me with this, it worked!

/* Global styles that round all images */
.lay-carousel {
    border-radius: 12px;
    overflow: hidden;
}
.type-elementgrid .img img {
    border-radius: 12px;
    overflow: hidden;
}
.type-elementgrid .img .ph {
    border-radius: 12px;
    overflow: hidden;
}

/* Page-specific override: remove rounding on photographs page */
body.slug-photographs .lay-carousel {
    border-radius: 0;
}

body.slug-photographs .type-elementgrid .img img {
    border-radius: 0;
}

body.slug-photographs .type-elementgrid .img .ph {
    border-radius: 0;
}

[alasdair17]

@fernandol97 nice one!

[fernandol97]

thanks for the help guys!!

[alasdair17]

@fernandol97 just realised it wasn't working was because you were missing a closing bracket }

that's why it was showing up as red, you needed a closing } after "hidden;"