Many streamers rejoiced when NightDev released a CLR Browser version of OBS Chat that could easily overlay Twitch chat directly into streams without the sloppy window capture nonsense. One thing people wanted was to be able to customize it. Well, you can but it’s not as simple as clicking some drop-downs or choosing a theme from a menu. This guide will explain the simplest way to obtain a copy of the CSS code as well as decipher what parts will handle which sections of the chat and the best ways to go about customizing them. This guide is for people who already have a fundamental understanding of CSS.  If you don’t know CSS much of this guide may not make a lot of sense.

Install & Setup OBS Chat Plugin

  1. Go to NightDev‘s site and click on the OBS Chat project to get started. Or click here.
    • If you already have NightDev’s CLR Browser redistributable package installed you can skip straight to the part where you obtain your OBS Chat URL.  Copy this URL into Notepad or something easy to access.  You’ll need it in a second.
    • Typically, I like to leave my OBS Chat URL as basic as possible, clear theme, no fade timers, etc but you can set yours up however you like with the options given.
  2. Click Next after you’ve copied your OBS Chat URL then select all of the CSS Code and copy it, paste it into the same Notepad you already have open.
  3. Open OBS.  For simplicity purposes we’re going to add a Global Source, select CLR Browser.
    clr_browser_obs_url
  4. Enter your OBS Chat URL into the URL box
  5. You also need to specify a size, 600 x 300 is a good start, you can always come back and change it if it’s not to your liking.
  6. Go to the CSS tab, clear out the existing text and paste what you copied from NightDev’s site, now click OK.
  7. This is the very basic OBS Chat setup, it works to get you exactly what you want, Twitch chat inside your stream.

Get the OBS Chat CSS Template

  1. The easiest way to obtain your actual chat CSS Template is actually via the Developer Tools inside Google Chrome.
    • If you don’t have Google Chrome download and install it from here.
  2. Paste your OBS Chat URL into Chrome and press ENTER.
  3. Once the page loads you’ll want to enable Developer Tools (CTRL+SHIFT+I) then right-click anywhere on the page and select Inspect Element.
  4. In the new page area below locate the <head> tag and click the arrow next to it to expand it.
  5. Expand <style>…</style> in the same fashion
  6. Copy all of the text here from body { to the } after .emoticon.
    • Clicking once on the area will highlight it all, then just copy.
    • Paste this into that Notepad file you’ve still got open.
  7. This is the very basic CSS Template for OBS Chat, everything in here is making it look the way it does.

Understand the CSS Template

Now that we’ve got the current CSS Template we need to figure out what each element does. The easiest way to do this is to type into your chat channel and watch the Chrome page update.

  1. Expand the <body> tag so you can see several <div> tags.
    • As you hover your mouse over each one you’ll see Chrome highlight the corresponding div element on the chat area above.
  2. Type a line of text, it can be anything.
  3. Locate the <div> tag that corresponds and expand it, it should have your nickname as well as the message you typed.
    message_div
  4. Click on your username within the <div> code below, on the right you’ll see that the column has updated to show you all the CSS elements that are being called to for this display. Most importantly are .nick {} and .chat_line {}. You can do this for any portion of the chat pane you want to learn about. For simplicity purposes I’ve outlined them below.

CSS Elements

  • body {} is standard and refers to the body of the page, it’s highly unlikely that you will ever need to edit this. I usually delete body {} for that very reason.
  • #chat_box {} refers to the chat box itself.
  • #chat_box.dark {} & #chat_box.light {} both refer to variations on #chat_box {} that add a background color. If you’re not using either of these it’s safe to delete both, otherwise keep the one you’re using and delete the other.
  • .nick {} refers to the user’s name when displayed in chat.
  • .tag {} refers to any tags a user has in chat such as broadcaster, moderator, staff, turbo, subscriber, etc.
  • .turbo {}, .moderator {}, .broadcaster {}, .staff {}, & .admin {} all refer to the tag icons seen in chat for each role. If you’re not interested in changing the icons here it’s safe to delete these items.
  • .chat_line {} is the actual line in chat where everything is printed out in a line.
  • .chat_line .message {} refers to the chat message specifically.
  • .emoticon {} refers to how emoticons are displayed within .chat_line {}.

There are some CSS elements that do not show up in the main list but are essential for proper customization. These will need to be added to the CSS Template in order to be used.

  • span.nick {} refers explicitly to how a username is printed on the chat pane, this overrides anything in .nick {}.
  • span.message {} refers explicitly to how a message is printed on the chat pane, this overrides anything in .chat_line .message {}.

Edit the CSS Template

