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
Overview
This guide will run you through setting up notifications/widgets from Deepbot onto your streaming software.
OBS Classic Setup
Pre-requisites
- A. OBS Classic - OBS Website
- B. CLR Browser Plugin - OBS Forum Thread
- Latest CLR Browser 32bit - Download Link
- Latest CLR Browser 64bit - Download Link
- 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:
- 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”
OBS Studio Setup
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”.
xSplit Setup
Pre-requisites
- A. xSplit - xSplit Website
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.
CLR Browser URLs
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 |
CSS Style Sheets
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:
Cheer Notification
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; } }
Default 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: 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; }