> For the complete documentation index, see [llms.txt](https://kox-core.gitbook.io/loot-box-1.0/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://kox-core.gitbook.io/loot-box-1.0/client-reference/customize-your-crate.md).

# Customize your crate

## Customization Settings

* Item
* Label
* NameColor
* BgColor
* BgShadow
* TxtShadow
* ImgShadow
* Lid
* Front
* Inside
* Items

## Item

Add a **item name** to your crate. (for remove to inventory)

{% hint style="info" %}
`Item : (string)`
{% endhint %}

#### Example :

<figure><img src="https://3270923211-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FZeCShdo8wBw9pTA0mhmj%2Fuploads%2FFWJvKgsRz1AbYoSZO92y%2FCapture3.PNG?alt=media&amp;token=03313276-1705-4212-8506-2bab183a96fc" alt=""><figcaption></figcaption></figure>

## Label

Add a **label** to your crate.

{% hint style="info" %}
Label : (string)
{% endhint %}

#### Example :

<figure><img src="https://3270923211-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FZeCShdo8wBw9pTA0mhmj%2Fuploads%2FvzvXZVofiNOXwqgRWLJA%2FCapture4.PNG?alt=media&amp;token=145e756e-2c89-4886-8db8-5a01e99a7635" alt=""><figcaption></figcaption></figure>

## NameColor

Custom the **color** of the crate [Name](#name)

{% hint style="info" %}
`NameColor : (string)`
{% endhint %}

#### Example :&#x20;

<figure><img src="https://3270923211-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FZeCShdo8wBw9pTA0mhmj%2Fuploads%2FjgSGPWoKEgYpuurVjUWt%2Fnamecolor.PNG?alt=media&amp;token=7ffe59db-2be4-46bc-9610-8716a5958024" alt=""><figcaption></figcaption></figure>

## BgColor

Custom the **background** **color** of the **crate** banner container

{% hint style="info" %}
`BgColor` : `(string)`
{% endhint %}

#### Example :

<figure><img src="https://3270923211-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FZeCShdo8wBw9pTA0mhmj%2Fuploads%2FGamnWUjTKMEbxzDc8u3k%2Fbgcolor.PNG?alt=media&amp;token=e17bb458-bea5-497e-9600-02c497ca08c7" alt=""><figcaption></figcaption></figure>

{% hint style="warning" %}
`BgColor`can be in linear-gradient ( CSS Fonction )
{% endhint %}

#### Example :

<figure><img src="https://3270923211-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FZeCShdo8wBw9pTA0mhmj%2Fuploads%2FFHLrQ1tDMEHWeUv1tFma%2Fbgcolor-lineart-gradient.PNG?alt=media&amp;token=825f1627-ea6b-48b3-9792-daf906268e79" alt=""><figcaption></figcaption></figure>

#### &#x20;<a href="#https-cssgradient.io" id="https-cssgradient.io"></a>

here is a usefull link to generate **css linear-gradient :**

{% embed url="<https://cssgradient.io/>" %}

## BgShadow

Custom the shadow of the crate banner container

{% hint style="info" %}
`BgShadow : (string)`
{% endhint %}

#### Exemple :&#x20;

<figure><img src="https://3270923211-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FZeCShdo8wBw9pTA0mhmj%2Fuploads%2FUlyd5YV4rf21BrEwhH1N%2Fbgshadow.PNG?alt=media&amp;token=3b244658-17e9-49d2-8f7f-d2aea2724da8" alt=""><figcaption></figcaption></figure>

* "**`rgb()`" = Color**
* **"**`rgba()`" = **Color & Opacity**
* " `0px 0px 13px` " = **Shadow density**

{% hint style="warning" %}
`rgba()` can be replaced by **color name** like "*<mark style="color:orange;">`white`</mark>*" or **Hex color** code like "*<mark style="color:orange;">`#ECECEC`</mark>*"
{% endhint %}

Here is a usefull link to generate **rgb()** / **Hex** color :

{% embed url="<https://htmlcolorcodes.com/>" %}

## TxtShadow

Custom the crate [Name](#name) text-shadow&#x20;

{% hint style="info" %}
`TxtShadow : (string)`
{% endhint %}

#### Exemple :&#x20;

<figure><img src="https://3270923211-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FZeCShdo8wBw9pTA0mhmj%2Fuploads%2FETu5DWjQMdPRI9r7arqh%2Ftxtshadow.png?alt=media&amp;token=d2302425-1231-497d-b7ae-97d9bd34ab09" alt=""><figcaption></figcaption></figure>

* "`white`" = **Color**
* "`rgb()`" = **Color**
* "`rgba()`" = **Color & Opacity**
* "`0px 0px 13px`" = **Shadow density**

{% hint style="warning" %}
`"white"` can be replaced by **rgb()** like "*<mark style="color:orange;">`rgb(255,255,255)`</mark>*" or **Hex** color code like "*<mark style="color:orange;">`#ECECEC`</mark>*"
{% endhint %}

Here is a usefull link to generate **rgb()** / **Hex** color :

{% embed url="<https://htmlcolorcodes.com/>" %}

## ImgShadow

Custon the crate image shadow

{% hint style="info" %}
`ImgShadow : (string)`
{% endhint %}

**Exemple :**&#x20;

<figure><img src="https://3270923211-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FZeCShdo8wBw9pTA0mhmj%2Fuploads%2FvSxEq7j30IBsRFiuCMzL%2Fimgshadow.png?alt=media&amp;token=c46ced43-eac6-42ed-b3fb-0df8a47e86a4" alt=""><figcaption></figcaption></figure>

* "**`rgb()`" = Color**
* **"**`rgba()`" = **Color & Opacity**
* " `0px 0px 13px` " = **Shadow density**

{% hint style="warning" %}
`rgba()` can be replaced by **color name** like "*<mark style="color:orange;">`white`</mark>*" or **Hex color** code like "*<mark style="color:orange;">`#ECECEC`</mark>*"
{% endhint %}

Here is a usefull link to generate **rgb()** / **Hex** color :

{% embed url="<https://htmlcolorcodes.com/>" %}

## Lid

Custom the top component of the crate

{% hint style="info" %}
`Lid : (`<mark style="color:purple;">`lid`</mark>`.lidComponent)`
{% endhint %}

#### Exemple  :

<figure><img src="https://3270923211-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FZeCShdo8wBw9pTA0mhmj%2Fuploads%2FqD3JsZZbRmUBfqM4l6QW%2Flid.png?alt=media&amp;token=9506d02a-3a6f-41a6-a067-2357f519d4c4" alt=""><figcaption></figcaption></figure>

Check at the [Crates Component List](/loot-box-1.0/client-reference/crates-component-list.md#lid) section to see what colors and patterns are available for crates

## Front

Custom the front component of the crate

{% hint style="info" %}
`Front : (`<mark style="color:purple;">`front`</mark>`.frontComponent)`
{% endhint %}

#### Exemple  :

<figure><img src="https://3270923211-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FZeCShdo8wBw9pTA0mhmj%2Fuploads%2FriivwF9pnyxgl23hlD3T%2Ffront.png?alt=media&amp;token=c1afe663-0411-49b2-b4e1-94da5aad8dce" alt=""><figcaption></figcaption></figure>

Check at the [Crates Component List](/loot-box-1.0/client-reference/crates-component-list.md#front) section to see what colors and patterns are available for crates

## Inside

Customize the inside component of the box

{% hint style="info" %}
`Inside : (`<mark style="color:purple;">`inside`</mark>`.insideComponent)`
{% endhint %}

#### Exemple  :

<figure><img src="https://3270923211-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FZeCShdo8wBw9pTA0mhmj%2Fuploads%2FltxxqVSMpaKE1nE1NBxL%2Finside.png?alt=media&amp;token=e6c020b4-45c3-4490-b111-714c5934b258" alt=""><figcaption></figcaption></figure>

Check at the [Crates Component List](/loot-box-1.0/client-reference/crates-component-list.md#inside) section to see what colors and patterns are available for crates

## Items

Array of available items in the crate

{% hint style="info" %}
`Item : (Array)`
{% endhint %}

Available parameter :

* ItemName
* ItemLabel
* winRate
* Count

{% hint style="danger" %}
each of these parameter is necessary for each item
{% endhint %}

#### Exemple  :

<figure><img src="https://3270923211-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FZeCShdo8wBw9pTA0mhmj%2Fuploads%2FITj2wYTzHApGigDsFOef%2Fitem.png?alt=media&amp;token=65c44ca8-9b29-4c2f-99f3-287d535fa609" alt=""><figcaption></figcaption></figure>

* <mark style="color:blue;">**ItemLabel**</mark>

*name of displayed item*

{% hint style="info" %}
`ItemLabel : (string)`
{% endhint %}

* <mark style="color:blue;">**ItemName**</mark>

*name of item*

{% hint style="info" %}
`ItemName : (string)`
{% endhint %}

* <mark style="color:blue;">**winRate**</mark>

*Chance to win an item, check the "*[*winRate & Rarity*](/loot-box-1.0/client-reference/winrate-and-rarity.md)*" section.*

{% hint style="info" %}
`winRate : (int)`
{% endhint %}

* <mark style="color:blue;">**Count**</mark>

amount of money or number of items in the lot

{% hint style="info" %}
Count : (int)
{% endhint %}