Twitch Alerts Custom CSS

To celebrate 1,000 followers on Twitch and 5,000 subscribers on YouTube I have adapted a design I did for the streamer K1ckstand as a free resource available here on NoD!  Read on to learn how to set up my design for Twitch Alert’s event list.

Towards the bottom of this post there there is a text box with CSS code.  First, right click inside the text box and hit Select All.  Next, right click again and hit Copy.

Adding Custom CSS into Twitch Alerts Events List

Now, log into your Twitch Alert’s Dashboard.  From here, click “Event List” – once the page is loaded, click the drop down in the themes section and change it to “Custom CSS”.  Right click inside the text box and hit Paste.  At this point, you’re almost ready to go!

You can now customize what your alerts look like.  Theme Color will control the background color of the box with icons in it.  In the Event List options you can choose to show followers, subscribers, and donations – check mark the boxes you would like to have displayed here.  The Max Events slider will control how many events are shown at one time,  I personally leave my slider at 5, but feel free to choose what works best for your stream!  Unfortunately the color of the box that has the names of users and type of events can not be changed unless you edit the CSS.  To do this, you’ll want to go into the custom CSS box and scroll to line 86.  Here, you can set the color to whatever CSS color you’d like.  If you don’t know much about CSS, I would recommend not changing this.  But, for example, if we wanted to use red, we simply change the #222 to #ff0000 – or the color of your choice.  Text Color controls the color of your text.  You can use the drop down menu for font to select a font you like.  If you’re not sure of the style of font you want, browse Google Fonts to see your options.

Text size, background color, animation, and animation speed will not be affected.

Choose if you’d like to flip the alignment along an X or Y axis.  This means it can be aligned to the right or left, or even animate in from the top or bottom.  Click Save Settings.

Bringing your Event List into OBS and XSplit

After you save, the “How to Use” section towards the top will have a URL that you will be able to add into OBS or XSplit.  Simply add the URL into a CLR browser source for OBS (just Browser source for OBS Studio) or a Browser Source for XSplit. Inside your streaming program make sure to set your width to 600px by 600px.

Custom Twitch Alerts CSS

@import url("https://fonts.googleapis.com/css?family=$font_family");

html,
.widget-EventList li > div {
  -webkit-transform: rotateX($rotate_x) rotateY($rotate_y);
          transform: rotateX($rotate_x) rotateY($rotate_y);
}

* {
  margin: 0;
  padding: 0;
  list-style: none;
  box-sizing: border-box;
  font-family: "$font_family";
  letter-spacing: 1px;
}

.widget-EventList {
  position: absolute;
  top: 0;
  left: 0;
  height: 600px;
  width: 600px;
}

.widget-EventList li {
  height: 0px;
  overflow: hidden;
  margin-bottom: 1px;
  -webkit-animation: grow .4s ease-in 1 forwards;
          animation: grow .4s ease-in 1 forwards;
  opacity: .1;
}

.widget-EventList li:nth-child(1) {
  opacity: 1;
}

.widget-EventList li:nth-child(2) {
  opacity: .75;
}

.widget-EventList li:nth-child(3) {
  opacity: .5;
}

.widget-EventList li:nth-child(4) {
  opacity: .25;
}

.widget-EventList li:nth-child(5) {
  opacity: .1;
}

.widget-EventList li:nth-child(6) {
  opacity: .1;
}

.widget-EventList li:nth-child(7) {
  opacity: .1;
}

.widget-EventList li:nth-child(8) {
  opacity: .1;
}

.widget-EventList li:nth-child(9) {
  opacity: .1;
}

.widget-EventList li:nth-child(10) {
  opacity: .1;
}

li div {
  opacity: 0;
  padding: 0 50px 0 10px;
  height: 50px;
  margin-left: 1px;
  float: left;
  line-height: 50px;
  position: relative;
  color: $text_color;
  -webkit-animation: info .5s ease-in 1 .6s forwards;
          animation: info .5s ease-in 1 .6s forwards;
  background: #222;
  /* info */
}

div.background {
  opacity: 0;
  padding: 0;
  width: 50px;
  height: 50px;
  background-size: 42px 42px !important;
  background-position: 4px 3px !important;
  background: url("http://uploads.twitchalerts.com/000/070/135/721/star-l.png") no-repeat $theme_color;
  float: left;
  margin-left: 0;
  -webkit-animation: icon .5s ease-in 1 .4s forwards;
          animation: icon .5s ease-in 1 .4s forwards;
  /* icon */
}

.donation .background {
  background: url("http://uploads.twitchalerts.com/000/070/135/721/donation-l.png") no-repeat $theme_color;
}

.twitch-follow .background {
  background: url("http://uploads.twitchalerts.com/000/070/135/721/heart-l.png") no-repeat $theme_color;
}

.tag {
  position: absolute;
  top: 3px;
  right: 5px;
  font-size: 12px;
  line-height: 12px;
  color: $text_color;
  font-family: "$font_family";
}

@-webkit-keyframes grow {
  from {
    height: 0px;
  }
  to {
    height: 50px;
  }
}

@keyframes grow {
  from {
    height: 0px;
  }
  to {
    height: 50px;
  }
}

@-webkit-keyframes icon {
  0% {
    left: -20px;
    opacity: 0;
  }
  40% {
    left: 0px;
    opacity: 1;
  }
  60% {
    left: 2px;
    opacity: 1;
  }
  100% {
    left: 0px;
    opacity: 1;
  }
}

@keyframes icon {
  0% {
    left: -20px;
    opacity: 0;
  }
  40% {
    left: 0px;
    opacity: 1;
  }
  60% {
    left: 2px;
    opacity: 1;
  }
  100% {
    left: 0px;
    opacity: 1;
  }
}

@-webkit-keyframes info {
  0% {
    left: 2px;
    opacity: 0;
    text-indent: 0px;
  }
  40% {
    left: 4px;
    opacity: 1;
    text-indent: 0;
  }
  60% {
    left: 0px;
    opacity: 1;
    text-indent: 10px;
  }
  100% {
    left: 0;
    opacity: 1;
    text-indent: 0px;
  }
}

@keyframes info {
  0% {
    left: 2px;
    opacity: 0;
    text-indent: 0px;
  }
  40% {
    left: 4px;
    opacity: 1;
    text-indent: 0;
  }
  60% {
    left: 0px;
    opacity: 1;
    text-indent: 10px;
  }
  100% {
    left: 0;
    opacity: 1;
    text-indent: 0px;
  }
}