▪️Missions Lootbox Skin

With the Generic skin in the Mission Lootbox, you have the flexibility to add your own images directly from the BO. Additionally, you can customize the colors of the cards. Below is a list of the customizable images:

• Custom section background image for desktop

• Custom section background image for mobile

• Image for closed box

• Image for locked box

• Image for opened box

Back-Office Setup

To configure the Generic skin:

1. Go to Gamification → Custom Sections.

2. Create or edit a section with Section type set to Missions Lootbox.

3. Under Section setup, select Generic in the Theme dropdown.

4. Upload your image package .zip file into the Skin images field.

5. Add any custom style rules into the Custom CSS editor.

6. Link your scheduled daily missions under the Missions tab.

Image Package Specifications & Required File Names

When preparing custom skin images for upload, all files must be in PNG format and saved with the following exact file names:

• desktop-bg.png — Background image for desktop screens.

• mobile-bg.png — Background image for mobile screens.

• closed-mission-icon.png — Box icon displayed on available cards before they are opened.

• locked-mission-icon.png — Box icon displayed on upcoming locked cards.

• opened-mission-icon.png — Box icon displayed behind the reward graphic once a card is opened.

Place the files directly in the root of a .zip archive without subfolders. If any image file is missing or fails to load, the widget automatically falls back to the default generic skin asset.

Below you can find a reference package with the images:

Generic Daily Lootbox.zip

archive · 4MB

Open

You can further customize certain elements by applying your own CSS. Below are some helpful styles to get you started:

/* 1. The color of the cards' main (thick) border */ 
.generic-layout .cards-container .mission-card {
    background-color: #101010;
}

/* 2. The color of the cards' thin border that fills the space between the corner and 
the main border */
.generic-layout .cards-container .mission-card .gap-filler {
    border: 4px solid #101010;
}

/* 3. The color of the lighter background behind the rotating lines of the cards */
.generic-layout .cards-container .mission-card .mission-card-inner {
    background: #352B12;
}

/* 4. The color of the rotating lines of the cards */
.generic-layout .cards-container .mission-card .mission-card-inner .generic-rotating-bg {
    background: #101010;
}

/* 5. The color of the background of the numbers in the corners of the cards */
.generic-layout .cards-container .mission-card .mission-card-inner .mission-card-corner {
    background: #101010;
}

/* 6. The color of the ACTIVE card main (thick) border */
.generic-layout .cards-container .mission-card.active {
    background-color: #AB8219;
}

/* 7. The color of the ACTIVE card thin border that fills the space between the corner and
the main border */
.generic-layout .cards-container .mission-card.active .gap-filler {
    border: 4px solid #AB8219;
}

/* 8. The color of the lighter background behind the rotating lines of the ACTIVE card */
.generic-layout .cards-container .mission-card.active .mission-card-inner {
    background: #B8963E;
}

/* 9. The color of the rotating lines of the ACTIVE card */
.generic-layout .cards-container .mission-card .mission-card-inner .generic-rotating-bg.active {
    background: #AB8219;
}

/* 10. The color of the background of the numbers in the corners of the ACTIVE card */
.generic-layout .cards-container .mission-card.active .mission-card-inner .mission-card-corner {
    background: #AB8219;
}

/* 11. The color of the CTA button */
.generic-layout .cards-container .mission-card .mission-card-inner .card-center .cta-lootbox {
    background-color: #001F43 !important;
    color: white !important;
}

/* 12. The color of the Title text */
.generic-layout .generic-layout-title {color: white !important;
}

/*13. The color of the Reward text */
.generic-layout .cards-container .mission-card .mission-card-inner .card-center .card-reward {color: white !important;
}

/*14.  The color of the description text on the bottom */
.generic-layout .layout-description {color: white !important;
}

Additional CSS Selectors for Card States and Elements

You can also target specific card states, countdown timers, and reward graphics:

/* 15. Style for missed cards (unopened cards from past days) */
.generic-layout .cards-container .mission-card.missed {
    background-color: #2a2a2a;
    border-color: #444444;
}

/* 16. Style for completed cards in the current period */
.generic-layout .cards-container .mission-card.completed {
    background-color: #1a3a1a;
}

/* 17. Style for the countdown timer badge above upcoming cards */
.generic-layout .cards-container .mission-card .mission-card-inner .card-center .available-in {
    background: #001F43;
    color: #ffffff;
    border: 1px solid #AB8219;
}

/* 18. Card number in corners */
.generic-layout .cards-container .mission-card .mission-card-inner .mission-card-corner .card-number {
    color: #ffffff;
}

/* 19. Reward image sizing inside opened cards */
.generic-layout .cards-container .mission-card .mission-card-inner .card-center .card-image {
    width: 90px;
    height: 90px;
}

Read more about the Missions Lootbox in:

Mission Lootbox 1.0 | Smartico Help Centerhelp.smartico.ai

Frequently Asked Questions

Q: Can I customize the completed (checkmark) and missed (X) corner status icons?

A: No. The completed checkmark and missed icons in the top-right corner of the cards are built-in platform assets and are not replaced by the skin ZIP package. However, you can adjust the corner backgrounds and card borders using Custom CSS.

Q: What happens if an image is missing from the uploaded ZIP file?

A: If any of the 5 required image files (desktop-bg.png, mobile-bg.png, closed-mission-icon.png, locked-mission-icon.png, opened-mission-icon.png) is missing from the ZIP archive or fails to load, the widget automatically falls back to the default generic skin image for that asset.

Q: Why is the CTA button not appearing on the opened card?

A: The CTA button (.cta-lootbox) only renders on opened cards when both the CTA Button Text and CTA Button Action (deep link or URL) are configured within the linked mission settings in the Back-Office.

Q: Where do the reward icons on the opened cards come from?

A: The reward image displayed in the center of an opened card is taken from the individual mission's configured image, not from the skin ZIP package.