This version (2022/09/18 10:16) was approved by expertsonline.

How to Setup Notifications/Widgets

If you have difficulty setting this up, or have any questions or suggestions, please post on the forums.

Notifications are VIP Only

To get VIP, you will need to make a payment of $5/month Here


This guide will run you through setting up notifications/widgets from Deepbot onto your streaming software.


Pre-requisites

  • A. OBS Classic - OBS Website
  • B. CLR Browser Plugin - OBS Forum Thread
  • C. You need to update your MS Visual C++ Run Times to 2013 - Here (Click download and choose x86 or x64 accordingly.)
  • D. Latest version of .NET Framework:
    • Web install: Here
    • Offline install: Here
  • E. Once you have finished all the steps listed above, you can now move onto the next steps.

Note: Having difficulty getting this installed? Check out this video here explaining the plugins and the install process


Setup

  • A. For Follows/Donation Notifications, you will need to “Enable Notifications/On-Screen Notifications” as well as check mark the box “OBS CLR Browser”. Both options can be found on the “Config Tab” > “Follower/Donation Notification Options”.
  • B. Open OBS > “Add New Source” > Select “CLR Browser”
  • C. A box should pop-up where you can enter the URL of the notification you want as well as add any custom CSS you want. Current available options for Notifications/Widgets:
Notification/Widget Name Default Version Second Version
Cheer Here
Cheer Goal Tracker Here
Donation Here 800×370 Here
Donation Goal Tracker Vertical Version 300×300 Horizontal Version
Drag Race Here 900×650
Follow Here 500×100 Here
Host Here Here
Leader Board/Event List Here
OBS/Twitch Chat Overlay Here
Roulette Here Minimal Version Here
Subscriber Here
Subscriber Goal Tracker Here 300×150
Widgets Default Widget Image-Only Widget

Note: In some of the URLs, you will notice different variables towards the end of the URL. Here is a list of what the variable means:

  • dur= - This means how long should the notification/widget stay visible.
  • f= - Means it will display follows on the Leader Board/Event List. (Use f=1)
  • h= - Means the height of the overall Host notification.
  • hidecountdown= - Means it will hide the countdown for the Roulette visual.
  • hidewinners= - Means it will hide winners for the Roulette visual.
  • num= - Means how many lines should be displayed for Leader Board/Event List.
  • test= - When set to 1, it will be a preview/test. When set to 0, it will NOT be a preview/test.
  • time= - Means how many seconds should it stay visible after last notification for Leader Board/Event List.
  • w= - Means the width of the overall Host notification.
  • D. If you notice scroll bars, try increasing the dimensions.
  • E. Once done, click “OK”

Pre-requisites

  • A. OBS Studio - OBS Website
  • B. CLR Browser Plugin - OBS Forum Thread
    • Windows - Download Link
      • To install: Extract to the root of your installation folder. For those that used the OBS Studio installer, that would be: C:\Program Files (x86)\obs-studio\
    • Mac OS X (Stable Version) - Download Link
      • To install: Download the dmg and double click the “OBS Browser Plugin Install.mpkg”.

Setup

  • A. For Follows/Donation Notifications, you will need to “Enable Notifications/On-Screen Notifications” as well as check mark the box “OBS CLR Browser”. Both options can be found on the “Config Tab” > “Follower/Donation Notification Options”.
  • B. Open up OBS Studio > Under sources, Right Click > Select “Add” > Select “BrowserSource”.
  • C. A box should pop-up where you can enter the URL of the notification you want as well as add any custom CSS you want. Current available options for Notifications/Widgets:
Notification/Widget Name Default Version Second Version
Cheer Here
Cheer Goal Tracker Here
Donation Here 800×370 Here
Donation Goal Tracker Vertical Version 300×300 Horizontal Version
Drag Race Here 900×650
Follow Here 500×100 Here
Host Here Here
Leader Board/Event List Here
OBS/Twitch Chat Overlay Here
Roulette Here Minimal Version Here
Subscriber Here
Subscriber Goal Tracker Here 300×150
Widgets Default Widget Image-Only Widget

