# UI customization options

{% embed url="<https://youtu.be/mXJ8cHAgNIQ?feature=shared&t=124>" %}

## Overview

Breakroom's [UI](https://docs.breakroom.tech/getting-started/ui-tour), or *user interface*, consists of informational displays and tools that users need to participate in your World. [World Owners](https://docs.breakroom.tech/opening-the-doors/creating-and-managing-user-accounts/world-level-user-permissions) and [World Administrators](https://docs.breakroom.tech/opening-the-doors/creating-and-managing-user-accounts/world-level-user-permissions) have the option to customize the basic UI components at any time through the Dashboard, including changing the UI scale and color palette.

## Enabling or disabling UI functions

<div data-with-frame="true"><figure><img src="https://1679086873-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5gOE0ivmDtuXfHroTVSx%2Fuploads%2FH762OVPknOn393Qm4KYY%2FUI_Custom_001.png?alt=media&#x26;token=62e055ff-aa14-43f6-a4b7-839c1f63e663" alt=""><figcaption><p>Pictured: The Dashboard > World Customization > Features tab.</p></figcaption></figure></div>

To enable or disable UI features, follow these steps.

1. Navigate to your [Dashboard](https://docs.breakroom.tech/building-new-worlds/breakroom-dashboard-tour).
2. Click on the **World Customization > Features tab**.
3. Check the **box** beside each UI component you want to make available to your users. Uncheck the box beside each component you want to hide from the UI.
4. Click the **Save Changes button**.

### End user impact

The following UI components can be toggled on or off via the Dashboard. Here's how removing each UI component may affect your users.

<table data-header-hidden><thead><tr><th width="180"></th><th></th></tr></thead><tbody><tr><td>Component</td><td>End user impact if disabled</td></tr><tr><td>Chat button</td><td>Users will not be able to access <a href="../../getting-started/communicating-with-other-users#text-chat">text chat</a> and will be limited to using local <a href="../../getting-started/communicating-with-other-users#voice-chat">voice chat</a> to communicate with one another.</td></tr><tr><td>Hot Bar</td><td>Users will not be able to <a href="../../getting-started/controlling-your-avatar#installing-gestures-in-the-hot-bar">equip</a> Inventory items for quick deployment.</td></tr><tr><td>People button</td><td>Users will not be able to open the <a href="../exploring-breakroom/networking-with-other-users/people">People window</a>, which allows them to locate other users and message them directly. They will also lose access to their <a href="../exploring-breakroom/networking-with-other-users/groups">Groups list</a>.</td></tr><tr><td>Explore button</td><td><p>Users will not be able to open the <a href="../exploring-breakroom/using-the-explore-window">Explore window</a>, which allows them to</p><p>locate and teleport to <a href="../../building-new-worlds/creating-and-managing-regions#featuring-a-region">Featured Regions</a>.</p></td></tr><tr><td>Meetings button</td><td>Users will not be able to open the <a href="../exploring-breakroom/using-the-meetings-window">Meetings window</a>, or see the posted event schedule.</td></tr><tr><td>Inventory button</td><td>Users will not be able to open the <a href="../using-the-region-editor#the-inventory-window">Inventory window</a>, which allows them to access any in-world items they have collected or purchased.</td></tr><tr><td>Outfit button</td><td>Users will not be able to open the <a href="../getting-started/customizing-your-avatar/editing-avatars-in-the-outfit-window">Outfit window</a>, which means they will not be able to edit their avatars and may lose some clothing and avatar component customization options.</td></tr><tr><td>Shop button</td><td>Users will not be able to access the <a href="../getting-started/customizing-your-avatar/using-the-sinewave-shop">Sinewave Shop</a>.</td></tr><tr><td>Snapshot button</td><td>Users will not be able to open the <a href="../exploring-breakroom/snapshots">Snapshot window</a> in order to take pictures of their avatars or your virtual event.</td></tr><tr><td>Mini map</td><td>Users will not be able to activate the <a href="../../getting-started/ui-tour#the-mini-map">mini map</a> in the upper right corner of their screens and will lose access to the <a href="../building-new-worlds/region-settings">Region Information window</a>.</td></tr><tr><td>Quests</td><td>Users will not have access to the <a href="../advanced-tutorials/installing-the-quest-system">Quest window</a>, where they can track their progress on any quests they've started.</td></tr><tr><td>Search</td><td>Users won't be able to search for Regions, users, groups, or Sinewave Shop items.</td></tr><tr><td>Clock</td><td>Users will not see a clock displayed at the top of the screen.</td></tr><tr><td>Gold</td><td>Users will not see how much Gold they have <em>or</em> the button that allows them to purchase additional Gold <a href="../../getting-started/customizing-your-avatar/using-the-sinewave-shop#breakroom-currencies">currency</a>. They will only see how much Silver currency they have.</td></tr><tr><td>Currency</td><td>Users will not see their current Gold <em>or</em> Silver <a href="../../getting-started/customizing-your-avatar/using-the-sinewave-shop#breakroom-currencies">currency</a> holdings displayed at the top of the screen.</td></tr><tr><td>Email</td><td>Users will not be able to send <a href="../../getting-started/communicating-with-other-users#in-world-email">Breakroom emails</a> or read emails sent by other people.</td></tr><tr><td>Auction</td><td>Users will not be able to sell or purchase Sinewave Shop items via auction.</td></tr></tbody></table>

## Changing the default UI scale

<div data-with-frame="true"><figure><img src="https://1679086873-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5gOE0ivmDtuXfHroTVSx%2Fuploads%2FVHvCYvoklRwrqrMbaW4h%2FUI_Custom_002.png?alt=media&#x26;token=81727e67-c3f2-4bf7-bce6-891e96363676" alt=""><figcaption><p>Pictured: The Dashboard > World Customization > Features tab, "Default Scale" panel.</p></figcaption></figure></div>

In order to improve accessibility for your users, you may wish to change the default scale of the UI. Scale changes implemented through the Dashboard will apply to every Region in your Breakroom World.

To adjust the default UI scale, follow these steps.

1. Navigate to your [Dashboard](https://docs.breakroom.tech/building-new-worlds/breakroom-dashboard-tour).
2. Click on the **World Customization > Features tab**.
3. Scroll down to the "Default Scale" panel. Click one of the **percentage buttons** to choose a new UI scale. (Note: 100% represents the default UI scale.)
4. Click the **Save Changes button**.

{% hint style="info" %}
Users can also adjust the UI scale to meet their specifications through the in-world [Settings panel](https://docs.breakroom.tech/getting-started/settings#ui-settings).
{% endhint %}

## Customizing the UI colors

{% embed url="<https://youtu.be/rI09diYGED4?feature=shared>" %}

The UI Color Setting panel allows you to customize the UI color palette. With just a few clicks, the UI can instantly harmonize with your corporate branding guidelines or complement your Region design. UI color changes implemented through the Dashboard will apply to every Region in your Breakroom World.

<div data-with-frame="true"><figure><img src="https://1679086873-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5gOE0ivmDtuXfHroTVSx%2Fuploads%2FlGSxW9zazpM4Q5YHD09J%2FUI_Custom_003.png?alt=media&#x26;token=85e8c11e-e82d-4801-91ae-0af3c6ace3a2" alt=""><figcaption><p>Pictured: The Dashboard > World Customization > Color Theme tab.</p></figcaption></figure></div>

To customize the UI colors, follow these steps.

1. Navigate to your [Dashboard](https://docs.breakroom.tech/building-new-worlds/breakroom-dashboard-tour).
2. Click on the **World Customization > Color Theme tab.**
3. In the UI Color Setting panel, you'll see six color swatches. Click on any of these swatches, and a color picker will appear.
   1. You can use the color spectrum tools to generate different colors and explore your options. Your choices will be displayed on the mockup UI in real time, so feel free to experiment.
   2. Click on the arrow icons in the bottom right corner of the color picker to cycle the fields through RGB, HSL, and HEX. Enter values or codes into any of these fields to apply a specific color to a chosen UI element.
4. When you are satisfied, click the **Save Changes button**.

<div data-with-frame="true"><figure><img src="https://1679086873-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5gOE0ivmDtuXfHroTVSx%2Fuploads%2F2UKr6EWxC3nbQyP4rG6Q%2FUI_Custom_004.png?alt=media&#x26;token=28e153e4-0e6a-4358-b19e-04df6b86ce5a" alt=""><figcaption><p>Pictured: An example of the same UI in the same Region, but with different UI color schemes.</p></figcaption></figure></div>
