Guide Twitch

Tnotifier Transparent Twitch Notification Guide

alert

This is a guide on how to setup a transparent Twitch notification for Tnotifier. There will be no need for any chroma key and you can use the animations perfectly without them getting cut off by the size of the image. I created a subnotification for Tnotifier for a client and wanted to share my experince and problem solving so you can use it as well.

  1. Webapp choice
  2. Settings of the widget
  3. What the CSS is all about
  4. The Guide to transparent Tnotifier notification
  5. The CSS code

Webapp choice

There I stood as rain poured down outside, gracefully hitting the windowsill, the choice was between NightDev and Tnotifier (2.4). I’m not all too familiar with Tnotifier, but when looking at what it has to offer and the flexibility that it can give it felt I had to learn it a bit more.

While I have looked at Tnotifier before and I’m familiar with everything it has to offer. I’ve never really sat down with the program and dug into it’s CSS structure for all of its features. And while yes it already includes different animations from a drop down menu and easy to change entries. If I knew the headache that came with having all of these features interacted with the CSS in different place… I might have chosen a different webapp, but I’m glad I didn’t.

Settings of the widget

Let’s go step by step. First of all you need to do with Tnotifier is to connect it with your Twitch account and you’re logged in. Simple and easy.

When you’re logged in you need to create a widget, these are the follow, subscriber, donation and announcement notifications. In my case I only want to have a subscriber notification, however since my account isn’t a partnered one I can’t select that, so for this tutorial/guide/tips I’m going to be using follower. You can set up different alerts for different graphics, sounds etc. by creating another widget (different sounds but same graphics can be done from the same widget).

The image I created is 553 in height and 118 in width so those are the numbers I entered under Alert settings at first and changed the Alert Font to Roboto. Never use Arial, it’s really bad. Font size won’t really matter since we’re going to change that in the CSS later.

With both Settings and Animation Options it’s up to you. There’s no real correct setting and what works for this channel might not work for yours.

What the CSS is all about

When you look at the bottom you see a blank text box. This is where we’re going to add all of our CSS. Also the image that I’ve made has a 80% transparent boarder around the center, that would mean that using a chroma key would be out of the question. All of Tnotifier tutorials on the site seems to always point to that you need to use chroma key. I don’t want that and I can’t use it for this image so below you will find exactly how I did to get it to look exactly the way I want it to.

As you can see there’s no way to add a image or upload a image. Instead you need to upload your image to either a imgur.com, your own server or any other platform that allows hot-linking. After you have your image link ready you can set the notification time to something insane like 30000000 milliseconds, that way we can do some easy testing without having to press the test button over and over again. Right now there’s no need to add any CSS since we’re going to do that with web development tools built into both Firefox and Chrome.

When you click edit you get a few options. Launch, Test Utility and Edit. Open both the Launch, and Test in different tabs. Wait the 30 seconds and then press test and nothing but a white flash should come up, that’s good.

The Guide to transparent Tnotifier notification

1In Chrome you can right click on the white space in the middle and select Inspect Element. A window with text will pop-up. It can look a bit daunting but I promise you it’s pretty straight forward and I’ll try to make it as easy to follow as possible.

What you will see now is

<html lang="en">...</html>

To the left of that line there’s a little arrow, click on that arrow. And look for “<body data-console=”1″….” click on the line it self and the text in the second box should change. Then you need to look for the following thing in that box:

body {
 background: #FFFFFF;
 }

html-bodyand change it to the value below

body {
 background: red;
 }

This will change the white background to Red. Don’t worry we’re going to change this to transparent later, but for now this is works the best so we can see the changes we’re going to make.

Now you need to find the following:

<div class="tm-widget" data-reactid=".1">

Click on the line itself to get the information from this DIV.

Again you need to find

.tm-widget {
 background: #FFFFFF;
 }

html-body2You can use the little white box with the black outline to use a color selector. All you need to do is to slide the “α” slider all the way to the left. This will make the background transparent. Then you need to add the following:

overflow: visible;

If you click on the changed background value and when you see the text is marked, hit Enter two times and you will get a new entry. Where you can put the text above into.

What this will do is so any any animation outside of your set size will be shown anyway. Small thing but very important to get this working.

Now look for:

<div class="notification-box hidden" data-reactid=".1.0">

inspectelement2This is where the magic happens. As you’ve probably noticed even if we’ve made both the body background and the .tm-widget background transparent we’re still seeing a white background at the top.

For this next part I’m going to add a comment below each explaining each change and what it does instead of having too many paragraphs. I’ll put them with red text and then have the full code again.

.tm-widget .notification-box  {
 background: transparent url(http://i.imgur.com/YOURIMAGE.png);
 This will do two things, it will add a image and it will remove that white bar and that took me way to long to figure out and there's no guide for it. Instead it kept jumping to different CSS rules or crossing out this one for some reason when I put it anywhere else but right here in-front of the image.
 color: #fff;
 This is the color of the text. However this you can change inside the dashboard for the widget as well.
 height: 118px;
 line-height: 118px;
 font-family: Roboto;
 font-size: 25px;
 -webkit-animation-duration: 1.00s;
 animation-duration: 1.00s;
 background-repeat: no-repeat;
 When you first add the background image it will keep repeating forever. This CSS rules stops that but it also put all the way to the left.
 background-position: center;
 Let's center that up a bit with this rule. The background image should now be in the center.
 padding-left: 108px;
 This will move the text only. Since this image is a bit off center it needed to be moved 108px in from the left.
 padding-top: 5px;
Might as well move it down 5px as well so it sits better under the "Thank you" text.
 font-weight: 700;
This makes the name bold. It's not important but it makes it look good in this case.
 }

Alright that’s the changes that needed to be made. When you pull it into OBS you need to use CLR Browser plugin. Grabe the API URL and paste that into the website that the plugin grabs. Position it in the right spot and that’s all there is to it. You have have a transparent and there’s no need to use any chroma key.

The CSS code

You can enter this directly into Tnotifier dashboard or maybe in the CSS tab for the CLR Browser plugin (I haven’t tried that but it should work).

body {
 background: rgba(255, 255, 255, 0);
}
.tm-widget {
 background: rgba(0, 255, 0, 0);
 overflow: visible;
}
.tm-widget .notification-box {
 background:transparent url(http://i.imgur.com/YOURIMAGE.png);
 color: #fff;
 height: 118px;
 line-height: 118px;
 font-family: Roboto;
 font-size: 25px;
 -webkit-animation-duration: 1.00s;
 animation-duration: 1.00s;
 background-repeat: no-repeat;
 background-position: center;
 padding-left: 108px;
 padding-top: 5px;
 font-weight: 700;
}

About the author

Daniel

Daniel

Do you need Twitch branding done the right way? I've work with both partnered and non-partnered Twitch streamers and done so for over 4 years. For me this is full time and I'm dedicated to my clients and my craft. I do both branding, visual branding and brainstorming based on understanding you, your community and your channel. If that sounds interesting to you then you should check out my Twitch services/portfolio/client list and contact me right away. twitch.livespace.se

Leave a Comment

By continuing to use the site, you agree to the use of cookies. more information

The cookie settings on this website are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings or you click "Accept" below then you are consenting to this.

Close