OBS LOWER THIRDS - COMPLETE BEGINNER INSTALLATION GUIDE

================================================================================

WHAT YOU'LL NEED

Before you start, make sure you have:
- OBS Studio installed on your computer (Download here: https://obsproject.com/)
- The two HTML files from this project:
  - obs_lower_thirds_source.html (the visual display)
  - obs_control_panel.html (the control panel)

================================================================================

INSTALLATION STEPS

PART 1: ADDING THE LOWER THIRDS DISPLAY TO OBS

This is what viewers will see on your stream.

Step 1: Open OBS Studio
- Launch OBS Studio on your computer

Step 2: Add a Browser Source
1. Look at the bottom-left area of OBS where it says "Sources"
2. Click the + (plus) button at the bottom of the Sources panel
3. From the menu that appears, select "Browser"

Step 3: Name Your Source
1. A window will pop up asking for a name
2. Type: "Lower Thirds" (or any name you prefer)
3. Click OK

Step 4: Configure the Browser Source
Now you'll see the "Properties for 'Lower Thirds'" window. Follow these steps carefully:

1. Check the "Local file" checkbox
   - This tells OBS you're using a file from your computer, not a website

2. Click the "Browse" button
   - Navigate to where you saved the files
   - Select the file named: obs_lower_thirds_source.html
   - Click Open

3. Set the dimensions:
   - Find the Width field and type: 1920
   - Find the Height field and type: 1080

4. IMPORTANT - Clear the Custom CSS:
   - Scroll down until you see a box labeled "Custom CSS"
   - If there's any text in this box, DELETE ALL OF IT
   - The box should be completely empty

5. Click OK to finish

You should now see a transparent layer in your OBS preview! (Nothing will show yet - that's normal)

================================================================================

PART 2: ADDING THE CONTROL PANEL DOCK

This is your control center for managing the lower thirds.

Step 1: Open the Docks Menu
1. At the very top of OBS, click on "View" in the menu bar
2. Hover over "Docks"
3. Click on "Custom Browser Docks..."

Step 2: Get the File Path
Before filling in the form, you need the complete file path. Here's the easiest way:

Method 1 - Using File Explorer:
1. Open File Explorer (Windows Explorer)
2. Navigate to the folder containing obs_control_panel.html
3. Click on the file once to select it
4. Hold Shift and Right-click on the file
5. Select "Copy as path"
6. The full path is now copied to your clipboard!

Method 2 - Using a Web Browser:
1. Open Google Chrome or Microsoft Edge
2. Drag the obs_control_panel.html file into the browser window
3. Click on the address bar at the top
4. Copy the entire address (it will start with file:///)

Step 3: Create the Custom Dock
Back in the "Custom Browser Docks" window:

1. Dock Name (left column):
   - Type: Lower Thirds Control

2. URL (right column):
   - Paste the file path you copied
   - It should look something like:
     - file:///C:/Users/YourName/Documents/obs_control_panel.html
     - Or: C:\Users\YourName\Documents\obs_control_panel.html

3. Click Apply
4. Click Close

Step 4: Position Your Control Panel
1. A new panel called "Lower Thirds Control" will appear in OBS
2. You can drag it to dock it anywhere you like:
   - Next to your Scenes
   - Below your Sources
   - As a floating window
3. Try different positions until you find what works best for you!

================================================================================

HOW TO USE YOUR LOWER THIRDS

BASIC USAGE

1. Enter Your Text:
   - In any of the 4 panels, type a Name (e.g., "John Smith")
   - Type a Title (e.g., "Game Developer")

2. Show the Lower Third:
   - Click the green "Show" button
   - Watch it animate onto your screen!

3. Hide the Lower Third:
   - Click the red "Hide" button
   - It will animate off the screen

ADVANCED CUSTOMIZATION

Want to change colors, animations, or timing? Click the gear icon next to any panel!

Animation Settings:
- Transition: Choose from 11 different animation styles:
  - Slide, Bounce, Fade, Swing, Flip, Elastic, Zoom, Rotate, Wave, Glitch, Curtain
- Anim In: How long the "show" animation takes (e.g., 1.5s = 1.5 seconds)
- Anim Out: How long the "hide" animation takes (e.g., 0.8s = 0.8 seconds)

Visual Settings:
- Background: Choose from:
  - Gradient presets (Blue/Purple, Pink/Orange, etc.)
  - Solid colors (Dark, Light)
  - Transparent
  - Custom Color: Pick ANY color using a color picker!
- Shape: Rectangle, Soft Rounded, or Torn Paper
- Typewriter Effect: Makes text appear letter-by-letter

Text Styling:
- Font Size: Make text bigger or smaller
- Font Weight: Make text bold or light
- Text Color: Change the color of your text

================================================================================

TROUBLESHOOTING

Problem: "I don't see anything when I click Show"

Solutions:
1. Make sure the Browser source is at the top of your Sources list
   - Drag it above other sources if needed
2. Check that the source is visible (eye icon should be open)
3. Right-click the Browser source and select Refresh

Problem: "The control panel won't load"

Solutions:
1. Double-check the file path in View > Docks > Custom Browser Docks
2. Make sure there are no spaces in the folder names (or the path is in quotes)
3. Try using the file:/// format instead of C:\ format

Problem: "The animations look weird or cut off"

Solutions:
1. Make sure Width is 1920 and Height is 1080
2. Check that Custom CSS is completely empty
3. Try refreshing the browser source (right-click and select Refresh)

Problem: "The control panel is too big/small"

Solution:
- You can resize the dock by dragging its edges!
- Or use the Global Settings section to collapse panels you're not using

================================================================================

PRO TIPS

Tip 1: Use Hotkeys
You can set up OBS hotkeys to show/hide sources:
1. Go to File > Settings > Hotkeys
2. Find your "Lower Thirds" source
3. Set a keyboard shortcut for "Show" and "Hide"

Tip 2: Create Presets
- Set up your favorite combinations in the 4 panels
- Save different styles for different segments of your stream

Tip 3: Auto-Sequencer
- Use the Auto-Sequencer in Global Settings to automatically cycle through all 4 lower thirds
- Great for displaying multiple team members or sponsors!

Tip 4: Test Before Going Live
- Always test your lower thirds in a test scene before using them live
- Make sure animations look smooth and text is readable

================================================================================

FILE ORGANIZATION TIP

Keep your files organized:

OBS Lower Thirds/
  - obs_lower_thirds_source.html
  - obs_control_panel.html
  - README.md
  - BEGINNER_INSTALLATION_GUIDE.txt (this file)

This way, the file paths won't break if you move things around!

================================================================================

STILL NEED HELP?

If you're stuck:
1. Re-read the relevant section above
2. Make sure you followed every step exactly
3. Check the Troubleshooting section
4. Try removing and re-adding the sources from scratch

================================================================================

YOU'RE ALL SET!

Congratulations! You now have a professional lower thirds system in OBS. 
Experiment with different animations, colors, and styles to find what works 
best for your stream!

Happy Streaming!