static-browser-overlays

Customization Guide

This guide explains how to customize the browser overlays to match your stream’s aesthetic.

Overlay-Specific Documentation

Each overlay has its own detailed customization instructions. Please refer to the specific documentation:

Minimal Overlays

Cozy Overlays

Backgrounds

Basic Customization Methods

CSS Variables (Minimal Overlays)

Minimal overlays use CSS variables for easy customization:

  1. Open the overlay’s HTML file in a text editor
  2. Find the :root section containing variables: 
    :root {
 /* Colors */
 --border-color: rgba(0, 0, 0, 0.8);
    
 /* Game window settings */
 --game-width: 1760px;
 --game-left-position: 47%;
    
 /* Webcam settings */
 --webcam-size: 250px;
 --webcam-visibility: block;
}
  3. Change the values to customize your overlay
  4. Save and refresh your browser source

Common customizations include:

Direct CSS Editing (All Overlays)

For more advanced customization:

  1. Open the overlay’s HTML file in a text editor
  2. Look for the <style> section
  3. Modify CSS properties like colors, sizes, and positions
  4. Save and refresh your browser source

Testing Your Changes

Always test your modifications before streaming:

  1. Save all changes
  2. Refresh the browser source in your streaming software
  3. Check how it looks with your game and webcam
  4. Make adjustments as needed

Backup Your Changes

Before customizing:

  1. Make a backup copy of the original files
  2. If needed, you can always re-download the overlay from the repository

Need Help?