Note: In some of the URLs, you will notice different variables towards the end of the URL. Here is a list of what the variable means:

  • dur= - This means how long should the notification/widget stay visible.
  • f= - Means it will display follows on the Leader Board/Event List. (Use f=1)
  • h= - Means the height of the overall Host notification.
  • hidecountdown= - Means it will hide the countdown for the Roulette visual.
  • hidewinners= - Means it will hide winners for the Roulette visual.
  • num= - Means how many lines should be displayed for Leader Board/Event List.
  • test= - When set to 1, it will be a preview/test. When set to 0, it will NOT be a preview/test.
  • time= - Means how many seconds should it stay visible after last notification for Leader Board/Event List.
  • w= - Means the width of the overall Host notification.
  • D. If you notice scroll bars, try increasing the dimensions.
  • E. Input any Custom CSS in the CSS Box. If you do not have any Custom CSS, skip this step.
  • F. Once done, click “OK”.


Pre-requisites


Setup

  • A. For Follows/Donation Notifications, you will need to “Enable Notifications/On-Screen Notifications” as well as check mark the box “OBS CLR Browser”. Both options can be found on the “Config Tab” > “Follower/Donation Notification Options”.
  • B. Open xSplit > Add Sources or Add > Select “Other” > “Webpage URL” (If you do not see this option, you may have to go to plugin store).
  • C. A box should pop-up where you can enter the URL of the notification you want as well as add any custom CSS you want. Current available options for Notifications/Widgets:
Notification/Widget Name Default Version Second Version
Cheer Here
Cheer Goal Tracker Here
Donation Here 800×370 Here
Donation Goal Tracker Vertical Version 300×300 Horizontal Version
Drag Race Here 900×650
Follow Here 500×100 Here
Host Here Here
Leader Board/Event List Here
OBS/Twitch Chat Overlay Here
Roulette Here Minimal Version Here
Subscriber Here
Subscriber Goal Tracker Here 300×150
Widgets Default Widget Image-Only Widget

