Deep Bot - Twitch Streamer Assistant
Deep Bot => Guides, Tutorials & Demo Videos => Topic started by: TheNumbLock on April 08, 2015, 04:42:55 AM
-
I do not take credits on this guide, all credits go to Morionezs with his guide here: https://support.xsplit.com/forum/viewtopic.php?f=3&t=26589
How to set it up:
Make sure that you already connected your Twitch Bot account and Twitch Streaming account.
(https://support.xsplit.com/forum/download/file.php?id=3542&sid=2c85557a6fe466e6bc45d100220b4d58)
Setting up Notifications in DeepBot
1. First you need to set-up your follower/donation notification on DeepBot
1a. Follower Setup
(http://puu.sh/h5b6j/0f599f5a19.png)
1b. Donation Setup
(http://puu.sh/h5dze/f6fe8f9d79.png)
2a. Once you have already set-up your follower notification to your liking on DeepBot go to your XSplit Broadcaster 2.0. Go to Source > Other > Webpage URL
(https://support.xsplit.com/forum/download/file.php?id=3544&sid=2c85557a6fe466e6bc45d100220b4d58)
2b. Once you select Webpage URL an address bar will appear where you will need to enter an URL.
(https://support.xsplit.com/forum/download/file.php?id=3545&sid=2c85557a6fe466e6bc45d100220b4d58)
3. You will need to enter the URL of the Follower Notification on the “Add Webpage URL” address bar:
Donation Notification (Below are current notification options available)
- Default Image: http://deepbot.tv/notifications/donationnotification.htm (Dimensions 800x370)
- Custom Image: http://deepbot.tv/notifications/donationnotification2.htm
Follower Notification (Below are current notification options available)
- Default Image: http://deepbot.tv/notifications/follownotification.htm?dur=10000 (Dimensions 500x100) ''Dur in the link indicates the duration the notification should stay on.''
- Default Image 2: http://deepbot.tv/notifications/follownotification1.htm?dur=10000 (Dimensions 500x100) ''Dur in the link indicates the duration the notification should stay on.''
- Custom Pic: http://deepbot.tv/notifications/follownotification1.htm?dur=10000 ''Dur in the link indicates the duration the notification should stay on.''
Subscriber Notification (Below are current notification options available)
- Default Image: http://deepbot.tv/notifications/subnotification.htm(Dimensions 500x410)
- Custom Pic: http://deepbot.tv/notifications/subnotification1.htm
Other Options
- The OBS Chat overlay : http://deepbot.tv/notifications/OBSChatv4.htm?fade=30 (Enable External Chat on the Chat Tab)
- Drag Race on Screen Display : http://deepbot.tv/widgets/racetrack.htm (Dimensions 900x650)
- Sub Target Tracker : http://deepbot.tv/widgets/subtracker.htm (Dimensions 300x150)
- Donation Target Tracker : http://deepbot.tv/widgets/donationtracker.htm (Dimensions 300x300)
Also, you can set the dimension of notification by right clicking on the web page URL source and using “Custom Settings” and set it to 500x100 for example.
(https://support.xsplit.com/forum/download/file.php?id=3549&sid=2c85557a6fe466e6bc45d100220b4d58)
Now to edit the CSS for the notifications:
(http://puu.sh/h5dTO/4353d7d59c.png)
Note: xSplit only uses double quotes (") Do not use single quotes (').
Donation CSS Code:
#donor-notification {
display: none;
position: absolute;
top: 0px;
left: 0px;
width: 800px;
height: 365px;
background-repeat: no-repeat;
background-image: url("Cheque.png");
}
#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;
}
Follower CSS Code:
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;
}
Subscriber CSS code:
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;
}
OBS/xSplit Chat Overlay:
::-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%;
}
.nick {
font-weight: bold;
text-transform: capitalize;
text-shadow: 1px 1px 0 #000;
}
.tag {
display: inline-block;
text-indent: 21px;
background-position: 0 center;
background-repeat: no-repeat;
display: inline-block;
vertical-align: bottom;
height: 18px;
min-width: 18px;
width: expression((document.body.clientWidth < $width) ? "18px":"auto");
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://chat-badges.s3.amazonaws.com/turbo.png);
}
.moderator {
background-color: #009900;
background-image: url(http://chat-badges.s3.amazonaws.com/mod.png);
}
.broadcaster {
background-color: #000000;
background-image: url(http://chat-badges.s3.amazonaws.com/broadcaster.png);
}
.staff {
background-image: url(http://chat-badges.s3.amazonaws.com/staff.png);
}
.admin {
background-image: url(http://chat-badges.s3.amazonaws.com/admin.png);
}
.creator {
background-image: url(http://deepbot.deep.sg/images/obschat/creator.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%;
}
-
I don't understand the background picture options. Like the background picture for subscriber notifications, what is that link all about? How do I add my own and make it work?
-
I don't understand the background picture options. Like the background picture for subscriber notifications, what is that link all about? How do I add my own and make it work?
You use the custom pic link, and then you use the CSS, to make it your pic and adjust the fonts and what not.
Some examples can be found here (Gallery Links): http://deepbot.deep.sg/forums/index.php?board=13.0
-
hey guys, i tried every css from here http://deepbot.deep.sg/forums/index.php?topic=1648.0 but i only get the standard follower backgrounds :(.
also i´ll test every link :
Default Image: http://deepbot.tv/notifications/follownotification.htm?dur=10000 (Dimensions 500x100) ''Dur in the link indicates the duration the notification should stay on.''
Default Image 2: http://deepbot.tv/notifications/follownotification1.htm?dur=10000 (Dimensions 500x100) ''Dur in the link indicates the duration the notification should stay on.''
Custom Pic: http://deepbot.tv/notifications/follownotification1.htm?dur=10000 ''Dur in the link indicates the duration the notification should stay on.''
some ideas? :(
-
you use XSplit or OBS?
can you Pastebin your CSS?
-
using xSplit and tried every single CSS from the link. :-/
-
What image are you trying to use? I can try and do the CSS.
-
tried some css from the gallery... like this
#follow-notification {
display: none;
position: absolute;
top: 0px;
left: 0px;
width: 500px !important;
height: 100px !important;
border-radius: 0px !important;
background-image: url('http://i1143.photobucket.com/albums/n631/MGC_Smokes/14_zps9f48d697.png') !important;
background-repeat: no-repeat;
}
#follow-notification .followname {
margin-top: 10px !important;
margin-left: 15px !important;
text-align: center !important;
width: 430px !important;
font-size: 32px !important;
font-weight: normal !important;
font-family: Comic Sans MS !important;
color: white !important;
}
dosnt work :(
-
god damn " quotes -.-... 2days of my life left, because of ' to " ... got it xD
-
okay, sorry for multy posts... .pngs are allready cool... but cant use gifs :(...
can someone help me with https://www.dropbox.com/s/h7zitrb5wlw0upj/segel2.gif?dl=0 :(
-
okay, sorry for multy posts... .pngs are allready cool... but cant use gifs :(...
can someone help me with https://www.dropbox.com/s/h7zitrb5wlw0upj/segel2.gif?dl=0 :(
Is it a follower or donation notification?
-
follow :)
-
follow :)
#follow-notification {
display: none;
position: absolute;
width: 1072px !important;
height: 1080px !important;
border-radius: 00px !important;
background-image: url("http://i.imgur.com/HRGSwqu.gif") !important;
background-repeat: no-repeat;
}
#follow-notification .followname {
position: absolute !important;
text-align: center !important;
margin-top: 200px !important;
margin-left: 500px !important;
width: 500px !important;
font-size: 50px !important;
font-weight: normal !important;
font-family: Impact !important;
color: #ffffff !important;
text-transform: capitalize;
-webkit-text-fill-color: White;
-webkit-text-stroke-color: black;
-webkit-text-stroke-width: 0px;
}
.followname:before {
content: "New Follower " !important;
}
-
thank you :) it works... i tried the same with the donation, but as allways no luck for me :(...
can u help me with this?
http://www.fotos-hochladen.net/uploads/456d772e9e9bedfy40vd6zbto.gif
thanks again :( and sorry
-
thank you :) it works... i tried the same with the donation, but as allways no luck for me :(...
can u help me with this?
http://www.fotos-hochladen.net/uploads/456d772e9e9bedfy40vd6zbto.gif
thanks again :( and sorry
CSS:
#donor-notification {
position: absolute;
width: 554px !important;
height: 501px !important;
background-repeat: no-repeat;
background-size: contain !important;
background-image: url("http://www.fotos-hochladen.net/uploads/456d772e9e9bedfy40vd6zbto.gif") !important;
overflow: visible !important;
}
#donor-notification .header {
visibility: hidden !important;
}
#donor-notification .date {
visibility: hidden !important;
}
#donor-notification .streamname {
visibility: hidden !important;
}
#donor-notification .message {
visibility: hidden !important;
}
#donor-notification .amount {
position: absolute !important;
margin-top: 460px !important;
margin-left: -80px !important;
width: 300px !important;
font-size: 40px !important;
font-weight: normal !important;
font-family: Impact !important;
text-transform: capitalize;
color: white !important;
-webkit-text-stroke-color: white;
-webkit-text-stroke-width: 0px;
-webkit-text-fill-color: white;
}
#donor-notification .donor {
position: absolute !important;
margin-top: 460px !important;
margin-left: -100px !important;
width: 300px !important;
font-size: 40px !important;
font-weight: normal !important;
font-family: Impact !important;
text-transform: capitalize;
color: white !important;
-webkit-text-stroke-color: white;
-webkit-text-stroke-width: 0px;
-webkit-text-fill-color: white;
}
-
thank you so much !