# \&showlabels

General Option! ([`&push`](https://docs.vdo.ninja/advanced-settings/setup-parameters/push), [`&room`](https://docs.vdo.ninja/advanced-settings/setup-parameters/room), [`&view`](https://docs.vdo.ninja/advanced-settings/mixer-scene-parameters/view), [`&scene`](https://docs.vdo.ninja/advanced-settings/mixer-scene-parameters/scene))

## Aliases

* `&showlabel`
* `&sl`

## Options

There are some preset style options, which can be passed to the parameter as a value. You can also choose to just edit the label's style with CSS, as discussed lower on this page.

Example: `&showlabels=ninjablue`

<table><thead><tr><th width="210.9699570815451">Value</th><th>Description</th></tr></thead><tbody><tr><td>(no value given)</td><td>Generic styled display names</td></tr><tr><td><code>fire</code></td><td>Fire looking display names</td></tr><tr><td><code>ninjablue</code></td><td>VDO.Ninja styled display names</td></tr><tr><td><code>skype</code></td><td>Skype styled display names</td></tr><tr><td><code>teams</code></td><td>Microsoft Teams styled display names</td></tr><tr><td><code>toprounded</code></td><td>Top-center rounded display names</td></tr><tr><td><code>zoom</code></td><td>Zoom styled display names</td></tr><tr><td><code>rounded</code></td><td>Rounded lower-right names; bold</td></tr></tbody></table>

## Details

This parameter will display the user's display name or label on screen, as a text overlay. The label can be set either via the URL using the [`&label`](https://docs.vdo.ninja/advanced-settings/setup-parameters/label) parameter, or the room's director can set it dynamically via the "Add a label" option.

This parameter can be used on guest links, view links, or scene links. It will be sticky to each individual video and not the browser window as a whole.

Underscores "\_" used in label values will be replaced by spaces, allowing for word separation.

HTML5 Emojis 🎈 and some non-Latin characters are supported.

For example: `https://vdo.ninja/?showlabels=fire`\
![](https://2943598173-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MZHXv1G8N0MDxwotaT9%2Fuploads%2F7eFf7WwKObzPsgSih2er%2Fimage.png?alt=media\&token=81e0a85a-3c96-464b-91fb-b6e25f616308)

If no preset option is passed, a default generic style is used:\
![](https://2943598173-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MZHXv1G8N0MDxwotaT9%2Fuploads%2FfsP1LGtvZkAXLlxvqkuH%2Fimage.png?alt=media\&token=8d9e68d6-f3af-41c8-96e5-d7008ac569fc)

### Font size customization

You can change the font-size without using CSS, using the [`&fontsize`](https://docs.vdo.ninja/advanced-settings/design-parameters/fontsize) parameter. CSS is also supported though.

Font-size of labels will adjust slightly based on the window size.

### Advanced Customization

CSS of the styles can be set via the OBS browser source stylesheet window.\
The CSS class name you can customize is called `video-label`.

![An example of how to set a custom CSS style for labels](https://2943598173-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MZHXv1G8N0MDxwotaT9%2F-ManH8Iyte0TNV-1Sd4b%2F-ManHOL9qFpcuB8Ql6Fy%2Fimage.png?alt=media\&token=3cf27f00-f3ac-4353-93ed-0d8a80a3b9f0)

You can copy the below code, modifying it as you desire, as a starting point. You'll still need to use `&showlabels` to trigger the labels to display though.

```
.video-label {
	color: red;
  bottom: 2vh;
	left: 50%;
	transform: translateX(-50%);
  background: rgba(0, 0, 0, .8);
	pointer-events:none;
	border-radius: 5px;
	font-size: 0.8em;
}
```

Below is another example, this time we target the video tile class, creating a margin above the video elements. We can then move the display label into that space, creating a label that is not overlaying the video itself, but still attached.

![We can paste the CSS code directly into the OBS browser source, or we can host the style in a file and access it via the \&css parameter](https://2943598173-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MZHXv1G8N0MDxwotaT9%2F-MhFX_2DzFt7mW_CEi35%2F-MhFYF66Gt5fIZLykmZJ%2Fimage.png?alt=media\&token=bf0fcb27-cbe5-4e9b-86a8-1861329f13cd)

```
.tile {
  margin-top: 10vh !important;
  max-height: 90vh!important;
}

.video-label {
	bottom:unset;
	top:0;
	text-align:middle;
	left:unset;
	background:unset;
	text-shadow : 0 0 10px #035;
	font-size: 7vh!important;
}
```

## Related

{% content-ref url="../setup-parameters/label" %}
[label](https://docs.vdo.ninja/advanced-settings/setup-parameters/label)
{% endcontent-ref %}

{% content-ref url="../screen-share-parameters/and-screensharelabel" %}
[and-screensharelabel](https://docs.vdo.ninja/advanced-settings/screen-share-parameters/and-screensharelabel)
{% endcontent-ref %}

{% content-ref url="fontsize" %}
[fontsize](https://docs.vdo.ninja/advanced-settings/design-parameters/fontsize)
{% endcontent-ref %}

{% content-ref url="css" %}
[css](https://docs.vdo.ninja/advanced-settings/design-parameters/css)
{% endcontent-ref %}

{% content-ref url="../setup-parameters/and-labelsuggestion" %}
[and-labelsuggestion](https://docs.vdo.ninja/advanced-settings/setup-parameters/and-labelsuggestion)
{% endcontent-ref %}