To do that, just add the following css in the “advanced customization” section of your editor:
.homepage .layout li:nth-child(1) {
background-color: #0099C7;
}
.homepage .layout li:nth-child(2) {
background-color: #ffd64b;
}
.homepage .layout li:nth-child(3) {
background-color: #ff3a2e;
}
.homepage .layout li:nth-child(4) {
background-color: #9d5cad;
}
Obviously, you have to change the colors code “#XXXXXX” for your own.
Information:
If you want to add others colors, just add a section:
.homepage .layout li:nth-child(X) {
background-color: #YYYYYY;
}
X is the position of your custom color #YYYYYY.
You can use generic colors, for example:
.homepage .layout li:nth-child(X) {
background-color: red;
}
To get the best result, choose homogeneous colors.
