▪️Lootbox 2.0 Skins
To create a custom skin for the Lootbox 2.0, you can use the ‘Mini-games skin editor’, following the same approach that is used for mini-games. The lootbox comes with 2 different layouts - Cards and Map.
You can find the existing packages below and create a custom one. Here are the available skins for the Card layout:




Below you can find the available skins for the Map layout:




Please follow these guidelines when creating a Custom Lootbox Map skin:
For all skins (7, 14, 25, 31 days):
'game-bg' and 'game-bg-mobile' images should be less than 900kb
For all skins (7, 14, 25, 31 days):
'game-bg' and 'game-bg-mobile' images should be in JPEG format
For 7 days skin:
The 'game-bg' image should be exactly 1835x1284
The 'game-bg-mobile' image should be exactly 527x1072
For 14 days skin:
The 'game-bg' image should be exactly 1835x2193
The 'game-bg-mobile' image should be exactly 527x1622
For 25 and 31 days skin:
The 'game-bg' image should be exactly 1835x3895
The 'game-bg-mobile' image should be exactly 527x3260
For the map layout, the positions of the prizes are pre-defined for 7, 14, 25, and 31 days, so if you create a Lootbox with 7, 14, 25, or 31 days you don't have to adjust the positions of the prizes on the map. If you want to introduce more or less than the pre-defined prizes you need to adjust the positions of the prizes in the CSS editor in the skin or in the game template. The maximum amount of days that can be added is 31.

