Customize the background color or use an image of the list items in a Folder.

Use the code below to change the background color or use an image of the lists that are in folders:

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 enter the following code:

Change the background color

/** Begin change background of folder lists*/

[state=”folder2-category-list”] .list .item.item-custom{
background: #800000;
}

/** End change background of folder lists*/

Use an image for the background.

/** Begin change background of folder lists with image*/

[state=”folder2-category-list”] .item-avatar{

background-image: url(https://images.pexels.com/photos/122458/pexels-photo-122458.jpeg) !important;
}

/** End change background of folder lists with image*/

To change specific items the list.

/** Begin change background of folder lists for specific items*/

[state=”folder2-category-list”] .item-avatar:nth-child(1){

background-image: url( https://memicappfactory.ovh//var/cache/images/robin-stickel-82145-unsplash.png) !important;
opacity: 0.9;
background-color: transparent;
}

[state=”folder2-category-list”] .item-avatar:nth-child(2){
background-image: url( https://memicappfactory.ovh//var/cache/images/sights.jpg) !important;
opacity: 0.9;

background-color: transparent;
}

[state=”folder2-category-list”] .item-avatar:nth-child(3){

background-image: url( https://memicappfactory.ovh//var/cache/images/accomodation.png) !important;
opacity: 0.9;
background-color: transparent;
}

/** End change background of folder lists for specific items*/

4) Click Save.

NOTE: Only use the code above for the specific change that you want to make.  Using everything will at once would mess-up your Folder lists.  In the first set of code, change the hex number to  “800000” to reflect the color that you want to use.

IMPORTANT NOTICE: 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 above code.