Available Scenes

Scene Collection Overview

Select a scene to learn more about its features and how to use it in your broadcast.

Scene includes overlays to fit supported game configs

In-Game

Replay scene

Instant Replay

Dual camera setup for player and commentator views

DuoCam Row

Three-camera setup: two for shoutcasters, one for player or host.

TrioCam Row

Two-camera setup for your shoutcasters

Analyst Special

Full screen single camera setup for multiple commentators

Duo Single Cam

Display of current maps & scores for the match

Map Pool

Displays each member of the team and their selected roles & characters

Team

Single Elimination & Double Elimination Bracket overview

Bracket

Intermission display with countdown timer

Away Screen

In-Game Scene

The In-Game scene provides a scoreboard overlay that automatically adjusts to fit the current game configuration selected in your Esports Dash dashboard.

Customizing Your Overlay

Each game configuration comes with a default appearance, but you have two options for customization:

1. Built-in Style Presets

Currently, the Valorant game configuration offers 5 different pre-designed style options. Other game configs will be receiving alternative styles in future updates.

To switch between these styles, add the style parameter to your scoreboard URL:

Example:


https://esportsdash.com/overlay/scoreboard?style=2

Example Valorant Styles

2. Custom CSS

You can also customize the scoreboard’s appearance using custom CSS properties. To apply your custom styling:

In OBS Studio, right-click on your browser source
Select “Properties”
Scroll down to find the “Custom CSS” text area
Add your CSS overrides here

Your custom CSS should target the game-specific class (e.g., .valorantPositions for Valorant overlays) and override the CSS variables below:


.valorantPositions {
  /* Score and Team Appearance */
  --scoreSize: 3em;                /* Size of the score numbers */
  --teamLogoSize: 45px;            /* Size of team logos */
  --teamNameSize: 1.3em;           /* Size of team names */
  --teamNameInnerPadding: 10px;    /* Padding inside team name container */
  
  /* Team Name Alignment */
  --teamLeftTextNameAlign: left;   /* Text alignment for left team name */
  --teamRightTextNameAlign: right; /* Text alignment for right team name */
  
  /* Team Container Padding */
  --teamLeftInnerPadding: 0px;     /* Inner padding for left team container */
  --teamRightInnerPadding: 0px;    /* Inner padding for right team container */
  --teamLeftOuterPadding: 0px;     /* Outer padding for left team container */
  --teamRightOuterPadding: 0px;    /* Outer padding for right team container */
  
  /* Team Container Borders */      /* Colors do get replaced by dashboard, This is for position of border*/
  --teamLeftBorderLeft: 0px solid #27AAE1;   /* Left border of left team */
  --teamLeftBorderRight: 7px solid #C80013;  /* Right border of left team */
  --teamRightBorderLeft: 7px solid #27AAE1;  /* Left border of right team */
  --teamRightBorderRight: 0px solid #C80013; /* Right border of right team */
  
  /* Background Images and Gradients */
  --teamLeftBackgroundImage: linear-gradient(90deg, rgb(255, 255, 255) 0%, rgb(255, 255, 255) 100%);
  --teamRightBackgroundImage: linear-gradient(90deg, rgb(255, 255, 255) 0%, rgb(255, 255, 255) 100%);
  
  /* Middle Element Positioning */
  --middleTopPosition: 8px;        /* Position from top */
  --middleLeftPosition: 50%;       /* Horizontal position */
  --middleWidth: 250px;            /* Width of middle element */
  --middleHeight: 35px;            /* Height of middle element */
  --middleTextSize: 1.5em;         /* Size of text in middle element */
  
  /* Skews */
  --skew-angle-positive: 0deg;     /* Positive skew angle for various portions of scoreboard */
  --skew-angle-negative: 0deg;     /* Negative skew angle for various portions of scoreboard  */
}