---
title: "Live Custom Styling Guide"
slug: "live-custom-styling-guide"
description: "Customize your Live experience with color variables and templates. Download the Excel file to apply your desired changes easily."
updated: 2023-09-20T16:58:54Z
published: 2023-09-20T16:58:54Z
canonical: "docs.screenmeet.com/live-custom-styling-guide"
---

> ## Documentation Index
> Fetch the complete documentation index at: https://docs.screenmeet.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Custom Styling Guide

The styling of the Live experience can be customized. Currently, these customizations have to be applied by the ScreenMeet team.

The illustrations below will provide a general guideline for customized elements.

Below is a template with the default values and a column for desired changes.

**Once ready, please download the Excel document, input your desired colors, and attach it to an email to [support@screenmeet.com](mailto:support@screenmeet.com) or within your support desk ticket.**

[https://docs.google.com/spreadsheets/d/10qnA8T_yCUyJd5RClD8i7CVhq1pVD8zl/edit?usp=sharing&ouid=114676371658156094453&rtpof=true&sd=true](https://docs.google.com/spreadsheets/d/10qnA8T_yCUyJd5RClD8i7CVhq1pVD8zl/edit?usp=sharing&ouid=114676371658156094453&rtpof=true&sd=true)

## **Color Variables**

The majority of the styling is derived from a set of color variables. These variables can be overridden to produce different looks for the product.

The following color variables and their default colors are:

1. primary-brackground: <devtools-color-swatch style="white-space: nowrap; box-sizing: border-box; min-width: 0px; min-height: 0px;"><span class="color-swatch" style="position: relative; margin-left: 1px; margin-right: 2px; width: 10px; height: 10px; top: 1px; display: inline-block; user-select: none; background-image: var(--image-file-checker); line-height: 10px;" title="Open color picker. Shift + Click to change color format."><span class="color-swatch-inner" style="width: 10px; height: 10px; display: inline-block; border: 1px solid rgba(128, 128, 128, 0.6); box-sizing: border-box; cursor: pointer; background-color: rgb(36, 133, 207);"></span></span> <slot><span style="box-sizing: border-box; min-width: 0px; min-height: 0px;">#2485CF</span></slot>&nbsp;</devtools-color-swatch>
2. primary-foreground: <devtools-color-swatch style="white-space: nowrap; box-sizing: border-box; min-width: 0px; min-height: 0px;"><span class="color-swatch" style="position: relative; margin-left: 1px; margin-right: 2px; width: 10px; height: 10px; top: 1px; display: inline-block; user-select: none; background-image: var(--image-file-checker); line-height: 10px;" title="Open color picker. Shift + Click to change color format."><span class="color-swatch-inner" style="width: 10px; height: 10px; display: inline-block; border: 1px solid rgba(128, 128, 128, 0.6); box-sizing: border-box; cursor: pointer; background-color: rgb(255, 255, 255);"></span></span> <slot><span style="box-sizing: border-box; min-width: 0px; min-height: 0px;">#ffffff</span></slot>&nbsp;</devtools-color-swatch>
3. secondary-background: <devtools-color-swatch style="white-space: nowrap; box-sizing: border-box; min-width: 0px; min-height: 0px;"><span class="color-swatch" style="position: relative; margin-left: 1px; margin-right: 2px; width: 10px; height: 10px; top: 1px; display: inline-block; user-select: none; background-image: var(--image-file-checker); line-height: 10px;" title="Open color picker. Shift + Click to change color format."><span class="color-swatch-inner" style="width: 10px; height: 10px; display: inline-block; border: 1px solid rgba(128, 128, 128, 0.6); box-sizing: border-box; cursor: pointer; background-color: rgb(54, 48, 55);"></span></span> <slot><span style="box-sizing: border-box; min-width: 0px; min-height: 0px;">#363037</span></slot>&nbsp;</devtools-color-swatch>
4. secondary-foreground: <devtools-color-swatch style="white-space: nowrap; box-sizing: border-box; min-width: 0px; min-height: 0px;"><span class="color-swatch" style="position: relative; margin-left: 1px; margin-right: 2px; width: 10px; height: 10px; top: 1px; display: inline-block; user-select: none; background-image: var(--image-file-checker); line-height: 10px;" title="Open color picker. Shift + Click to change color format."><span class="color-swatch-inner" style="width: 10px; height: 10px; display: inline-block; border: 1px solid rgba(128, 128, 128, 0.6); box-sizing: border-box; cursor: pointer; background-color: rgb(255, 255, 255);"></span></span> <slot><span style="box-sizing: border-box; min-width: 0px; min-height: 0px;">#ffffff</span></slot>&nbsp;</devtools-color-swatch>
5. danger-background: <devtools-color-swatch style="white-space: nowrap; box-sizing: border-box; min-width: 0px; min-height: 0px;"><span class="color-swatch" style="position: relative; margin-left: 1px; margin-right: 2px; width: 10px; height: 10px; top: 1px; display: inline-block; user-select: none; background-image: var(--image-file-checker); line-height: 10px;" title="Open color picker. Shift + Click to change color format."><span class="color-swatch-inner" style="width: 10px; height: 10px; display: inline-block; border: 1px solid rgba(128, 128, 128, 0.6); box-sizing: border-box; cursor: pointer; background-color: rgb(215, 57, 48);"></span></span> <slot><span style="box-sizing: border-box; min-width: 0px; min-height: 0px;">#D73930</span></slot>&nbsp;</devtools-color-swatch>
6. panel-background: <devtools-color-swatch style="white-space: nowrap; box-sizing: border-box; min-width: 0px; min-height: 0px;"><span class="color-swatch" style="position: relative; margin-left: 1px; margin-right: 2px; width: 10px; height: 10px; top: 1px; display: inline-block; user-select: none; background-image: var(--image-file-checker); line-height: 10px;" title="Open color picker. Shift + Click to change color format."><span class="color-swatch-inner" style="width: 10px; height: 10px; display: inline-block; border: 1px solid rgba(128, 128, 128, 0.6); box-sizing: border-box; cursor: pointer; background-color: rgb(50, 50, 50);"></span></span> <slot><span style="box-sizing: border-box; min-width: 0px; min-height: 0px;">#323232</span></slot>&nbsp;</devtools-color-swatch>
7. room-background: <devtools-color-swatch style="white-space: nowrap; box-sizing: border-box; min-width: 0px; min-height: 0px;"><span class="color-swatch" style="position: relative; margin-left: 1px; margin-right: 2px; width: 10px; height: 10px; top: 1px; display: inline-block; user-select: none; background-image: var(--image-file-checker); line-height: 10px;" title="Open color picker. Shift + Click to change color format."><span class="color-swatch-inner" style="width: 10px; height: 10px; display: inline-block; border: 1px solid rgba(128, 128, 128, 0.6); box-sizing: border-box; cursor: pointer; background-color: rgb(17, 27, 36);"></span></span> <slot><span style="box-sizing: border-box; min-width: 0px; min-height: 0px;">#111B24</span></slot>&nbsp;</devtools-color-swatch>
8. lobby-background: <devtools-color-swatch style="white-space: nowrap; box-sizing: border-box; min-width: 0px; min-height: 0px;"><span class="color-swatch" style="position: relative; margin-left: 1px; margin-right: 2px; width: 10px; height: 10px; top: 1px; display: inline-block; user-select: none; background-image: var(--image-file-checker); line-height: 10px;" title="Open color picker. Shift + Click to change color format."><span class="color-swatch-inner" style="width: 10px; height: 10px; display: inline-block; border: 1px solid rgba(128, 128, 128, 0.6); box-sizing: border-box; cursor: pointer; background-color: rgb(246, 246, 246);"></span></span> <slot><span style="box-sizing: border-box; min-width: 0px; min-height: 0px;">#f6f6f6</span></slot>&nbsp;</devtools-color-swatch>

The illustrations below demonstrate how these values apply to various parts of the application:

### Lobby

![](https://cdn.document360.io/9da39725-20e5-434f-83a4-d630456099dc/Images/Documentation/lobby.png)

### In-Room

![](https://cdn.document360.io/9da39725-20e5-434f-83a4-d630456099dc/Images/Documentation/room.png)

### Dialogs

![](https://cdn.document360.io/9da39725-20e5-434f-83a4-d630456099dc/Images/Documentation/dialog.png)

## Testing Styles in Real Time

You can try and preview your styles in real time by using the Chrome inspector tools.

1. Enter a live call
2. Open the chrome developer tools, then go to the **Elements** tab and then the **Styles** sub-tab
3. Select the root **<html>** element
4. You will see the variables above defines as CSS variables in the **:root** style element:  
![](https://cdn.document360.io/9da39725-20e5-434f-83a4-d630456099dc/Images/Documentation/image-1641830971547.png)
5. Modify the variables in real time to see the changes reflected on the page.

### Example Customizations:

![](https://cdn.document360.io/9da39725-20e5-434f-83a4-d630456099dc/Images/Documentation/image-1641831697863.png)