# Custom skins for Mini-games ### Overview You can prepare custom skin for the 'Spin the Wheel', 'Scratch Card', 'Treasure Hunt', 'Lootbox 2.0' and 'Giftbox' games directly from the Smartico Back Office by navigating to the **Gamification tab** and then to the **Mini games skin menu**

When you upload an image package, you'll now see detailed information about each file, including a preview, format, dimensions, status, size, and more. If there are any missing or incorrect files, you'll be notified immediately. To view the currently uploaded package, simply click the 'Open files' button. {% hint style="success" %} Important: * All images should be in the same format, and size and have the same names as in the reference package * Images should be uploaded unpacked (not as an archive) * For the "Spin the Wheel" game, pay attention to how background images for different sectors are designed. There are separators for each sector that should be placed exactly at the same angles as in the reference design, otherwise, the text of the prize will overlap the separators {% endhint %}

In the configuration screen, you can upload the game's image package and customize the skin using the Custom CSS option.

{% hint style="success" %} We can provide a Figma template for Mini-games skins upon request. Please note that any images exported from the template must be compressed before uploading them to the BO. You can use [\[this link\]](https://tinypng.com/) to compress your images. For further assistance, please contact your Customer Success Manager! {% endhint %} * To view the available skins for the **Spin the Wheel** mini-game, click[ **here.**](https://help.smartico.ai/welcome/products/mini-games/custom-skins-for-mini-games/spin-the-wheel-skins) * To view the available skins for the **Scratch Card** mini-game, click[ **here.**](https://help.smartico.ai/welcome/products/mini-games/custom-skins-for-mini-games/scratch-card-skins) * To view the available skins for the **Giftbox** mini-game, click [**here**](https://help.smartico.ai/welcome/products/mini-games/custom-skins-for-mini-games/giftbox-skins)**.** * To view the available skins for the **Treasure Hunt** mini-game, click [**here**](https://help.smartico.ai/welcome/products/mini-games/custom-skins-for-mini-games/treasure-hunt-skins)**.** * To view the available skins for the **Lootbox 2.0** mini-game, click [**here**](https://help.smartico.ai/welcome/products/mini-games/custom-skins-for-mini-games/lootbox-2.0-skins)**.** * To view the available skins for the **Missions Lootbox** mini-game, click [**here**](https://help.smartico.ai/welcome/products/mini-games/custom-skins-for-mini-games/missions-lootbox-skin)**.** ### Customize mini-games with CSS You can also customize some elements using custom CSS. The most useful styles that you can use are the following. {% hint style="success" %} You can use only 'Google Font' fonts. * To change the font family you need to Copy the import of the needed font family from Google Fonts and paste it in the CSS/SCSS file. * The Font family can be set globally for all texts or used only in a specific location. {% endhint %}

/* Google fonts only, example of import query */
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');

/* text of the prize on sector */
.saw-view .wheel-sector-name .sector-text {
   color: yellow !important;
}

/* the name of the game shown under the wheel */
.saw-info-name {
   color: red !important;
}

/* style of the "?" mark opening description of the game */
.saw-info-link {
  filter: invert(0);
}

/* style of the buttons in the description popup when old pop-ups are enabled */
.saw-modal-actions > div {
    background-color: white !important;
    color: black !important;
    border: 2px solid black !important;
  }

/*style of the title in the description popup when new pop-ups are enabled */
.saw-modal-container-new .saw-modal-title {
  color: white !important;
}

/* color of text main text in the description popup */
.saw-modal-body-content {
    color: white !important;
 }

/* color and style of the links in the description popup */
.saw-modal-body-content a {
   color: white !important;
   text-decoration: underline;
}

/* style of the title in the description popup */
.saw-modal-content .saw-modal-title > div > div {
  color: yellow !important;
  text-shadow: none !important;
}

/* the default lights on the wheel’s rim removed and the shining turned off */
.wheel-light-behind, .wheel-lights {
 display: none !important;
}

/* style of the sound button */
.saw-sound-button {
filter: invert(0);
}

/* style of the Play button on Scratch Card */
.button-area > div {
box-shadow: 0 0 6px 0 black !important;
color: white !important;
background: #0077FF !important;
}

/* border of the Scratch Card */
.scratch-card-content {
border: none !important;
}

/* Scratch Card prize text color */
.prizes > div > div {
  color: black !important;
}

For Giftbox Only
/* style of game rules text button (text under attempts) */
.giftboxes-root .prizeboard-game-rules {

}
/* styles for popup title */
.saw-modal-wrapper .saw-modal-container-v2 
.saw-modal-content .saw-modal-title {

}

/* styles for popup content */
.saw-modal-wrapper .saw-modal-container-v2 
.saw-modal-content .saw-modal-message {

}

/* style of game modal action button */
.saw-modal-wrapper .saw-modal-container-v2 
.saw-modal-content .saw-modal-actions {

}

### Updated pop-ups in mini-games You can create Custom designs for the pop-ups inside the mini-games. The **‘Use new pop-ups’** option is available in the Mini-games Skins section in the BO. {% hint style="success" %} * For newly created skins the **'Use new pop-ups’** option is enabled by default and cannot be disabled. * The skin package for the new pop-ups includes different images. Make sure you're uploading the correct package that contains the new visuals. {% endhint %}

GF: Example of the new pop-up in Mini-games

Here you can find an example of a Scratch Card skin package: {% file src="" %} Below are the required image files and naming conventions for implementing pop-ups in a mini-game:

Image Name	Files	Sizes
popup_bg_bottom	popup_bg_bottom.png	50x50 px
popup_bg_bottom_left	popup_bg_bottom_left.png	50x50 px
popup_bg_bottom_right	popup_bg_bottom_right.png	50x50 px
popup_bg_center	popup_bg_center.png	50x50 px
popup_bg_left	popup_bg_left.png	50x50 px
popup_bg_right	popup_bg_right.png	50x50 px
popup_bg_top	popup_bg_top.png	50x50 px
popup_bg_top_left	popup_bg_top_left.png	50x50 px
popup_bg_top_right	popup_bg_top_right.png	50x50 px
button_primary_bg_left	button_primary_bg_left.png	22x44 px
button_primary_bg_center	button_primary_bg_center.png	22x44 px
button_primary_bg_right	button_primary_bg_right.png	22x44 px
button_secondary_bg_left	button_secondary_bg_left.png	22x44 px
button_secondary_bg_right	button_secondary_bg_right.png	22x44 px
button_secondary_bg_center	button_secondary_bg_center.png	22x44 px

These images are used to create the background and buttons of the pop-up.\ You can customize the font color of the text content by using the 'Override CSS' field, either at the skin level or directly within the mini-game settings in the BO.