> For the complete documentation index, see [llms.txt](https://help.smartico.ai/welcome/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://help.smartico.ai/welcome/products/mini-games/custom-skins-for-mini-games/missions-lootbox-skin.md).

# 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
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## 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, and the optional `goal` query parameter:

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

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

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.