## About Stream Overlay - is a html-based overlay for iRacing first person streamers, that provides more expirience to their viewers. ## Install 1. Install and run server application from [here](/) 2. Download latest version of [CLR Browser Source Plugin](https://obsproject.com/forum/resources/clr-browser-source-plugin.22/) 3. Unzip it in your `OBS\plugins` folder ## Setup 1. Go to [Settings](#/settings) page 2. Copy generated **CLR Browser URL** 3. In OBS add new **CLR Browser** layer, and paste it in **URL** 4. Set **Dimensions** exactly the same as your iRacing resolution *(not stream resolution, main monitor)* ## Twitch ### Auto-update Twitch Stream Title Automagically update your Twitch status when connecting and disconnecting from iRacing. 1. Go to [Twitch](#/twitch) page 2. Connect it with your twitch account 3. Stay on this page while you are streaming, to make auto-update works ## Custom CSS CLR Browser Plugin provide a possibilities to change where overlay parts will placed via CSS. There is a main classes that you can change: - `.standings` - `.relatives` - `.car` (fuel level and water/oil temps) - `.tyres` - `.twitch` Some examples: 1. To hide any part of overlay: ```css .car { display: none; } ``` Now you will never see `fuel` box in overlay. 2. Let's say, I want to stick `standings` to the top of the screen: ```css .standings { top: 0 !important; } ``` There I say, place my `standings` with `0` gap from the top. `!important` will override default value. And to the bottom of the screen: ```css .standings { top: inherit !important; bottom: 0; } ``` 3. Place twitch viewers/followers counter to the left bottom corner with `12px` gap: ```css .twitch > .counters { left: 12px; right: inherit !important; bottom: 12px; } ``` `right: inherit !important;` will remove default value. To dive more deeply you can see what is default css values in [overlay.less](css/overlay.less).