Prize positioning for Lootbox Map
The default prize styles for the Lootbox map layout are shown below:
Prize positioning for Lootbox Map - 7 days
/* Desktop positioning for prizes */
.desktop-week-prize-1 {
top: 17%;
left: 46%;
}
.desktop-week-prize-2 {
top: 38%;
left: 55%;
}
.desktop-week-prize-3 {
top: 51%;
right: 21%;
}
.desktop-week-prize-4 {
top: 76%;
right: 15%;
}
.desktop-week-prize-5 {
top: 85%;
right: 35%;
}
.desktop-week-prize-6 {
top: 69%;
left: 39%;
}
.desktop-week-prize-7 {
top: 81%;
left: 16%;
}
/* Mobile positioning for prizes */
.mobile-week-prize-1 {
top: 43em;
left: 47em;
}
.mobile-week-prize-2 {
top: 72em;
left: 85em;
}
.mobile-week-prize-3 {
top: 84em;
left: 30em;
}
.mobile-week-prize-4 {
top: 121em;
left: 18em;
}
.mobile-week-prize-5 {
top: 143em;
right: 30em;
}
.mobile-week-prize-6 {
top: 189em;
right: 36em;
}
.mobile-week-prize-7 {
top: 173em;
left: 29em;
}
Prize positioning for Lootbox Map - 14 days
/* Desktop positioning for prizes */
.desktop-week-prize-1 {
top: 17%;
left: 46%;
}
.desktop-week-prize-2 {
top: 28%;
left: 58%;
}
.desktop-week-prize-3 {
top: 34%;
right: 20%;
}
.desktop-week-prize-4 {
top: 50%;
right: 16%;
}
.desktop-week-prize-5 {
top: 56%;
right: 37%;
}
.desktop-week-prize-6 {
top: 45%;
left: 42%;
}
.desktop-week-prize-7 {
top: 45%;
left: 21%;
}
.desktop-week-prize-8 {
top: 63%;
left: 17%;
}
.desktop-week-prize-9 {
top: 70%;
left: 34%;
}
.desktop-week-prize-10 {
top: 74%;
right: 42%;
}
.desktop-week-prize-11 {
top: 77%;
right: 17%;
}
.desktop-week-prize-12 {
top: 91%;
right: 16%;
}
.desktop-week-prize-13 {
top: 92%;
left: 37%;
}
.desktop-week-prize-14 {
top: 91%;
left: 14%;
}
/* Mobile positioning for prizes */
.mobile-week-prize-1 {
top: 43em;
left: 47em;
}
.mobile-week-prize-2 {
top: 64em;
right: 24em;
}
.mobile-week-prize-3 {
top: 103em;
right: 21em;
}
.mobile-week-prize-4 {
top: 84em;
left: 38em;
}
.mobile-week-prize-5 {
top: 111em;
left: 16em;
}
.mobile-week-prize-6 {
top: 142em;
left: 47em;
}
.mobile-week-prize-7 {
top: 155em;
right: 14em;
}
.mobile-week-prize-8 {
top: 189em;
right: 36em;
}
.mobile-week-prize-9 {
top: 190em;
left: 13em;
}
.mobile-week-prize-10 {
top: 230em;
left: 23em;
}
.mobile-week-prize-11 {
top: 232em;
right: 39em;
}
.mobile-week-prize-12 {
top: 251em;
right: 11em;
}
.mobile-week-prize-13 {
top: 283em;
right: 39em;
}
.mobile-week-prize-14 {
top: 267em;
left: 25em;
}
Prize positioning for Lootbox Map - 25 days
/* Desktop positioning for prizes */
.desktop-prize-1 {
top: 6%;
right: 53%;
}
.desktop-prize-2 {
top: 15%;
left: 58%;
}
.desktop-prize-3 {
top: 21%;
right: 15%;
}
.desktop-prize-4 {
top: 30%;
right: 19%;
}
.desktop-prize-5 {
top: 28%;
right: 44%;
}
.desktop-prize-6 {
top: 24%;
left: 23%;
}
.desktop-prize-7 {
top: 33%;
left: 14%;
}
.desktop-prize-8 {
top: 38%;
left: 32%;
}
.desktop-prize-9 {
top: 41%;
right: 40%;
}
.desktop-prize-10 {
top: 43%;
right: 14%;
}
.desktop-prize-11 {
top: 53%;
right: 18%;
}
.desktop-prize-12 {
top: 59%;
right: 35%;
}
.desktop-prize-13 {
top: 56%;
right: 59%;
}
.desktop-prize-14 {
top: 49%;
left: 24%;
}
.desktop-prize-15 {
top: 56%;
left: 10%;
}
.desktop-prize-16 {
top: 66%;
left: 16%;
}
.desktop-prize-17 {
top: 71%;
left: 37%;
}
.desktop-prize-18 {
top: 69%;
right: 33%;
}
.desktop-prize-19 {
bottom: 28%;
right: 8%;
}
.desktop-prize-20 {
bottom: 17%;
right: 19%;
}
.desktop-prize-21 {
bottom: 15%;
right: 44%;
}
.desktop-prize-22 {
bottom: 20%;
left: 25%;
}
.desktop-prize-23 {
bottom: 14%;
left: 8%;
}
.desktop-prize-24 {
bottom: 6%;
left: 24%;
}
.desktop-prize-25 {
bottom: 6%;
right: 50%;
}
/* Mobile positioning for prizes */
.mobile-prize-1 {
top: 47em;
right: 54em;
}
.mobile-prize-2 {
top: 84em;
right: 19em;
}
.mobile-prize-3 {
top: 115em;
right: 17em;
}
.mobile-prize-4 {
top: 105em;
right: 48em;
}
.mobile-prize-5 {
top: 110em;
left: 18em;
}
.mobile-prize-6 {
top: 148em;
left: 27em;
}
.mobile-prize-7 {
top: 160em;
left: 60em;
}
.mobile-prize-8 {
top: 180em;
right: 12em;
}
.mobile-prize-9 {
top: 206em;
right: 30em;
}
.mobile-prize-10 {
top: 191em;
right: 65em;
}
.mobile-prize-11 {
top: 218em;
left: 12em;
}
.mobile-prize-12 {
top: 250em;
left: 45em;
}
.mobile-prize-13 {
top: 260em;
left: 85em;
}
.mobile-prize-14 {
top: 300em;
left: 77em;
}
.mobile-prize-15 {
top: 289em;
left: 30em;
}
.mobile-prize-16 {
top: 318em;
left: 12em;
}
.mobile-prize-17 {
top: 337em;
left: 53em;
}
.mobile-prize-18 {
top: 362em;
right: 14em;
}
.mobile-prize-19 {
bottom: 229em;
right: 40em;
}
.mobile-prize-20 {
bottom: 206em;
left: 36em;
}
.mobile-prize-21 {
bottom: 170em;
left: 74em;
}
.mobile-prize-22 {
bottom: 148em;
left: 17em;
}
.mobile-prize-23 {
bottom: 108em;
left: 40em;
}
.mobile-prize-24 {
bottom: 75em;
left: 75em;
}
.mobile-prize-25 {
bottom: 53em;
right: 80em;
}
Prize positioning for Lootbox Map - 31 days
/* Desktop positioning for prizes */
.desktop-prize-1 {
top: 4%;
right: 53%;
}
.desktop-prize-2 {
top: 14%;
left: 54%;
}
.desktop-prize-3 {
top: 18%;
right: 20%;
}
.desktop-prize-4 {
top: 26%;
right: 16%;
}
.desktop-prize-5 {
top: 31.5%;
right: 29.5%;
}
.desktop-prize-6 {
top: 28%;
left: 54%;
}
.desktop-prize-7 {
top: 23.5%;
left: 30%;
}
.desktop-prize-8 {
top: 27%;
left:14%;
}
.desktop-prize-9 {
top: 34%;
left: 15%;
}
.desktop-prize-10 {
top: 38%;
left: 33%;
}
.desktop-prize-11 {
top: 40.5%;
left: 55%;
}
.desktop-prize-12 {
top: 41.5%;
right: 22.5%;
}
.desktop-prize-13 {
top: 47.5%;
right: 14%;
}
.desktop-prize-14 {
top: 54.5%;
right: 23%;
}
.desktop-prize-15 {
top: 59%;
left: 62%;
}
.desktop-prize-16 {
top: 57%;
left: 44%;
}
.desktop-prize-17 {
top: 50%;
left: 35%;
}
.desktop-prize-18 {
top: 49%;
left: 17%;
}
.desktop-prize-19 {
bottom: 42%;
left: 9%;
}
.desktop-prize-20 {
bottom: 36%;
left: 13%;
}
.desktop-prize-21 {
bottom: 31%;
left: 27%;
}
.desktop-prize-22 {
bottom: 29.5%;
}
.desktop-prize-23 {
bottom: 32%;
left: 68%;
}
.desktop-prize-24 {
bottom: 31%;
left: 90%;
}
.desktop-prize-25 {
bottom: 24%;
left: 92%;
}
.desktop-prize-26 {
bottom: 17.5%;
left: 79%;
}
.desktop-prize-27 {
bottom: 15.5%;
left: 59%;
}
.desktop-prize-28 {
bottom: 19.5%;
left: 33%;
}
.desktop-prize-29 {
bottom: 16%;
left: 8%;
}
.desktop-prize-30 {
bottom: 7%;
left: 25%;
}
.desktop-prize-31 {
bottom: 6%;
left: 53%;
}
/* Mobile positioning for prizes */
.mobile-prize-1 {
top: 57em;
right: 52em;
}
.mobile-prize-2 {
top: 86em;
right: 17em;
}
.mobile-prize-3 {
top: 120em;
right: 23em;
}
.mobile-prize-4 {
top: 100em;
right: 55em;
}
.mobile-prize-5 {
top: 126em;
left: 16em;
}
.mobile-prize-6 {
top: 154em;
left: 41em;
}
.mobile-prize-7 {
top: 158em;
right: 23em;
}
.mobile-prize-8 {
top: 188em;
right: 12em;
}
.mobile-prize-9 {
top: 203em;
right: 44em;
}
.mobile-prize-10 {
top: 197em;
left: 16em;
}
.mobile-prize-11 {
top: 229em;
left: 12em;
}
.mobile-prize-12 {
top: 252em;
left: 38em;
}
.mobile-prize-13 {
top: 250em;
left: 84em;
}
.mobile-prize-14 {
top: 286em;
left: 84em;
}
.mobile-prize-15 {
top: 292em;
left: 46em;
}
.mobile-prize-16 {
top: 300em;
left: 12em;
}
.mobile-prize-17 {
top: 330em;
left: 30em;
}
.mobile-prize-18 {
top: 338em;
right: 30em;
}
.mobile-prize-19 {
bottom: 250em;
right: 13em;
}
.mobile-prize-20 {
bottom: 233em;
left: 60em;
}
.mobile-prize-21 {
bottom: 215em;
left: 33em;
}
.mobile-prize-22 {
bottom: 190em;
left: 60em;
}
.mobile-prize-23 {
bottom: 160em;
left: 73em;
}
.mobile-prize-24 {
bottom: 157em;
left:40em;
}
.mobile-prize-25 {
bottom: 131em;
left: 14em;
}
.mobile-prize-26 {
bottom: 108em;
left: 43em;
}
.mobile-prize-27 {
bottom: 97em;
left: 77em;
}
.mobile-prize-28 {
bottom: 68em;
left: 68em;
}
.mobile-prize-29 {
bottom:73em;
right: 70em;
}
.mobile-prize-30 {
bottom: 41em;
right: 75em;
}
.mobile-prize-31 {
bottom: 25em;
right: 40em;
}
Last updated
Was this helpful?