Note: In some of the URLs, you will notice different variables towards the end of the URL. Here is a list of what the variable means:

  • dur= - This means how long should the notification/widget stay visible.
  • f= - Means it will display follows on the Leader Board/Event List. (Use f=1)
  • h= - Means the height of the overall Host notification.
  • hidecountdown= - Means it will hide the countdown for the Roulette visual.
  • hidewinners= - Means it will hide winners for the Roulette visual.
  • num= - Means how many lines should be displayed for Leader Board/Event List.
  • test= - When set to 1, it will be a preview/test. When set to 0, it will NOT be a preview/test.
  • time= - Means how many seconds should it stay visible after last notification for Leader Board/Event List.
  • w= - Means the width of the overall Host notification.
  • D. If you see scroll bars or image is cut off, try increasing the dimensions.
  • E. Once done, click “OK”
    • If you plan on using Custom CSS, make sure to tick the Custom CSS box near the bottom. Then Hit Edit CSS Button to input css.
    • Note: If you do use Custom CSS, make sure to replace single quotes( ' ) with double quotes ( “ ) in the CSS.


Notification/Widget Name Default Version Second Version
Cheer Here
Cheer Goal Tracker Here
Donation Here 800×370 Here
Donation Goal Tracker Vertical Version 300×300 Horizontal Version
Drag Race Here 900×650
Follow Here 500×100 Here
Host Here Here
Leader Board/Event List Here
OBS/Twitch Chat Overlay Here
Roulette Here Minimal Version Here
Subscriber Here
Subscriber Goal Tracker Here 300×150
Widgets Default Widget Image-Only Widget


For users who wish to use CSS to customize their notifications, here are the style sheets:

  • C. A box should pop-up where you can enter the URL of the notification you want as well as add any custom CSS you want. Current available options for Notifications/Widgets:
Notification/Widget Name Default Version Second Version
Cheer Here
Donation Default Donation Custom Donation Notification
Donation Goal Tracker Vertical Horizontal
Drag Race Here
Follow Here Here
Host Here
Leader Board/Event List Here
OBS/Twitch Chat Overlay Here
Streamer Threads Here
Subscriber Here
Subscriber Goal Tracker Here
Widgets Default Widget

Need Help with Custom Notifications? Check out the following links:



body {
    background-color: transparent;
    color: black;
}
#cheer-notification {
    position: absolute;
    display: none;
    top: 0px;
    left: 0px;
    width: 800px;
    height: 200px;
}
.cheerleftimg {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 120px;
    height: 120px;
    background: url(http://static-cdn.jtvnw.net/bits/light/animated/blue/4);
    background-repeat: no-repeat;
    background-position-y: 0px;
    border: none;
}
.cheerleftamount {
    position: absolute;
    top: 120px;
    left: 0px;
    width: 120px;
    height: 30px;
    text-align: center;
    font-family: 'Orbitron', sans-serif;
    font-weight: bold;
    font-size: 24px;
}
.cheerrightamount {
    position: absolute;
    top: 120px;
    left: 680px;
    width: 120px;
    height: 30px;
    text-align: center;
    font-family: 'Orbitron', sans-serif;
    font-weight: bold;
    font-size: 24px;
}
.cheerrightimg {
    position: absolute;
    top: 0px;
    left: 680px;
    width: 120px;
    height: 120px;
    background: url(http://static-cdn.jtvnw.net/bits/light/animated/blue/4);
    background-repeat: no-repeat;
    background-position-y: 0px;
}
#header {
    position: absolute;
    top: 20px;
    left: 120px;
    width: 560px;
    height: 60px;
    text-align: center;
    font-family: 'Orbitron', sans-serif;
    font-weight: bold;
    font-size: 28px;
    opacity: 0;
}
.cheername {} .cheerheaderamount {} .cheermsg {
    position: absolute;
    top: 60px;
    left: 120px;
    width: 560px;
    height: 60px;
    font-family: 'Orbitron', sans-serif;
    font-size: 20px;
    font-weight: bold;
    text-align: center;
}
.cheermsg {
    opacity: 0;
}
.cheername:after {
    content: ' cheered';
}
.cheerheaderamount:after {
    content: ' bits!';
}
.emote {
    margin: -5px 0px;
    max-height: 26px;
    background-position: center;
    vertical-align: middle;
    display: inline-block;
    background-repeat: no-repeat;
}
.triggerHeader {
    animation: mode0 3s 1;
}
.triggerMsg {
    animation: slideUp 5s 1;
}
@-webkit-keyframes mode0 {
    0% {
        transform: scale(0);
        opacity: 0.0;
    }
    60% {
        transform: scale(1.1);
    }
    80% {
        transform: scale(0.9);
        opacity: 1;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}
@-webkit-keyframes slideUp {
    0% {
        -webkit-transform: translateY(100%);
        opacity: 0;
    }
    40% {
        -webkit-transform: translateY(100%);
        opacity: 0;
    }
    70% {
        -webkit-transform: translateY(-8%);
    }
    80% {
        -webkit-transform: translateY(4%);
    }
    90% {
        -webkit-transform: translateY(-4%);
    }
    95% {
        -webkit-transform: translateY(2%);
    }
    100% {
        -webkit-transform: translateY(0%);
        opacity: 1;
    }
}


body {
    background-color: transparent;
    color: white;
}
sub,
sup {
    position: relative;
    font-size: 75%;
    line-height: 0;
    vertical-align: baseline;
}
sup {
    top: -0.5em;
}
sub {
    bottom: -0.25em;
}
#donor-notification {
    display: none;
    position: absolute;
    top: 0px;
    left: 0px;
    width: 800px;
    height: 365px;
    background-repeat: no-repeat;
}
#donor-notification .date {
    margin-right: 40px;
    padding-top: 43px;
    text-align: right;
    line-height: 20px;
    vertical-align: top;
    font-size: 20px;
    font-family: Algerian;
    text-shadow: 2px 2px 1px #000;
    color: white;
}
#donor-notification .streamname {
    margin-left: 34px;
    padding-top: 28px;
    text-align: left;
    line-height: 26px;
    vertical-align: top;
    font-size: 24px;
    font-family: Algerian;
    text-shadow: 2px 2px 1px #FFF;
    color: black;
}
#donor-notification .message {
    margin-left: 38px;
    float: left;
    padding-top: 9px;
    width: 70%;
    line-height: 40px;
    text-align: left;
    vertical-align: top;
    font-size: 20px;
    font-family: Verdana;
    color: black;
}
#donor-notification .amount {
    float: right;
    width: 21%;
    padding-top: 17px;
    text-align: left;
    line-height: 26px;
    vertical-align: top;
    font-size: 30px;
    font-family: Algerian;
    text-shadow: 2px 2px 1px #fff;
    color: black;
}
#donor-notification .donor {
    margin-left: 520px;
    padding-top: 147px;
    text-align: left;
    line-height: 28px;
    vertical-align: middle;
    font-size: 28px;
    font-family: Comic Sans MS;
    text-shadow: 2px 2px 1px #fff;
    color: black;
}

