Custom Theme

You are able to customize the look of the Skillz UI using our “Custom Theme” feature so that it can feel native to your game. Although we recommend customizing your theme, it is not mandatory, and you may opt to stick with our default “Dark Theme.” You can edit your game’s theme before you launch or edit a previously launched game.

Finding the Theme Page

First Time Users

Open the integration process by either starting a new project, or continuing one in progress, by clicking the corresponding button in the top right corner of your home screen.

Screen_Shot_2018-11-05_at_10.03.39_AM.png

Once you’ve completed all required preliminary steps from the left menu within the “Integrate” section, you’ll be able to access the “SDK Theme” as the first step within the “Configure” section.

Screen_Shot_2018-11-05_at_10.05.56_AM.png 

Returning Developers

If you’ve finished launching a game or have more than one game in progress, go to your dashboard and click the "edit game" button for any of your previously integrated games and then access the SDK Theme page on your sidebar.

Screen_Shot_2018-11-05_at_10.06.46_AM.png

Selecting a Theme

To choose one of the Skillz pre-made themes, select an option from the dropdown menu. Please note that a game without a theme will default to the "Dark" setting.

Screen_Shot_2018-11-05_at_10.08.12_AM.png 

You can then further customize any of the colors or icons by clicking "Create a custom theme to better match your game” and then editing any of the form fields within the dropdown menu.

Screen_Shot_2018-11-05_at_12.39.41_PM.png 

Once you’re happy with your changes, click “Save” and we’ll compile a .JSON file that will be available for you to download.

Please note: A game may only have 1 custom theme, so making additional changes and clicking “Save” will overwrite the previous theme.

The advanced settings allow you to edit and customize each detail of the UI. Colors and gradients can be changed by specifying either RGB or Hex values. The majority of images such as the tournament icons or background can be changed.

Downloading Your Custom Theme

A preview is available for each of the pre-made themes, however there are no previews for custom themes. Follow the instructions below to download, implement, and view your new custom theme within the sandbox environment.

iOS

There are two different ways to view your custom theme with iOS.

Email

Once you hit save, we will email you a new SDK that includes your custom theme - please give a few minutes for the email to arrive in your inbox. Then you can integrated the Custom SDK like you would for the normal SDK (instructions here).

 JSON

You may also download the JSON file itself within the download table.

Download_JSON_Android.png

Next, you’ll open your game’s XCode project and find the file Skillz.framework

Screen_Shot_2019-01-09_at_6.03.08_PM.png

Select the option “Show in Finder.”

Screen_Shot_2019-01-09_at_6.03.18_PM.png

Next, find the old JSON file within the folder and replace it with the file theme.json that you’ve just downloaded.Screen_Shot_2019-01-09_at_6.04.02_PM.png

Now you should be able to open your app, launch Skillz and take a look at your new theme within Sandbox. To ensure you are viewing the latest theme, force quit (double-tap home button and swipe away) and restart your game after each change.  

Android

To apply a custom theme to your Android game:

Step 1

Download your JSON file either from a link sent out via email or the table pictured below.

Download_JSON_Android.png

 Step 2

Create an assets folder in Android Studio if your project does not already have one:

Screen_Shot_2019-01-10_at_4.51.27_PM.png

Then press the FINISH button on the subsequent dialog that appears:

Screen_Shot_2019-01-10_at_4.52.23_PM.png

Step 3

Now select the assets folder you just created in your project’s Android view, and right click it to bring up a contextual menu: 

Screen_Shot_2019-01-10_at_5.00.39_PM.png 

Choose “Reveal in Finder” (or “Reveal in Explorer” on Windows). This will open the corresponding assets folder on your hard drive.

Now locate the custom_theme.json file that you downloaded and drag it into the assets folder on your hard  drive:Screen_Shot_2019-01-10_at_5.05.42_PM.png

Step 4

Finally, confirm that the custom_theme.json file has now been added to your Android Studio project:

Screen_Shot_2019-01-10_at_5.05.53_PM.png

If the custom_theme.json file appears in the project as shown above, then you have successfully applied your custom Skillz theme to your Android game!

Now you should be able to open your app, launch Skillz and take a look! To ensure you are viewing the latest theme, force quit (double-tap home button and swipe away) and restart your game after each change.  

Unity

The Unity SDK does not come packaged with a custom theme, and you will need to integrate the custom theme separately for iOS and/or Android. Access your files either via the email sent to you or within the download table.

  • For Unity-Android: Follow the instructions for Android
  • For Unity-iOS: Follow the instructions for iOS by downloading the JSON file first.

Syncing your theme to Production

First time users: click “Next” to continue integrating your game. Your new custom them will sync when you complete integration and publish your game.

Returning users: once you’re happy with your theme on sandbox click request sync pictured as below. Our integration team will emails you within 5 business days to let you know when your theme has been synced to your production game.

Request_Sync.png