Free restream.io chat styles. Mirror's Edge inspired

Hello there! Today I'm closing up my Mirror's Edge inspired stream design pack with some styles for use with restream.io chat. I couldn't settle on one or the other, so I made not one, but two options: red and white, so you can choose, what fits you the most.

Here are the previews.

To start off you will need to get the Restream.io chat and add your accounts to it. I won't explain how to do that here, but here are videos that will help you with that.

Those are made by an awesome Derek from NerdOrDie.com, you should check them out!

After you got your restream.io chat working, you need to navigate to webserver tab in the settings menu and set everything like on the screenshot.

You do not have to use those settings, but these are used in the example above, so if you want to get the same look - set everything like I did here.

After that - open up OBS and add a new Browser Source.

Paste the URL from Restream.io chat settings into the url field and set width and height to something like 400x500 (used in the example) or whatever else fits your needs.

If you want to use the red style, then paste the following code into the CSS box.

body { background-color: rgba(0, 0, 0, 0); margin: 0px auto; overflow: hidden; }

.mc {
    background: rgba(220,10,13,.6) !important;
    margin-bottom: 15px !important;
    position: relative;
    border: 2px solid rgba(255,255,255,0.8);
    box-shadow: 0 0 8px rgba(220,10,13,.6)
}

.n, .c, .m, .t, .i {
}

img.i {
    padding-left: 10px;
    padding-right: 10px;
}

.m {
    padding-left: 15px;
    text-align: left;
}

.n {
    text-transform: uppercase;
    font-weight: bold;
}

If you prefer the white look - paste this code instead.

body { background-color: rgba(0, 0, 0, 0); margin: 0px auto; overflow: hidden; }

.mc {
    border: 2px solid rgba(220,10,13,.4) !important;
    background: rgba(255,255,255,.6) !important;
    margin-bottom: 15px !important;
    position: relative;
    box-shadow: 0 0 8px rgba(220,10,13,.6)
}

.n, .c, .m, .t, .i {
    color: rgba(0,0,0,0.6);
}

img.i {
    padding-left: 10px;
    padding-right: 10px;
}

.m {
    padding-left: 15px;
    text-align: left;
}

.n {
    text-transform: uppercase;
    font-weight: bold;
}

Tick the "shutdown when not active" checkbox for better resource usage and click OK. Your chat should appear on your stream in a couple of seconds! Try posting some messages into the Restream.io chat window to test it.

Hope you like the styles. As usual - you're free to use all of my creations with no credit required, but I will really apreciate if you share my creations with your friends or subscribers, or even consider leaving a link to orels1.tips.

In any case - leave a like and subscribe to a newsletter to have all the new creations delivered right into your inbox!