# 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

<figure><img src="/files/f0DoUuuNyg8K0I2kMgaR" alt=""><figcaption></figcaption></figure>

Below you can find a reference package with the images:

{% file src="/files/I8Rhe8CakU4Xt6mc57Jr" %}

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

```css
/* 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;
}
```

<figure><img src="/files/tokjeMwkq0eMNkiW4Mvx" alt=""><figcaption></figcaption></figure>

<mark style="color:purple;">Read more about the Missions Lootbox in:</mark>

{% embed url="<https://help.smartico.ai/welcome/products/missions-lootbox>" %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://help.smartico.ai/welcome/products/mini-games/custom-skins-for-mini-games/missions-lootbox-skin.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.