For EU users who wish to use the Euro Cheque you can add this line to your CSS tab in the CLR browser plugin:


#donor-notification {
background-image: url('deepbot.tv/images/notification/ChequeEUR.png') !important;
}

Custom Donation Notification


body {
    background-color: transparent;
    color: white;
}
sub,
sup {
    position: relative;
    font-size: 75%;
    line-height: 0;
    vertical-align: baseline;
}
sup {
    top: -0.5em;
}
sub {
    bottom: -0.25em;
}
#donor-notification {
    display: none;
    position: absolute;
    top: 0px;
    left: 0px;
    width: 1024px;
    height: 150px;
    background-repeat: no-repeat;
    background-size: cover;
}
#donor-notification .header {
    color: #37b2e5;
    font-size: 38px;
    font-family: Algerian;
}
#donor-notification .streamname {
    float: left;
    visibility: hidden;
}
#donor-notification .message {
    font-size: 20px;
    font-family: Verdana;
    color: #37b2e5;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}
#donor-notification .amount {
    font-family: Algerian;
    color: #DBDB1A;
    font-size: 50px;
}
#donor-notification .donor {
    font-family: Algerian;
    color: #DBDB1A;
    font-size: 50px;
}
#donor-notification .title {
    padding-top: 30px;
    width: 100%;
    float: left;
    text-align: center;
}
#donor-notification .messagebox {
    width: 100%;
    text-align: center;
}

Donation Tracker Mode 1


body {
	background-color: transparent;
	color: white;
}
 
#content {
	width:300px;
	margin:5px;
	margin-left: 45px;
}
 
#thermometer {
	width:70px;
	height:300px;
	position: relative;
	background: #ddd;
	border:1px solid #aaa;
	-webkit-border-radius: 12px;
	-moz-border-radius: 12px;
	-ms-border-radius: 12px;
	-o-border-radius: 12px;
	border-radius: 12px;
 
	-webkit-box-shadow: 1px 1px 4px #999, 5px 0 20px #999;
	-moz-box-shadow: 1px 1px 4px #999, 5px 0 20px #999;
	-ms-box-shadow: 1px 1px 4px #999, 5px 0 20px #999;
	-o-box-shadow: 1px 1px 4px #999, 5px 0 20px #999;
	box-shadow: 1px 1px 4px #999, 5px 0 20px #999;
}
 
#thermometer .track {
	height:280px;
	top:10px;
	width:20px;
	border: 1px solid #aaa;
	position: relative;
	margin:0 auto;
	background: rgb(255,255,255);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgb(0,0,0)), color-stop(1%,rgb(255,255,255)));
	background: -webkit-linear-gradient(top, rgb(0,0,0) 0%,rgb(255,255,255) 10%);
	background:      -o-linear-gradient(top, rgb(0,0,0) 0%,rgb(255,255,255) 10%);
	background:     -ms-linear-gradient(top, rgb(0,0,0) 0%,rgb(255,255,255) 10%);
	background:    -moz-linear-gradient(top, rgb(0,0,0) 0%,rgb(255,255,255) 10%);
	background:   linear-gradient(to bottom, rgb(0,0,0) 0%,rgb(255,255,255) 10%);
	background-position: 0 -1px;
	background-size: 100% 5%;
}
 
#thermometer .progress {
	height:0%;
	width:100%;
	background: rgb(20,100,20);
	background: rgba(20,100,20,0.6);
	position: absolute;
	bottom:0;
	left:0;
}
 
#thermometer .goal {
	position:absolute;
	top:0;
}
 
#thermometer .end-amount {
	display: inline-block;
	padding:0 0px 0 25px;
	border-top:1px solid black;
	font-family: Trebuchet MS;
	font-weight: bold;
	color:#333;
}
 
