Customize Your Overlay Theme and Appearance

Introduction

Your stream overlay should match your brand. Song Overlays Pro includes 10 built-in themes and extensive customization options so your "now playing" display looks exactly how you want it.

What you'll achieve:

• Choose from 10 pre-built themes
• Customize colors to match your brand
• Adjust size and positioning
• Configure animation and transitions
• Create a cohesive look across your stream

Prerequisites

Before starting, make sure you have:

• macOS 13.0 (Ventura) or later
• Song Overlays Pro installed from the Mac App Store
• OBS Studio or similar software (for using the overlay)
• Your brand colors/guidelines (optional but helpful)

Step 1: Access Theme Settings

Open the customization panel in Song Overlays Pro.

1. Open Song Overlays Pro
2. Click Server in the sidebar
3. Ensure the server is started
4. Click Customize Theme or the theme preview

You'll see a live preview of your overlay that updates as you make changes.

Step 2: Choose a Base Theme

Start with one of the 10 built-in themes.

Theme Categories

Minimal:

• Clean, simple designs
• Focus on readability
• Great for professional streams

Glassmorphism:

• Frosted glass effects
• Modern, trendy aesthetic
• Works well over busy backgrounds

Neon:

• Glowing, vibrant colors
• Perfect for gaming streams
• High visual impact

Classic:

• Traditional music player styles
• Familiar to viewers
• Timeless appearance

Dark:

• Low-profile designs
• Won't distract from content
• Ideal for podcasts/talk shows

Selecting a Theme

1. Browse the theme gallery
2. Click any theme to preview it
3. The live preview updates instantly
4. Click Apply when you find one you like

Tip: Try several themes before customizing. You might find a built-in option that's perfect as-is.

Step 3: Customize Colors

Make the theme match your brand colors.

Editable Colors

Element	Description
Background	Main overlay background
Text Primary	Song title color
Text Secondary	Artist/album color
Accent	Highlights and borders
Progress Bar	Song progress indicator

Using Your Brand Colors

1. Click the color swatch you want to change
2. Enter your hex code (e.g., #FF5500)
3. Or use the color picker to select visually
4. The preview updates in real-time

Color Tips

• Contrast matters — Ensure text is readable over your background
• Limit your palette — 2-3 colors keep things clean
• Consider backgrounds — Test your overlay over your actual stream content
• Check accessibility — High contrast helps viewers with visual impairments

Step 4: Adjust Layout and Size

Configure how the overlay displays in your stream.

Overlay Dimensions

Set the overall size:

• Width — How wide the overlay appears (e.g., 400px)
• Height — How tall (usually auto-adjusts to content)
• Padding — Space inside the overlay borders

Content Layout

Choose what information displays:

• Show Album Art — Toggle artwork on/off
• Artwork Size — Small, medium, or large
• Artwork Position — Left, right, or top
• Show Album Name — Include or hide album title
• Show Progress Bar — Display song progress

Text Options

• Title Font Size — Size of song title
• Artist Font Size — Size of artist name
• Text Alignment — Left, center, or right
• Max Characters — Truncate long titles

Step 5: Configure Animations

Add motion to make your overlay more dynamic.

Entry/Exit Animations

Choose how the overlay appears and disappears:

• Fade — Smooth opacity transition
• Slide — Slides in from a direction
• Scale — Grows/shrinks into view
• None — Instant appearance

Animation Settings

• Duration — How long the animation takes (e.g., 0.5s)
• Delay — Wait before animating out
• Direction — Which way slides come from

Continuous Animations

Optional ongoing effects:

• Scrolling text — For long titles
• Pulsing glow — Subtle attention-grabber
• Album art spin — Vinyl record effect
• Progress animation — Smooth bar movement

Performance Note: Complex animations may impact lower-end systems. Test with your full streaming setup.

Step 6: Position in OBS

Place the overlay in your streaming software.

Adding to OBS

1. Copy the Overlay URL from Song Overlays Pro
2. In OBS, add a Browser Source
3. Paste the URL
4. Set width/height to match your overlay dimensions

Positioning Tips

Common Placements:

• Bottom left — Traditional music player position
• Top right — Visible but not intrusive
• Bottom center — Works for gameplay streams
• Dedicated scene — Full "now playing" scenes

Sizing Recommendations:

• Small (300px) — Minimal footprint
• Medium (400-500px) — Good balance
• Large (600px+) — When music is the focus

Using Transform

1. Select your browser source in OBS
2. Right-click → Transform → Edit Transform
3. Adjust position, scale, and crop precisely
4. Lock the source to prevent accidental moves

Step 7: Preview and Test

Verify your overlay looks great before going live.

In-App Preview

1. Use the live preview in Song Overlays Pro
2. Play different songs to test various title lengths
3. Check how artwork of different aspect ratios displays
4. Verify animations trigger correctly

In OBS

1. Add a test scene with typical background content
2. Check overlay visibility against your graphics
3. Test with various game/content types
4. Verify no cropping or clipping issues

Mobile Check

If you display overlays on mobile:

1. Test the overlay URL in a mobile browser
2. Verify touch/tap interactions if applicable
3. Check readability at smaller sizes

Theme Presets

Save your customizations for quick switching.

Saving a Preset

1. Configure your theme exactly how you want
2. Click Save as Preset
3. Name it (e.g., "Gaming Stream" or "Chill Vibes")
4. Access it anytime from the presets menu

Managing Presets

• Edit — Modify existing presets
• Duplicate — Create variants of a preset
• Delete — Remove presets you no longer use
• Export — Share presets with others

Preset Ideas

Create presets for different streaming scenarios:

• Gaming — Compact, high-contrast, neon colors
• Just Chatting — Larger, centered, relaxed style
• Music Focus — Large artwork, minimal text
• Podcast — Professional, branded, minimal distraction

Troubleshooting

Overlay Not Updating

1. Refresh the browser source in OBS
2. Verify the server is running in Song Overlays Pro
3. Check the overlay URL is correct
4. Clear browser cache in OBS source settings

Colors Look Different in OBS

1. Check OBS color space settings
2. Verify your monitor calibration
3. Some themes may render differently in browser sources
4. Test with the Custom CSS option for precise control

Text Cutoff or Wrapping

1. Increase overlay width to accommodate longer titles
2. Enable scrolling text for overflow
3. Reduce font size if space is limited
4. Set max characters to truncate very long titles

Animations Stuttering

1. Reduce animation complexity
2. Lower OBS browser source FPS
3. Check overall system performance
4. Disable animations if issues persist

Advanced: Custom CSS

For complete control, inject custom CSS.

Enabling Custom CSS

1. In theme settings, find Custom CSS
2. Toggle it on
3. Enter your CSS in the text area

Example: Custom Font

.song-title {
    font-family: 'Your Custom Font', sans-serif;
    letter-spacing: 2px;
}

Example: Border Radius

.overlay-container {
    border-radius: 20px;
}

Example: Shadow Effect

.overlay-container {
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}

Note: Custom CSS requires some web development knowledge. Inspect the overlay in a browser to find element classes.

Next Steps

Your overlay is now customized. Explore these related features:

Add to OBS

Complete guide to setting up your overlay in OBS Studio.

Set up OBS overlays

Send to Resolume

Use your themed data in VJ software for live visuals.

Set up Resolume integration

Accept Song Requests

Let viewers request songs that display in your styled overlay.

Set up Song Requests

---

Your overlay is ready! A well-designed "now playing" display adds professionalism to any stream. Experiment with themes and colors until you find the perfect look for your brand.