Rounded corners for background colour

dennisbern · wrote on Mar 24, 2025, 9:53 AM

It does not work when I write the code in "Custom CSS".
Is some code missing?

alasdair17 · wrote on Mar 24, 2025, 11:12 AM

do you have a link to your website?

dennisbern · wrote on Mar 24, 2025, 12:54 PM

Sure. The rounded corner should be at the top under the title bar and at the bottom before the footer:

https://biografie.art/die-eigenen-grenzen-anerkennen-kopie-grafischer/

alasdair17 · wrote on Mar 24, 2025, 3:06 PM

ahh yeah sorry I just tried myself and it didn't work, I thought that would work for a whole row. If you add the code to the grid id (#grid) it rounds the bottom of the website but not the top, hmm you might want to ask @arminunruh for help.

arminunruh · wrote on Mar 31, 2025, 2:44 PM

.first-row{
    overflow: hidden;
    border-radius: 10px;
    background: blue;
}
.row:last-child{
    overflow: hidden;
    border-radius: 10px;
    background: blue;
}

or

if you right click the row on the gridder and give it a class like, 'roundcolour' and then in css type this:

.roundcolour {
border-radius: 20px;
background: blue;
overflow: hidden;
}

2 things: your rows dont have a background color so rounding their corners wont show any color with a round shape at the corners.
also maybe overflow: hidden is needed just like i put in my css

dennisbern · wrote on Mar 31, 2025, 7:58 PM

Hey, thanks. Basically, it works if I put background color to rows, but it's still not what I meant: I've given the entire page a background color ("Set Background"), and I only want to round the top corners and the bottom corners of the page background color. If that is possible.

This code gives rounded corners to the entire row and also to the footer that I have set up.

I could imagine a workaround: giving each row a background color. But then I would only need to round the top corners for the first row and the bottom corners for the last one.

arminunruh · wrote on Apr 1, 2025, 5:54 AM

body.id-70 #grid{
background-color: transparent!important;
}

body.id-70 .grid-inner{
background-color: #fff677!important;
border-radius: 20px;
}

dennisbern · wrote on Apr 3, 2025, 9:06 AM

Nice ist works. I adapted the code that it works for all pages:

body #grid{
background-color: transparent!important;
}

body .grid-inner{
background-color: #fff677!important;
border-radius: 30px;
}

One last question: It does not apply to the mobile sites. What code should I add?

dennisbern · wrote on Apr 3, 2025, 10:54 AM

And another thing I just recognized is that my code is not really working—or rather, it’s not doing what I want. It rounds the corners of all pages but also sets the background color of all pages to #fff677. However, I have different background colors on different pages.
Is there a way to round the corners of all pages automatically while keeping the background color I defined for each specific page?

arminunruh

maybe this?

remove your other css, only have this css:

.grid-inner{
border-radius: 30px!important;
}

then in custom <head> content:

<script>
window.laytheme.on('newpageshown', function(){
var bgcolor = jQuery('#grid').css('background-color');
jQuery("#grid .grid-inner").css('background-color', bgcolor);
jQuery('#grid').css('background-color', 'transparent');

var bgcolor2 = jQuery('#custom-phone-grid').css('background-color');
jQuery("#custom-phone-grid .grid-inner").css('background-color', bgcolor2);
jQuery('#custom-phone-grid').css('background-color', 'transparent');
})
</script>

with this js we take the bg color of the grid. we apply it to the inner div.
then we set the grid bg color to transparent.

we do this for bot normal grids and custom phone layout grids.
the css makes the border round.

Lay Theme Forum

Rounded corners for background colour

Before you post:

When you post:

Online Users