#thermometer .progress .amount {
	padding:0 25px 0 0px;
	position: absolute;
	border-top:1px solid #060;
	font-family: Trebuchet MS;
	font-weight: bold;
	color:#060;
	right:0;
}

Donation Tracker Mode 2


body {
	background-color: transparent;
	color: white;
}
 
#content {
	/* width:100%; */
	padding: 10px 10px;
}
 
#thermometer {
	position: relative;
	margin: 0px 10px 10px 10px;
	height:100px;
	background: #ddd;
	border:1px solid #aaa;
	-webkit-border-radius: 12px;
	-webkit-box-shadow: 1px 1px 4px #999, 5px 0 20px #999;
}
 
#thermometer .track {
	height:50px;
	top: 0px;
	border: 1px solid #aaa;
	margin: 20px 20px;
	background: rgb(255,255,255);
}
 
#thermometer .progress {
	height: 50px;
	width:10%;
	background: rgb(20,100,20);
	background: rgba(20,100,20,0.6);
}
 
#thermometer .goal {
	position:absolute;
	width: 100%;
}
 
#thermometer .start-amount {
	position: absolute;
	float: right;
	display: inline-block;
	border-top:0px solid black;
	font-family: Trebuchet MS;
	font-weight: bold;
	top: 50px;
	right: 0px;
	width: 100%;
	color:#333;
}
#thermometer .end-amount {
	position: absolute;
	float: right;
	display: inline-block;
	padding-right: 40px;
	border-top:0px solid black;
	font-family: Trebuchet MS;
	font-weight: bold;
	top: 50px;
	right: 0px;
	color:#333;
}
#thermometer .progress .amount {
	display: block;
	position: absolute;
	text-align: center;
	border-top: 0px solid #060;
	font-family: Trebuchet MS;
	font-size: 32px;
	font-weight: bold;
	color: #060;
	top: 27px;
	width: 100%;
}

Default Follow Notification


body {
    background-color: transparent;
    color: white;
}
#follow-notification {
    display: none;
    position: absolute;
    top: 0px;
    left: 0px;
    width: 500px;
    height: 100px;
    background-color: #0A2027;
    border-radius: 10px;
}
#follow-notification .leftimage {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100px;
    height: 100px;
    background-repeat: no-repeat;
    background-position-x: 0px;
    background-position-y: 0px;
    background-size: 100px;
    float: left;
    border-radius: 10px;
}
#follow-notification .followname {
    margin-left: 96px;
    padding-top: 15px;
    text-align: center;
    width: 385px;
    line-height: 55px;
    vertical-align: middle;
    font-size: 32px;
    font-family: Algerian;
    text-shadow: 2px 2px 1px #000;
    color: #ffffff;
}
#follow-notification .header {
    margin-right: 115px;
    padding-top: 10px;
    text-align: left;
    vertical-align: top;
    font-size: 26px;
    line-height: 26px;
    font-family: Algerian;
    text-shadow: 1px 1px 1px #FFFDE8;
    color: red;
    float: right;
    border-bottom: red;
    border-bottom-style: double;
}

Custom Follow Notification


body {
    background-color: transparent;
    color: white;
}
#follow-notification {
    display: none;
    position: absolute;
    top: 0px;
    left: 0px;
    width: 500px;
    height: 100px;
    border-radius: 10px;
    background-image: url("http://deepbot.tv/images/Achievement.gif");
    background-repeat: no-repeat;
}
#follow-notification .followname {
    margin-left: 96px;
    text-align: center;
    width: 313px;
    font-size: 32px;
    font-family: Verdana;
    text-shadow: 2px 2px 1px #000;
    color: #ffffff;
}
#follow-notification .header {
    text-align: center;
    width: 500;
    vertical-align: top;
    font-size: 26px;
    line-height: 26px;
    font-family: Algerian;
    text-shadow: 1px 1px 1px #97A02A;
    text-decoration: underline;
    color: red;
    visibility: hidden;
    padding-top: -50px;
}

Host Notification


