Tournament CSS Designer

​

What is the Tournament CSS Designer?

• Change colors, fonts, and spacing to match your branding.
• Style teams and players (names, totals, highlights) via their CSS classes.
• Adapt each game mode (Hearts, Points per Round, Best-of Series, Tannenbaum, etc.) to your visual style by targeting its game-type classes.

​

How the Designer Works

​

Opening the CSS Designer

​

Using Presets

• A ready-to-use theme, or
• A starting point which you copy and then adjust.

• Select a preset from the dropdown.
• Load its CSS into the editor.
• Tweak colors, fonts, and spacing to match your channel.

​

Elements & Core CSS Classes

​

Tournament View & Game Container

• .tournament-view (tournament view) – the outer area that contains everything related to the tournament or Custom Game in your overlay.
• .custom_game (game container) – the box that holds one Custom Game (for example, one Hearts board, one Points-per-Round table, or one Best-of match view).

• Backgrounds (solid, gradients, glassmorphism).
• Padding and spacing around the whole game.
• Global fonts and base text color.

​

Teams

• .team-color – small bar or circle with the team color.
• .team-name – team name text.
• .team-total (and sometimes .team-points) – overall points or wins, depending on the game mode.

• Use the team color as a border or accent around the team block.
• Make winning or active teams brighter and losing/inactive teams slightly dimmed.
• Align names and totals in a way that fits your layout (e.g. name left, total right).

​

Players

• .player-name – label for each individual participant.
• .player-total / .player-points – the sum of their current points.
• .player-point – per-round points, depending on the mode.
• .player-hearts / .heart – hearts in Hearts mode.

• Use badges or small chips for totals.
• Stack player name and score vertically on small layouts.
• Highlight active players subtly (e.g. a stronger border or slightly brighter background).

​

Game Mode Sections

• Hearts – hearts or lives displayed next to each player or team.
• Points per Round – columns of round scores plus a total.
• Best-of Series – per-round win markers plus a total match winner indicator.
• Tannenbaum – a Kegeln-inspired (German-style bowling) tree/diamond-shaped grid of target numbers that fill in as they are completed.

• The shape and size of hearts or icons (by targeting .heart and related classes).
• The layout of columns and rows for scores (by targeting the relevant container classes per mode).
• and many more

​

Team Colors and CSS Variables

​

Per-Team Variables

• --team-color – the main color for this team (used for borders, accents, badges, etc.).
• --team-0-color, --team-1-color, … – per-team colors on the root element.
• --team-0-name, --team-1-name, … – team names as text values.

• Backgrounds: background-color: var(--team-color);
• Borders: border-color: var(--team-color);
• Text accents: color: var(--team-color);

​

Player Name Variables

• --team-0-member-0-name
• --team-0-member-1-name
• --team-1-member-0-name

• Inject names into content for decorative labels.
• Build advanced themes where specific positions in the layout represent specific players.

​

State Classes

• Active vs. inactive team or player (.team-active, .team-inactive, .player-active, .player-inactive).
• Winning vs. losing team (.team-winner, .team-loser in Best-of).
• Completed vs. incomplete cells (e.g. .complete / .incomplete in Tannenbaum).

• Make active items brighter or larger by styling .team-active or .player-active.
• Fade out inactive teams or players via .team-inactive and .player-inactive.
• Add a glow or badge around winners using .team-winner or .winner-indicator.

​

Reference: Available CSS Classes

​

Global Containers

• .tournament-view – top-level container for all Custom Games in the overlay.
• .custom_game – main container of a single Custom Game (one game mode box).
  • .custom_game.game-active – the active game mode (visible).
  • .custom_game.game-inactive – inactive game modes (hidden or scaled down in the overlay).
• Transform origin / position classes – applied based on the designer’s position setting (e.g. bottom-left, center, top-right) and control where the game is anchored.
• Game meta classes on the game container:
  • game_index_${index} – index of the game in the list (0-based).
  • game_type_${normalizeString(game.game)} – normalized game identifier, e.g.:
    • game_type_pointsround
    • game_type_bestof
    • game_type_hearts
    • game_type_tannenbaum
  • game_${normalizeString(game.name)} – normalized display name, useful for theme-specific variants.

​

Global Team & Player Classes

• .team-container – wrapper for a team (header plus players).
  • Status classes (depending on mode):
    • .team-active
    • .team-inactive
    • .team-throwing
    • .team-receiving
    • .team-waiting
• .team-row – horizontal row with team info (color, name, points).
  • .team-row.team-active – emphasized version of the active team row.
  • .team-row.team-inactive – dimmed version of inactive team rows.
• .team-color – small color indicator using var(--team-color).
• .team-name – text container for the team name (data-team-name attribute holds the actual name).
• .player-row – container for a list of players in a team.
• .player-col – single player cell.
  • .player-col.player-active
  • .player-col.player-inactive
• .player-color – color overlay for a player, usually tinted by the team color.
• .player-name – text container for the player name.

• data-team-name – logical team name.
• data-points – numeric point values (team/player/round).
• data-win – "true" or "false" for round win/loss in Best-of.

​

Tournament Scoreboard (Elimination & Group Views)

