A comprehensive guide for clubs and nations using PowerliftingLive.com to enhance their live streaming with professional overlays for powerlifting competitions.
- Overview
- Prerequisites
- Quick Start Guide
- Overlay Types
- Detailed Setup Instructions
- OBS Configuration
- Customization
- Troubleshooting
- Advanced Features
- FAQ
- Support
This repository contains custom CSS overlays designed to enhance PowerliftingLive.com competition streams. The overlays provide real-time information about lifters, weights, and record attempts directly in your broadcast stream.
- Stream Lifter Info Overlay (
stream-lifter-info.css) - Displays current lifter information, weights, and lift history - New Record Overlay (
new-record-overlay.css) - Highlights when a lifter is attempting a new record - Base Styles (
style.css) - Core styling foundation from Powerliftinglive - HTML Template (
stream-lifter-info.html) - Reference implementation
Before you begin, ensure you have:
- Access to a PowerliftingLive.com tenant account
- An active powerlifting competition set up on the platform
- OBS Studio (recommended) or compatible streaming software
- Basic familiarity with OBS browser sources
- Stable internet connection for real-time data feeds
-
Login to your PowerliftingLive.com tenant
https://[your-tenant].powerliftinglive.com -
Select Competition
- Navigate to your active competition
- Ensure the competition is properly configured
-
Access Screen Options
- Scroll to the bottom of the competition page
- Click on "New Screen"
Location of the New Screen button at the bottom of the competition page
-
Select Screen Type
- Choose "Screen: Lifter" from the available options
Selecting the Lifter screen type -
Copy the URL
- The system will generate a URL similar to:
https://test.powerliftinglive.com/screen_lifter.php?id=1547- Copy this URL - you'll need it for OBS
-
Add Browser Source
- In OBS, click the "+" in Sources
- Select "Browser"
- Create new or add existing
-
Configure Source
- URL: Paste your copied PowerliftingLive URL
- Width: 1920 (recommended)
- Height: 1080 (recommended)
- CSS: Copy and paste the appropriate overlay CSS
-
Apply Overlay Styling
- For lifter info: Copy
stream-lifter-info.csscontent - For record attempts: Copy
new-record-overlay.csscontent - Paste into the "Custom CSS" field
- For lifter info: Copy
File: stream-lifter-info.css
Features:
- Lifter name with prominent display
- Current attempt weight (large, animated)
- Lift history (Squat, Bench Press, Deadlift)
- Current round information
- Place tracking (current → predicted)
- Team logo integration
- Referee lights (hidden in overlay mode)
Visual Design:
- Modern glass-morphism effect
- Red accent colors (#ed2939)
- Smooth animations and transitions
- Responsive layout (1600px × 220px)
Use Case: Perfect for continuous display during competition
File: new-record-overlay.css
Features:
- "NEW RECORD ATTEMPT" header with animation
- Record category information
- Discipline-specific highlighting
- Auto-hide when no records are being attempted
- Dramatic visual effects
Visual Design:
- Dark gradient background with colored accents
- Pulsing and glowing animations
- High contrast for visibility
- Conditional display (only shows when relevant)
Use Case: Automatically appears when a lifter attempts a record
-
Competition Setup
Competition → Settings → Display Options ├── Enable real-time updates ├── Configure referee system ├── Set up categories and records └── Test data feed -
Screen Generation
Competition Page → Bottom Section → New Screen ├── Screen Type: "Lifter" ├── Generate URL ├── Test in browser └── Copy for OBS
- Create Browser Source
Sources → Add → Browser ├── Name: "PowerliftingLive Overlay" ├── URL: [Your PowerliftingLive URL] ├── Width: 1920 ├── Height: 1080 ├── FPS: 30 └── Custom CSS: [Paste overlay CSS]
Create Browser Source
Create Browser Source 2. Position and Scale
Transform → Edit Transform
├── Position: Adjust as needed
├── Scale: Maintain aspect ratio
├── Crop: If necessary
└── Blend Mode: Normal
/* Copy entire contents of stream-lifter-info.css */
/* Paste into OBS Browser Source Custom CSS field */The overlays use a consistent color palette that can be customized:
/* Primary Colors */
:root {
--primary-red: #ed2939;
--primary-blue: #00a1de; /* Accent blue */
--text-primary: #000000; /* Main text */
--text-light: #ffffff; /* Light text */
--background: rgba(255, 255, 255, 0.95); /* Overlay background */
}#container {
width: 1600px; /* Adjust width */
height: 220px; /* Adjust height */
}#next_lifter_name {
top: 10px; /* Vertical position */
left: 20px; /* Horizontal position */
}#next_lifter_name {
font-size: 42px; /* Size */
font-family: 'Arial', sans-serif; /* Font family */
font-weight: 700; /* Weight */
}* {
animation: none !important;
transition: none !important;
}@keyframes weightPulse {
animation-duration: 1s; /* Faster pulse */
}The overlay supports team logos but hides them by default:
/* Show team logos */
#next_lifter_team,
#next_lifter_team img {
display: block !important;
}
/* Customize logo size */
#next_lifter_team img {
width: 60px;
height: 60px;
}Symptoms: Blank or white screen in OBS Solutions:
- ✅ Verify PowerliftingLive URL is correct
- ✅ Check internet connection
- ✅ Ensure competition is active
- ✅ Test URL in regular browser first
- ✅ Check OBS browser source settings
Symptoms: Default styling instead of overlay design Solutions:
- ✅ Verify CSS is pasted correctly
- ✅ Check for syntax errors in CSS
- ✅ Clear browser cache in OBS
- ✅ Restart OBS browser source
Symptoms: Static information, no real-time updates Solutions:
- ✅ Check PowerliftingLive competition status
- ✅ Verify internet connection stability
- ✅ Refresh browser source
- ✅ Check firewall/proxy settings
Symptoms: Elements overlapping or mispositioned Solutions:
- ✅ Adjust browser source dimensions
- ✅ Modify CSS positioning values
- ✅ Check screen resolution settings
- ✅ Test on different screen sizes
/* Disable expensive effects */
.heavy-animation {
animation: none;
backdrop-filter: none;
box-shadow: none;
}/* Simplified styling */
#container {
background: rgba(255, 255, 255, 0.9);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}Enable debug information by adding to CSS:
/* Debug overlay borders */
* {
border: 1px solid red !important;
}
/* Show hidden elements */
#plive_connection_problems {
display: block !important;
}@keyframes slideInFromLeft {
from { transform: translateX(-100%); }
to { transform: translateX(0); }
}
#next_lifter_name {
animation: slideInFromLeft 0.5s ease-out;
}@keyframes urgentPulse {
0%, 100% {
background-color: #ed2939;
transform: scale(1);
}
50% {
background-color: #ff6b6b;
transform: scale(1.05);
}
}- Use the same PowerliftingLive URL
- Apply CSS through StreamLabs browser source
- Configure alerts and notifications
- Add as web source
- Apply custom CSS styling
- Position within scene composition