~~NOTOC~~ ====== 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 **[[http://deepbot.tv/services|Here]]** * **[[widgets#OBS Classic Setup|OBS Classic Setup]]** * **[[widgets#OBS Studio Setup|OBS Studio Setup]]** * **[[widgets#xSplit Setup|xSplit Setup]]** * **[[widgets#CLR Browser URLs|CLR Browser URLs]]** * **[[widgets#CSS Style Sheets|CSS Style Sheets]]** ---- ===== 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 - **[[http://obsproject.com/|OBS Website]]** * **B.** CLR Browser Plugin - **[[https://obsproject.com/forum/resources/clr-browser-source-plugin.22/|OBS Forum Thread]]** * Latest CLR Browser 32bit - **[[http://catchexception.org/tmp/CLRBrowserSourcePlugin3.7z|Download Link]]** * Latest CLR Browser 64bit - **[[http://catchexception.org/tmp/CLRBrowserSourcePlugin64Mark2.7z|Download Link]]** * **C.** You need to update your MS Visual C++ Run Times to 2013 - **[[http://www.microsoft.com/en-us/download/details.aspx?id=40784|Here]]** (Click download and choose x86 or x64 accordingly.) * **D.** Latest version of .NET Framework: * Web install: **[[http://www.microsoft.com/en-us/download/details.aspx?id=42643|Here]]** * Offline install: **[[http://www.microsoft.com/en-us/download/details.aspx?id=42642|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 **[[https://www.youtube.com/watch?v=-iin_foaNJ4|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** | [[http://deepbot.tv/notifications/cheernotification.htm|Here]] || | **Cheer Goal Tracker** | [[http://deepbot.tv/widgets/cheertracker.htm|Here]] || | **Donation** | [[http://deepbot.tv/notifications/donationnotification.htm|Here]] 800x370 | [[http://deepbot.tv/notifications/donationnotification2.htm|Here]] | | **Donation Goal Tracker** | [[http://deepbot.tv/widgets/donationtracker.htm|Vertical Version]] 300x300 | [[http://deepbot.tv/widgets/donationtracker.htm?mode=2|Horizontal Version]] | | **Drag Race** | [[http://deepbot.tv/widgets/racetrack.htm|Here]] 900x650 || | **Follow** | [[http://deepbot.tv/notifications/follownotification.htm?dur=10000|Here]] 500x100 | [[http://deepbot.tv/notifications/follownotification1.htm?dur=10000|Here]] | | **Host** | [[http://deepbot.tv/notifications/hostnotification.htm?w=600&h=200|Here]] | [[http://deepbot.tv/notifications/hostnotification.htm?w=600&h=200|Here]] | | **Leader Board/Event List** | [[http://deepbot.tv/widgets/LeaderBoard.htm?num=5&time=15&test=0|Here]] || | **OBS/Twitch Chat Overlay** | [[http://deepbot.tv/notifications/OBSChatv11.htm?fade=30|Here]] || | **Roulette** | [[http://deepbot.tv/widgets/roulette.htm|Here]] | [[http://deepbot.tv/widgets/roulette_minimal.htm?hidecountdown=1&hidewinners=1|Minimal Version Here]] | | **Subscriber** | [[http://deepbot.tv/notifications/subnotification3.htm|Here]] || | **Subscriber Goal Tracker** | [[http://deepbot.tv/widgets/subtracker.htm|Here]] 300x150 || | **Widgets** | [[http://deepbot.tv/widgets/InfoPanel.htm|Default Widget]] | [[http://deepbot.tv/widgets/ImagePanel.htm|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 - **[[http://obsproject.com/|OBS Website]]** ***B.** CLR Browser Plugin - **[[https://obsproject.com/forum/resources/browser-plugin.115/|OBS Forum Thread]]** * Windows - **[[https://github.com/kc5nra/obs-browser/releases/download/v1.22/obs-browser-1.22.zip|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) - **[[https://builds.catchexception.org/obs-browser/obs-browser-darwinx64-cefx86-1.0-6-g5980e5a-installer.dmg|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** | [[http://deepbot.tv/notifications/cheernotification.htm|Here]] || | **Cheer Goal Tracker** | [[http://deepbot.tv/widgets/cheertracker.htm|Here]] || | **Donation** | [[http://deepbot.tv/notifications/donationnotification.htm|Here]] 800x370 | [[http://deepbot.tv/notifications/donationnotification2.htm|Here]] | | **Donation Goal Tracker** | [[http://deepbot.tv/widgets/donationtracker.htm|Vertical Version]] 300x300 | [[http://deepbot.tv/widgets/donationtracker.htm?mode=2|Horizontal Version]] | | **Drag Race** | [[http://deepbot.tv/widgets/racetrack.htm|Here]] 900x650 || | **Follow** | [[http://deepbot.tv/notifications/follownotification.htm?dur=10000|Here]] 500x100 | [[http://deepbot.tv/notifications/follownotification1.htm?dur=10000|Here]] | | **Host** | [[http://deepbot.tv/notifications/hostnotification.htm?w=600&h=200|Here]] | [[http://deepbot.tv/notifications/hostnotification.htm?w=600&h=200|Here]] | | **Leader Board/Event List** | [[http://deepbot.tv/widgets/LeaderBoard.htm?num=5&time=15&test=0|Here]] || | **OBS/Twitch Chat Overlay** | [[http://deepbot.tv/notifications/OBSChatv11.htm?fade=30|Here]] || | **Roulette** | [[http://deepbot.tv/widgets/roulette.htm|Here]] | [[http://deepbot.tv/widgets/roulette_minimal.htm?hidecountdown=1&hidewinners=1|Minimal Version Here]] | | **Subscriber** | [[http://deepbot.tv/notifications/subnotification3.htm|Here]] || | **Subscriber Goal Tracker** | [[http://deepbot.tv/widgets/subtracker.htm|Here]] 300x150 || | **Widgets** | [[http://deepbot.tv/widgets/InfoPanel.htm|Default Widget]] | [[http://deepbot.tv/widgets/ImagePanel.htm|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 - **[[https://www.xsplit.com/|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** | [[http://deepbot.tv/notifications/cheernotification.htm|Here]] || | **Cheer Goal Tracker** | [[http://deepbot.tv/widgets/cheertracker.htm|Here]] || | **Donation** | [[http://deepbot.tv/notifications/donationnotification.htm|Here]] 800x370 | [[http://deepbot.tv/notifications/donationnotification2.htm|Here]] | | **Donation Goal Tracker** | [[http://deepbot.tv/widgets/donationtracker.htm|Vertical Version]] 300x300 | [[http://deepbot.tv/widgets/donationtracker.htm?mode=2|Horizontal Version]] | | **Drag Race** | [[http://deepbot.tv/widgets/racetrack.htm|Here]] 900x650 || | **Follow** | [[http://deepbot.tv/notifications/follownotification.htm?dur=10000|Here]] 500x100 | [[http://deepbot.tv/notifications/follownotification1.htm?dur=10000|Here]] | | **Host** | [[http://deepbot.tv/notifications/hostnotification.htm?w=600&h=200|Here]] | [[http://deepbot.tv/notifications/hostnotification.htm?w=600&h=200|Here]] | | **Leader Board/Event List** | [[http://deepbot.tv/widgets/LeaderBoard.htm?num=5&time=15&test=0|Here]] || | **OBS/Twitch Chat Overlay** | [[http://deepbot.tv/notifications/OBSChatv11.htm?fade=30|Here]] || | **Roulette** | [[http://deepbot.tv/widgets/roulette.htm|Here]] | [[http://deepbot.tv/widgets/roulette_minimal.htm?hidecountdown=1&hidewinners=1|Minimal Version Here]] | | **Subscriber** | [[http://deepbot.tv/notifications/subnotification3.htm|Here]] || | **Subscriber Goal Tracker** | [[http://deepbot.tv/widgets/subtracker.htm|Here]] 300x150 || | **Widgets** | [[http://deepbot.tv/widgets/InfoPanel.htm|Default Widget]] | [[http://deepbot.tv/widgets/ImagePanel.htm|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** | [[http://deepbot.tv/notifications/cheernotification.htm|Here]] || | **Cheer Goal Tracker** | [[http://deepbot.tv/widgets/cheertracker.htm|Here]] || | **Donation** | [[http://deepbot.tv/notifications/donationnotification.htm|Here]] 800x370 | [[http://deepbot.tv/notifications/donationnotification2.htm|Here]] | | **Donation Goal Tracker** | [[http://deepbot.tv/widgets/donationtracker.htm|Vertical Version]] 300x300 | [[http://deepbot.tv/widgets/donationtracker.htm?mode=2|Horizontal Version]] | | **Drag Race** | [[http://deepbot.tv/widgets/racetrack.htm|Here]] 900x650 || | **Follow** | [[http://deepbot.tv/notifications/follownotification.htm?dur=10000|Here]] 500x100 | [[http://deepbot.tv/notifications/follownotification1.htm?dur=10000|Here]] | | **Host** | [[http://deepbot.tv/notifications/hostnotification.htm?w=600&h=200|Here]] | [[http://deepbot.tv/notifications/hostnotification.htm?w=600&h=200|Here]] | | **Leader Board/Event List** | [[http://deepbot.tv/widgets/LeaderBoard.htm?num=5&time=15&test=0|Here]] || | **OBS/Twitch Chat Overlay** | [[http://deepbot.tv/notifications/OBSChatv11.htm?fade=30|Here]] || | **Roulette** | [[http://deepbot.tv/widgets/roulette.htm|Here]] | [[http://deepbot.tv/widgets/roulette_minimal.htm?hidecountdown=1&hidewinners=1|Minimal Version Here]] | | **Subscriber** | [[http://deepbot.tv/notifications/subnotification3.htm|Here]] || | **Subscriber Goal Tracker** | [[http://deepbot.tv/widgets/subtracker.htm|Here]] 300x150 || | **Widgets** | [[http://deepbot.tv/widgets/InfoPanel.htm|Default Widget]] | [[http://deepbot.tv/widgets/ImagePanel.htm|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** | [[widgets#Cheer Notification|Here]] || | **Donation** | [[widgets#Default Donation Notification|Default Donation]] | [[widgets#Custom Donation Notification|Custom Donation Notification]] | | **Donation Goal Tracker** | [[widgets#Donation Tracker Mode 1|Vertical]] | [[widgets#Donation Tracker Mode 2|Horizontal]] | | **Drag Race** | [[widgets#Drag Race|Here]] || | **Follow** | [[widgets#Default Follow Notification|Here]] | [[widgets#Custom Follow Notification|Here]] | | **Host** | [[widgets#Host Notification|Here]] || | **Leader Board/Event List** | [[widgets#Leader Board|Here]] || | **OBS/Twitch Chat Overlay** | [[widgets#OBS Chat v9|Here]] || | **Streamer Threads** | [[widgets#Streamer Threads Notification|Here]] || | **Subscriber** | [[widgets#Sub Notification 3|Here]] || | **Subscriber Goal Tracker** | [[widgets#Sub Tracker|Here]] || | **Widgets** | [[widgets#Widget|Default Widget]] || Need Help with Custom Notifications? Check out the following links: * [[http://deepbot.deep.sg/forums/index.php?topic=2704.0|Custom Notification Workshop]] * [[http://deepbot.deep.sg/forums/index.php?board=13.0|Custom Notification Help Section]] ---- ==== 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,#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; }