Rounded corners for background colour

[dennisbern]

Dear Laytheme Forum

Does anyone know how to round the background colour for the first and last gridder row?

best wishes

Dennis

[alasdair17]

hey 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;
}

Hope that helps!

[dennisbern]

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

[alasdair17]

do you have a link to your website?

[dennisbern]

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]

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]

.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]

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]

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

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

[dennisbern]

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]

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.