• .tournament-scoreboard – outer container for the scoreboard list.
• .scoreboard-team – per-row helper class for a single team entry (in addition to .team-container).
• .scoreboard-team-profiles – avatar strip for all players in a team.
• .scoreboard-team-profile – wrapper around a single avatar.
• .scoreboard-team-avatar – actual avatar image for a player.
• .scoreboard-team-avatar-placeholder – fallback placeholder when no picture is available.
• .scoreboard-team-name – main team name line (combined captain + members, inside .team-name).
• .scoreboard-team-captain – first player’s name (visually highlighted as captain).
• .scoreboard-team-members – container for remaining player names of a team.
• .scoreboard-team-member-name – span around each non-captain name (also marked as .player-name).
• .team-member-separator – separator between names (e.g. " & " or ", ").
• .scoreboard-team-points – container for the team’s points column (also .team-points).
• .scoreboard-team-points-value – numeric total points for the team (also .team-total).

.tournament-scoreboard {
  gap: 8px;
}

.scoreboard-team.team-container {
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.4);
}

.scoreboard-team-avatar {
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.3);
}

.scoreboard-team-avatar-placeholder {
  font-weight: 600;
}

.scoreboard-team-captain {
  font-weight: 700;
  color: var(--team-color, #4acf44);
}

.scoreboard-team-members .team-member-separator {
  opacity: 0.8;
}

.scoreboard-team-points-value.team-total {
  font-variant-numeric: tabular-nums;
}

​

Hearts (game_type_hearts)

• .hearts-container – vertical list of all teams in hearts mode.
• .team-container.team_id_{teamId} – per-team wrapper (also used in other modes).
• .player-col.player_id_{playerId} – per-player wrapper.
• .player-hearts – container for hearts belonging to a player.
• .heart – individual heart:
  • .heart.heart-on – active heart.
  • .heart.heart-off – inactive heart.

​

Points Round (game_type_pointsround)

• .game_type_pointsround – scope for points-round styles.
• .game_type_pointsround .team-name – team name in this mode.
• .game_type_pointsround .team-container – team container with:
  • team-active
  • team-inactive
  • no-active-player
• .game_type_pointsround .team-active .player-row – expanded player rows.
• .game_type_pointsround .team-inactive .player-row – collapsed player rows.
• .team-points .team-point – per-round scores for a team.
  • .team-point.has-points – round with non-zero points.
• .team-total – total team points across rounds.
• .player-point – player’s round score.
• .player-total – player’s total points.
• .game_boxautomat – special variant:
  • .game_boxautomat .player-total – hidden totals.
  • .game_boxautomat .player-point – focused round points.
  • .game_boxautomat .team-points .team-point – iconified team points.

​

Best Of (game_type_bestof)

• .game_type_bestof – scope for Best-of styles.
• .game_type_bestof .team-name – team name styling.
• .game_type_bestof .team-row:after – disables the default underline in this mode.
• .winner-indicator – indicator before the team name:
  • .game_type_bestof .team-winner .winner-indicator
  • .game_type_bestof .team-loser .winner-indicator
• .versus-container – box around both teams in a match.
  • .versus-container .team-container.team-winner
  • .versus-container .team-container.team-loser
• .team-win-icon – round result icon:
  • .team-win-icon-win
  • .team-win-icon-lose
• .matches-container – all matches:
  • .matches-container.active-match
  • .matches-container.no-active-match
• .match-container – single match container:
  • .match-container.match-active
  • .active-match .match-container:not(.match-active) – collapsed matches.
• .team-points, .team-win, .team-total, .team-total-points – per-round and total score containers.
• .no-matches-container, .no-matches-text – empty-state view when no matches are configured.

​

Tannenbaum (game_type_tannenbaum)

• .tannenbaum-wrapper – wrapper used in several presets for the Tannenbaum layout.
• .team-container.team_id_${teamId} – per-team container with:
  • team-active
  • team-inactive
• .tannenbaum-container.player-row – outer container for the tree/diamond rows.
• .player-col – each cell in the tree layout.
• .player-points – value inside each cell.
• .player-point – target number (1–9) for that cell.
  • .player-point.complete
  • .player-point.incomplete

​

Styling Best Practices

• Focus on visuals, not structure – change colors, fonts, borders, radiuses, shadows, and spacing, but avoid changing core layout rules like display, position, or height on critical containers unless you know what you’re doing.
• Keep important information visible – make sure team names, scores, and game status (e.g. current round, winner) remain clear and high-contrast.
• Use team colors consistently – rely on var(--team-color) for all team-related accents so the theme stays coherent when you change team colors in the app.
• Test different game modes – switch the preview between Hearts, Points per Round, Best-of Series, and Tannenbaum to ensure your CSS works well in each mode.
• Start from a preset – instead of styling from scratch, copy a preset that is close to your desired look and adjust step by step.

​

Where to Go Next

• Learn how to set up and run events on the main Stream Tournaments page.
• Experiment with different Custom Game modes (Hearts, Points per Round, Best-of Series, Tannenbaum) in the Tournament Designer.
• Share your favorite designs with your community and reuse them across multiple tournaments.