body {
    background-color: transparent;
    color: white;
}
#host-notification {
    top: 0px;
    left: 0px;
    width: 300px;
    height: 200px;
    border-radius: 10px;
    background-image: url("http://deepbot.tv/notifications/images/host.gif");
    background-repeat: no-repeat;
    overflow: hidden;
}
#host-notification .hostname {
    margin-top: 20px;
    text-align: center;
    width: 313px;
    font-size: 24px;
    font-family: Verdana;
    text-shadow: 2px 2px 1px #000;
    color: #ffffff;
}
.hostdiv {
    text-align: center;
    vertical-align: middle;
    margin-top: 4px;
    margin-left: 2px;
    text-shadow: 2px 2px 1px #000;
    color: #ffffff;
    border-radius: 50%;
    width: 44px;
    height: 38px;
    line-height: 36px;
    background: #0000;
    border: 3px solid #F00;
    font: 22px Arial, sans-serif;
    -webkit-transform: rotate(-45deg);
}
.hostnumber {
    position: relative;
    top: 11%;
}
#host-notification .header {
    text-align: center;
    width: 500;
    vertical-align: top;
    font-size: 26px;
    line-height: 26px;
    font-family: Algerian;
    text-shadow: 1px 1px 1px #97A02A;
    text-decoration: underline;
    color: red;
    visibility: hidden;
    padding-top: -50px;
}
.hostname:after {
    content: ' is bringing the party!';
}
.hostnum:after {
    content: '';
}

Widget


@font-face {
    font-family: 'Dolce Vita';
    src: url('fonts/Dolce Vita.ttf');
}
#infoContainer {
    width: 0px;
    height: 0px;
    background: #2e5794;
    position: absolute;
    top: 0px;
    left: 0px;
    overflow: hidden;
    color: white;
    font-family: 'Dolce Vita';
    -webkit-box-shadow: 0px 0px 20px #0f3369;
}
#infoHeader {
    width: 400px;
    height: 26px;
    background: #0f3369;
    position: relative;
    overflow: hidden;
    text-align: center;
    font-size: 24px;
}
#infoContent {
    width: 400px;
    height: 94px;
    background: #2e5794;
    position: relative;
    overflow: hidden;
    color: white;
}
#infoContentText {
    text-align: center;
    display: table-cell;
    height: 80px;
    width: 300px;
    vertical-align: middle;
}
#InfoImage {
    width: 90px;
    height: 90px;
    float: left;
    background-image: url("images/twitchLogo.png");
    background-repeat: no-repeat;
    background-size: contain;
}

Leader Board


@font-face {
    font-family: 'Dolce Vita';
    src: url('fonts/Dolce Vita.ttf');
}
#infoContainer {
    width: 300px;
    height: 180px;
    background: transparent;
    position: absolute;
    top: 0px;
    left: 0px;
    overflow: hidden;
    color: white;
    font-family: 'Dolce Vita';
    //-webkit-box-shadow: 0px 0px 20px #0f3369;
}
.leaderText {
    background: transparent;
    position: relative;
    overflow: hidden;
    text-align: left;
    margin-left: 20px;
    font-size: 20px;
    font-weight: bold;
    color: black;
}

OBS Chat v9


