Intro

This program assumes you have installed and used CLR Browser already. If you’ve set up Twitch Alerts or anything similar you have CLR Browser installed properly. This tutorial also assumes you are using OBS. Let’s get started!

Finding the right code

To make CLR Browser work to your advantage, you need to start with the right “code” (a combination of HTML and CSS, for the purposes of this tutorial), modify it to your tastes, and position that code into OBS in a way that looks seamless.

Here are two intros I created using only CLR Browser with modified code:

Blood Dragon Themed Intro

Blood Dragon Themed Intro

Star Wars Themed Intro

Star Wars Themed Intro

You don’t have to be a programmer

There are tons and tons of free code sites out there. One of my favorite sites out there is Codepen. We’re going to take this code and modify it for use as an “Intro” animation for our stream. All you need is Notepad or a similar text editor (I recommend Sublime Text) and a little courage.

Step 1: Get the files you need

Using our example, let’s save the files and get to modifying.

  • At the bottom right, click on “Export” and “Export .zip.”

img2

  • Export the zip file
  • Extract the contents of the zip file somewhere you’ll be able to keep it for later.

Step 2: Modifying the code

  • Open OBS and add a CLR Browser item to your scene. In this example I’ve got a “Setup” scene where we will add the hexagonal loading animation.

img3

  • Name your item something you’ll easily recognize.

img4

  • This takes you to the CLR Browser setup screen. Click on the “?” icon and browse to the HTML file that you extracted.

img5

  • As you’ll notice, the Hexagon already has a transparent background, but the blue and red colors don’t quite go with our background. Let’s fix that.

img6

  • Open the html file using Notepad and scroll down until you find these lines:

img7

  • Change the “child” lines for the color to “white” instead of “red,” “lime,” and “blue.” Save the file.

Step 3: Enjoy the results

  • Uncheck and then recheck the item in your OBS scene. It should refresh and be a nice white now!
img8

Lookin’ fly

  • Rearrange the item with the Edit Scene button and position the file so that it looks great.

GO ON A CODE ADVENTURE!

The next step is up to you. Now that you’ve seen how easy it is to modify code and get it to work, the possibilities are endless! If you have any issues getting this to work, send me a tweet @accrualbowtie or visit the Lift Gaming forums and let me know.

Happy coding! ❤

accrualbowtie on Deviantartaccrualbowtie on Emailaccrualbowtie on Facebookaccrualbowtie on Instagramaccrualbowtie on Twitteraccrualbowtie on Youtube
I'm a full-time auditor and former web-designer. I enjoy graphic-design, gaming, and streaming as a hobby. I enjoy coffee, beer, and theology. You can find me live at twitch.tv/accrualbowtie

Pin It on Pinterest