It’s recommended that all changes to the CSS be done within Chrome‘s Developer Tools pane and then copied to your Notepad file to save. Do not reload the page in Chrome or close the browser while you’re editing or you will lose all changes made. The CLR Browser has CSS related quirks in that if you have a syntax error, or try to perform something it does not support, it will simply abandon ALL CLR Browser changes you’ve made to ALL sources. In short, Save your URLs and CSS in something else in case you have to restore them in the CLR Browser during development. Let’s get started, I will go over possible changes to each element listed above and show examples of what the outcome will look like in Chrome.

One thing to note, anything you want to apply to the template needs a !important at the end of the line before the ; otherwise it will likely not override NightDev’s stylesheet. Anything not listed below is not something that should be edited and can safely be removed from your CSS Template.

#chat_box {}

  • font-family: ‘Helvetica Neue’, Helvetica, Arial, sans-serif;
    • The font used for all text in chat. The easiest way to change this is to specify a font you have installed locally. I’ve tried using CSS3 font loader code and it simply doesn’t work at this time. Let’s change this to something else, how about ‘Times New Roman’, Times, serif.
      font_times
  • font-size: 13px;
    • The size of the text in chat. Let’s change this to something larger, how about 18px.
      font_18
  • color: #D3D3D3;
    • This is the color of the text. Let’s change it to something easier to read on that white Chrome background, say ‘black’.
      font_black

#chat_box.dark {} or #chat_box.light {}

  • background: rgba(0,0,0,0.3);
    • If you’re using dark or light instead of transparent these values refer to the color of the chat background. Enter any RGBA color here to alter it, for the example we’ll leave it transparent.
  • color: #fff;
    • This is the text color. It’s a good idea to have this be an easy to read color on top of whatever you pick for the background. This overrides #chat_box.

.nick {}

  • font-weight: bold;
    • This changes the usernames to be bold. For this example we will leave this set.
  • text-transform: capitalize;
    • This forces usernames to have proper capitalization. For this example we will leave this set.

span.nick {}

  • color: ;
    • This overrides the Twitch username chat color assignment. Let’s make it ‘darkgray’.
      nick_darkgray

.tag {}

  • height: 18px;
    • This should be set to the height dimension of the tag image.
  • min-width: 18px;
    • This should be set to the width dimension of the tag image.
  • margin-bottom: -1px;
    • Adjust this if your image does not sit inline where you’d like it, by default it will sit slightly lower than the bottom of text. Let’s move the tag up slightly to be more inline with our larger font, say 1px.
      tag

.turbo {}, .moderator {}, .broadcaster {}, .staff {}, & .admin {}

  • background-color: #6441a5;
    • This is the background color of the tag icon. If you’re creating your own icons it’s best to leave these as is for quick color recognition.
  • background-image: url(//www-cdn.jtvnw.net/images/xarth/g/g18_turbo-FFFFFF80.png);
    • This points to the default Twitch 18×18 Turbo icon graphic. If you’re going to use different icons they will need to be 18×18 (if larger adjust the .tag{height and min-width} values accordingly and it will need to be accessible to the internet. For this example we are not changing tags or icons.

.chat_line {}

  • margin-left: 3px;
  • margin-right: 3px;
  • padding-top: 2px;
  • padding-bottom: 3px;
    • Personally, I don’t change any of the above, but some CSS designers don’t like to create line spacing in this way, it’s entirely up to you.
  • line-height: 16px;
    • This needs to be at least as tall as your font, it can be higher if you’d like more spacing between chat lines. Let’s change this to match our font height 18px.
      line_height_18

.chat_line .message {}

  • word-break: break-all;
    • This will break whatever it needs to when a word is too long for a line. This is ugly, let’s fix this, set it to normal.

span.message {}

  • color: ;
    • Sometimes the color setting in #chat_box doesn’t seem to alter the actual chat messages, use this to override it with the proper color.

.emoticon {}

  • margin-bottom: -7px;
    • Adjust this so that emoticons sit where you want them on a line of text. By default they’re substantially below the chat line. Let’s move it up say 5px.
      emoticon

These are just some basic CSS changes you can do to the chat text. Many modern CSS styles will work to further customize your chat. Let’s create a black outline for the text.

#chat_box {
     color: white !important;
     text-shadow: 0px 0px 1px #000, 1px 1px 1px #000, 1px 0px 1px #000, 0px 1px 1px #000, -1px -1px 1px #000, -1px 0px 1px #000, 0px -1px 1px #000 !important;
}
black_outline

The more advanced you are with CSS3 the more intricate you’ll be able to make your OBS Chat. Experiment with it and see what you can come up with!

DoctorFark on TwitterDoctorFark on Youtube
DoctorFark
Long-time gamer turned streamer specializing in RPGs, 4X Strategy, and many more. I also work on Twitch-related art during the day on my channel, tune in if you want to learn something or need art yourself!

Pin It on Pinterest