::-webkit-scrollbar {
    visibility: hidden;
}
html {
    height: 95%;
    width: 95%;
}
BODY {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 14px;
    font-style: normal;
    font-variant: normal;
    font-weight: normal;
    color: #FFF;
    height: 95%;
    width: 95%;
    overflow: hidden;
}
.nick {
    font-weight: bold;
    text-transform: capitalize;
    text-shadow: 1px 1px 0 #000;
}
.emote {
    margin: -4px 0px;
}
.tag {
    display: inline-block;
    text-indent: 21px;
    background-position: 0 center;
    background-repeat: no-repeat;
    display: inline-block;
    vertical-align: bottom;
    height: 18px;
    width: 18px;
    padding: 0;
    margin-right: 3px;
    margin-bottom: -1px;
    text-indent: -9999px;
    border-radius: 2px;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    overflow: hidden;
}
.turbo {
    background-color: #6441a5;
    background-image: url(http://www-cdn.jtvnw.net/images/xarth/badge_turbo.svg);
    background-size: 100%;
}
.moderator {
    background-color: #34ae0a;
    background-image: url(http://www-cdn.jtvnw.net/images/xarth/badge_mod.svg);
    background-size: 100%;
}
.broadcaster {
    background-color: #e71818;
    background-image: url(http://www-cdn.jtvnw.net/images/xarth/badge_broadcaster.svg);
    background-size: 100%;
}
.staff {
    background-color: #200f33;
    background-image: url(http://www-cdn.jtvnw.net/images/xarth/badge_staff.svg);
    background-size: 100%;
}
.admin {
    background-color: #faaf19;
    background-image: url(http://www-cdn.jtvnw.net/images/xarth/badge_admin.svg);
    background-size: 100%;
}
.global_mod {
    background-color: #0C6F20;
    background-image: url(http://www-cdn.jtvnw.net/images/xarth/badge_globalmod.svg);
    background-size: 100%;
}
.creator {
    background-image: url(http://deepbot.deep.sg/images/obschat/creator.gif);
}
.support {
    background-image: url(http://deepbot.deep.sg/images/obschat/support.png);
}
.vipbronze {
    background-image: url(http://deepbot.deep.sg/images/obschat/vipbronze.png);
}
.vipsilver {
    background-image: url(http://deepbot.deep.sg/images/obschat/vipsilver.png);
}
.vipgold {
    background-image: url(http://deepbot.deep.sg/images/obschat/vipgold.png);
}
.chat_line {
    padding-left: 5px;
    padding-right: 5px;
    margin-right: -10px;
    padding-top: 2px;
    padding-bottom: 3px;
    line-height: 16px;
    word-wrap: break-word;
    color: #FFF;
}
#chat_box {} #chat_container {
    border-radius: 10px;
    background-color: rgba(0, 0, 0, 0.6);
    padding: 10px;
    height: 95%;
    width: 95%;
}

Drag Race


body {
    background-color: transparent;
    color: white;
}
#race-track {
    background-image: url('http://deepbot.tv/images/widgets/racetrack/racetrack.png');
    width: 900px;
    height: 650px;
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
    display: none;
}
#race-track .Car1 {
    position: absolute;
    background-image: url('http://deepbot.tv/images/widgets/racetrack/carblue.png');
    background-size: cover;
    width: 150px;
    height: 70px;
    margin-top: 8px;
}
#race-track .Car2 {
    position: absolute;
    background-image: url('http://deepbot.tv/images/widgets/racetrack/cargreen.png');
    background-size: cover;
    width: 150px;
    height: 70px;
    margin-top: 91px;
}
#race-track .Car3 {
    position: absolute;
    background-image: url('http://deepbot.tv/images/widgets/racetrack/carblack.png');
    background-size: cover;
    width: 150px;
    height: 70px;
    margin-top: 171px;
}
#race-track .Car4 {
    position: absolute;
    background-image: url('http://deepbot.tv/images/widgets/racetrack/carpurple.png');
    background-size: cover;
    width: 150px;
    height: 70px;
    margin-top: 251px;
}
#race-track .Car5 {
    position: absolute;
    background-image: url('http://deepbot.tv/images/widgets/racetrack/carred.png');
    background-size: cover;
    width: 150px;
    height: 70px;
    margin-top: 331px;
}
#race-track .Car6 {
    position: absolute;
    background-image: url('http://deepbot.tv/images/widgets/racetrack/cargold.png');
    background-size: cover;
    width: 150px;
    height: 70px;
    margin-top: 411px;
}
#race-track .Car7 {
    position: absolute;
    background-image: url('http://deepbot.tv/images/widgets/racetrack/caryellow.png');
    background-size: cover;
    width: 150px;
    height: 70px;
    margin-top: 491px;
}
#race-track .Car8 {
    position: absolute;
    background-image: url('http://deepbot.tv/images/widgets/racetrack/carskyblue.png');
    background-size: cover;
    width: 150px;
    height: 70px;
    margin-top: 571px;
}

Streamer Threads Notification


body {
    background-color: transparent;
    color: white;
}
#streamerthreads-notification {
    display: none;
    position: absolute;
    top: 0px;
    left: 0px;
    width: 730px;
    height: 730px;
    border-radius: 5px;
    background-image: url("http://streamerthreads.co.uk/api/bg.png");
    background-repeat: no-repeat;
}
#streamerthreads-notification .streamerthreadsname {
    position: absolute;
    margin-top: 245px;
    text-align: center;
    width: 750px;
    font-size: 58px;
    font-family: Verdana;
    text-shadow: 2px 2px 1px #000;
    font-weight: bold;
    color: #9966ff;
}
#streamerthreads-notification .header {
    position: absolute;
    margin-top: 380px;
    text-align: center;
    width: 750px;
    font-size: 62px;
    font-weight: bold;
    line-height: 26px;
    font-family: 'Verdana';
    text-shadow: 2px 2px 1px #000;
    color: #9966ff;
}
#streamerthreads-notification .header:after {
    content: "'s";
}

