# Custom background & theme

The theme customization options are available in the "Theme" section, as shown in the screenshot below.

* **Upload background** - select the file used as a background image for the device.
* **View background** - download/view the current background image.
* **Edit custom styles** - open the editor of the custom styles file. See [#working-with-custom-styles](#working-with-custom-styles "mention") for details.

<figure><img src="https://1439200156-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LBlLAzpLLq2t-ZuKXiI%2Fuploads%2FVc4RgQ0AdPqu2k1MlSTC%2Fimage.png?alt=media&#x26;token=96e9a8f8-534f-4d8e-b213-7cee2453b5ff" alt=""><figcaption><p>Device settings screen with a "Theme" section highlighted.</p></figcaption></figure>

### Working with custom styles

Roombelt allows you to set custom CSS code to fully customize a product's look and feel. While powerful, it requires basic programming skills. If you have questions, [contact us](mailto:mateusz@roombelt.com), and we will help.

<figure><img src="https://1439200156-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LBlLAzpLLq2t-ZuKXiI%2Fuploads%2Ffd6H98xsOkN2klv50UrH%2Fimage.png?alt=media&#x26;token=eb8c61d2-d8c5-42d6-af6b-f5a4698709da" alt=""><figcaption><p>Edit custom styles dialog</p></figcaption></figure>

### Sample customization snippets

#### Setting a device font size

Users can adjust the font size used by a tablet using the "+" and "-" buttons displayed on the bottom of the device (see screenshot below).

<figure><img src="https://1439200156-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LBlLAzpLLq2t-ZuKXiI%2Fuploads%2Fdh0TfdmOcGESjXwzxjew%2Fimage.png?alt=media&#x26;token=f78ee950-f811-4d0a-a56f-ae700f7b6458" alt=""><figcaption><p>Buttons to adjust font size on a device</p></figcaption></figure>

If you prefer to have a fixed font size (so that it cannot be changed with the "+" and "-" buttons) add the following code at the beginning of the styles file:

```css
/* Change "30px" to a value that looks best on your device */
html { font-size: 30px !important; }
```

#### Hiding the bottom "configuration bar"&#x20;

Right after opening Roombelt on a device, a small "configuration bar" is displayed on the bottom of the screen for a few minutes (see screenshot below for reference). Some customers prefer to hide it after the initial configuration. You can achieve this by adding the following line at the very beginning of the styles file:

```css
.custom-display-options-bar { display: none; }
```

<figure><img src="https://1439200156-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LBlLAzpLLq2t-ZuKXiI%2Fuploads%2FMLOZVsIgJn11562shCsO%2Fimage.png?alt=media&#x26;token=ffe61f38-7e6d-4f87-852a-54d0220c6fd6" alt=""><figcaption><p>Roombelt device with the "configuration bar" visible.</p></figcaption></figure>
