Use A Specific Color For Each Feature Icon

Here is a special snippet to change colors of your features. Just like this: for the example, we use the template “blutility”:

1) Log into your App Manager and select your app.

2) Click Colors from the left-hand-side of the screen (or the middle of the screen).

3) Scroll down to the Advanced SCSS box and past the following code. If there is already code in the advanced SCSS box, do not remove it.  Start a new line “after” the last character in the box, then paste the code below.

/** Begin change home page icon background color.*/
.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;
}
/** End change home page icon background color.*/

 

4) Click Save.

 

NOTE: Obviously you have to change the colors code “#XXXXXX” for your own.

Information:

If you want to add others colors, just add a section:

/** Begin change home page icon background color edit 2.*/
.homepage .layout li:nth-child(X) {
background-color: #YYYYYY;
}
/** End change home page icon background color edit 2.*/

 

X is the position of your custom color #YYYYYY.

You can use generic colors, for example:

/** Begin change home page icon background color edit 2.*/
.homepage .layout li:nth-child(X) {
background-color: red;
}
/** End change home page icon background color edit 2.*/

Related Articles