Sub Notification


body {
    background-color: transparent;
    color: white;
}
#sub-notification {
    display: none;
    position: absolute;
    top: 0px;
    left: 0px;
    width: 500px;
    height: 410px;
    background-repeat: no-repeat;
    background-position-y: 30px;
}
#sub-notification .subname {
    margin-left: 55px;
    padding-top: 100px;
    text-align: left;
    width: 385px;
    line-height: 45px;
    vertical-align: middle;
    font-size: 32px;
    font-family: Algerian;
    text-shadow: 2px 2px 1px #000;
    color: #ffffff;
}
#sub-notification .streamname {
    margin-right: 40px;
    padding-top: 20px;
    text-align: right;
    line-height: 45px;
    vertical-align: top;
    font-size: 32px;
    font-family: Algerian;
    text-shadow: 2px 2px 1px #000;
    color: transparent;
    text-shadow: 0 0 3px rgba(255, 255, 255, 1);
}
#sub-notification .header {
    margin-right: 0px;
    padding-top: 10px;
    text-align: center;
    vertical-align: top;
    font-size: 32px;
    line-height: 26px;
    font-family: Algerian;
    text-shadow: 2px 2px 1px #CBC2FF;
    color: black;
}

Sub Notification 3


body {
    background-color: transparent;
    color: white;
}
#sub-notification {
    display: none;
    position: absolute;
    top: 0px;
    left: 0px;
    width: 580px;
    height: 370px;
    background-repeat: no-repeat;
    background-position-y: 0px;
    background-image: url('http://deepbot.tv/notifications/CreditCard.png');
}
#resub-notification {
    display: none;
    position: absolute;
    top: 0px;
    left: 0px;
    width: 580px;
    height: 370px;
    background-repeat: no-repeat;
    background-position-y: 0px;
    background-image: url('http://deepbot.tv/notifications/NoNumCreditCard.png');
}
.subname {
    margin-left: 60px;
    padding-top: 175px;
    width: 380px;
    text-align: left;
    line-height: 14px;
    font-size: 28px;
    font-family: Algerian;
    text-shadow: 2px 2px 1px #000;
    color: ##FF0000;
}
.months {
    position: absolute;
    top: 55px;
    margin-left: 420px;
    width: 20px;
    text-align: right;
    line-height: 14px;
    font-size: 28px;
    font-family: 'Squada One', cursive;
    text-shadow: 2px 2px 1px #000;
    color: #FFF;
}
.badge {
    position: absolute;
    top: 50px;
    margin-left: 420px;
    background-image: url("");
    background-repeat: no-repeat;
    background-size: 25px 25px;
    width: 30px;
    height: 30px;
    -webkit-animation: rot 3s infinite linear;
}
.msg {
    position: absolute;
    top: 20px;
    margin-left: 40px;
    width: 60%;
    font-size: 28px;
    font-family: 'Squada One', cursive;
    text-shadow: 2px 2px 1px #000;
    color: #FFF;
}
@-webkit-keyframes rot {
    from {
        -webkit-transform: rotate(0deg) translate(-30px) rotate(0deg);
    }
    to {
        -webkit-transform: rotate(360deg) translate(-30px) rotate(-360deg);
    }
}

Sub Tracker


body {
    background-color: transparent;
    color: white;
}
#content {
    width: 300px;
    margin: 5px;
    margin-left: 45px;
}
#gauge-value {
    color: red;
    width: 300px;
    text-align: center;
    font-size: 52;
    font-weight: bold;
    margin-top: -80px;
    -webkit-text-stroke: 2px;
    -webkit-text-stroke-color: white;
    position: absolute;
    text-shadow: 1px 0px 20px black;
}