Change Background Colors On Grido Layout

Home Documentation How To Change Background Colors On Grido Layout

Follow the instructions below to change the background color of the various grid boxes in the Grido layout.

Enable “Advance Customization CSS / SCSS” in colors tab and enter this:

 

.layout.layout_grido .object:nth-child(6n+1){
background: #364F6B;
}
.layout.layout_grido .object:nth-child(6n+2){
background: #EA7362;
}
.layout.layout_grido .object:nth-child(6n+3){
background: #FF895D;
}
.layout.layout_grido .object:nth-child(6n+4){
background: #20DECB;
}
.layout.layout_grido .object:nth-child(6n+5){
background: #FFA0C2;
}
.layout.layout_grido .object:nth-child(6n+6){
background: #9ED763;
}

 

And if you need to change the text color also, Add color property like this example:

.layout.layout_grido .object:nth-child(6n+1){
background: #364F6B;
color: #000000;
}

 

 

 

Comments are closed.