# Styling

imaThe game can be styled using CSS, allowing customization of fonts, sizes, and bespoke graphics like card backs. When provided with a specification, we can create a fully custom theme for the game, ensuring it blends seamlessly with your host application. This includes adjusting visuals and UI elements to match your app’s design, delivering a cohesive user experience.

Contact us for the Figma template.

### THNDR Styling options

#### Header Options

* Close button is optional and is linked with a DOM message event to capture when it's tapped.
* Game name is optional, it can also be replaced with an image
* Game icon is optional
* Everything can be turned off to provide more space for your own header
* The player balance can be shown if desired

<figure><img src="https://1033025028-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F7nAHFmTck8SrFC7oayPr%2Fuploads%2Fs47caH4MUqYdsxsX9qc1%2Fheader-close-name.png?alt=media&#x26;token=9ae56ad0-5114-4a81-a16b-5f4ab76bf366" alt=""><figcaption></figcaption></figure>

<figure><img src="https://1033025028-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F7nAHFmTck8SrFC7oayPr%2Fuploads%2F80WIacbMRxGfYB8KvD59%2Fheader-icon-name.png?alt=media&#x26;token=09f1a4cd-3636-4dce-8dcd-1e4d772cd743" alt=""><figcaption></figcaption></figure>

<figure><img src="https://1033025028-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F7nAHFmTck8SrFC7oayPr%2Fuploads%2FmNYDg2udMUpa6NEU6SY5%2Fheader-wordmark.png?alt=media&#x26;token=b7ca2a92-a8df-4f49-a4c5-9bfee6e2e868" alt=""><figcaption></figcaption></figure>

<figure><img src="https://1033025028-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F7nAHFmTck8SrFC7oayPr%2Fuploads%2FVfGNX0OeS3sByfyL6kk9%2Fheader-none.png?alt=media&#x26;token=8201afb2-79e7-4367-bf47-a93bf0fba437" alt=""><figcaption></figcaption></figure>

<figure><img src="https://1033025028-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F7nAHFmTck8SrFC7oayPr%2Fuploads%2FB8BKzOQzKfXEOye7HIDX%2Fheader-balance.png?alt=media&#x26;token=494869e6-aa35-4995-a04c-3d387cc5fc33" alt=""><figcaption></figcaption></figure>

#### Popup Drawers

All popup drawer can be modified with the following:

* Close button position, left or right

<figure><img src="https://1033025028-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F7nAHFmTck8SrFC7oayPr%2Fuploads%2FILkcUaB532SjW0vVucAZ%2Fpay-drawer-close-button.png?alt=media&#x26;token=c3553381-06be-46ba-b2b7-bf967f6b7351" alt=""><figcaption></figcaption></figure>

<figure><img src="https://1033025028-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F7nAHFmTck8SrFC7oayPr%2Fuploads%2FP5Ui76QawZQAAZuF6k3n%2Fwager-drawer-linear.png?alt=media&#x26;token=410e6805-b000-4e00-b6f6-b710136cc75f" alt=""><figcaption></figcaption></figure>

#### Wager Popup Drawer

* We can position the practice game option in the first or last position in the grid.
* The players balance can be added into the popup allowing them to see what they can use.

<figure><img src="https://1033025028-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F7nAHFmTck8SrFC7oayPr%2Fuploads%2Fq0Zx17KQFRrLVqhPobfB%2Fwager-drawer-practice-balance.png?alt=media&#x26;token=64e775f2-955d-4cda-856f-7b50094ec114" alt=""><figcaption></figcaption></figure>

#### Payment Popup Drawer<br>

* The game icon can be hidden

<figure><img src="https://1033025028-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F7nAHFmTck8SrFC7oayPr%2Fuploads%2FHxKmMW1LbXPZfNUzeYtP%2Fpay-drawer-game-icon.png?alt=media&#x26;token=95011056-7a7f-4357-9419-62a96fa39174" alt=""><figcaption></figcaption></figure>

<figure><img src="https://1033025028-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F7nAHFmTck8SrFC7oayPr%2Fuploads%2FILkcUaB532SjW0vVucAZ%2Fpay-drawer-close-button.png?alt=media&#x26;token=c3553381-06be-46ba-b2b7-bf967f6b7351" alt=""><figcaption></figcaption></figure>

#### General Options

* Show/hide the worldwide activity feed

<figure><img src="https://1033025028-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F7nAHFmTck8SrFC7oayPr%2Fuploads%2FhnjwQbN51yYVcW6IFfdc%2Factivity-feed.png?alt=media&#x26;token=49ad87f3-f1b0-42c7-af42-b2e1e54fd914" alt=""><figcaption></figcaption></figure>

* Confetti color for a win

<figure><img src="https://1033025028-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F7nAHFmTck8SrFC7oayPr%2Fuploads%2FXAz9VHSavxcV4SAF6NA6%2Fconfetti.png?alt=media&#x26;token=0ba8d1be-753e-4a8c-8f1f-370679cc3a71" alt=""><figcaption></figcaption></figure>
