Deep Bot - Twitch Streamer Assistant
Deep Bot => Custom Notifications => Topic started by: Backyardis on April 11, 2017, 04:33:23 PM
-
Follower Alert
Image Link: http://i.imgur.com/pdStpH7.png
Font Style/Link: Norwester
Font Color: Red
Any text fill/boarder?:none
Where do you want text located? (Follower Name): Center
Example (If applicable):http://imgur.com/2UeKN4c
Donation Alert
Image Link: http://i.imgur.com/PJoBAiX.png
Font Style/Link: Norwester
Font Color: red / white as per example, all white if only one color alowed.
Any text fill/boarder?:no
Currency Type: $
What do you want the alert to say?(Text Options: Donator Name, Donation Amount, Message): as per example
Example (If applicable): http://imgur.com/5ogiN8X
Anything else?:
Host Alert
Image Link: http://i.imgur.com/15ZcMgm.png
Font Style/Link: Norwester
Font Color: Red /white (White if only one color)
Any text fill/boarder?:No
What do you want the alert to say?(Text Options: Host Name, Amount of Viewers): As per example
Example (If applicable): http://imgur.com/5fT19Rx
Anything else?:
font used for all 3 notifications is
https://www.fontsquirrel.com/fonts/norwester
Thank you in advance
-
Requested by: Backyardis
Follower:
Link: http://deepbot.tv/notifications/follownotification1.htm
Width: 600
Height: 250
CSS Code:
#follow-notification {
display: none;
position: absolute;
top: 0px !important;
left: 0px !important;
width: 550px !important;
height: 200px !important;
border-radius: 00px !important;
background-size: contain !important;
background-image: url(http://i.imgur.com/pdStpH7.png) !important;
background-repeat: no-repeat;
}
#follow-notification .header {
visibility: hidden !important;
}
#follow-notification .followname {
position: absolute !important;
text-align: center !important;
margin-top: 40px !important;
margin-left: 140px !important;
width: 300px !important;
font-size: 38px !important;
font-weight: bold !important;
font-family: Norwester !important;
color: #FF0000 !important;
text-transform: capitalize;
-webkit-text-stroke-color: #000;
-webkit-text-stroke-width: 1px;
}
.followname:before {
content: "" !important;
}
.followname:after {
content: "" !important;
}
Preview: (If there is a black background, it is just my background.)
(http://i.imgur.com/ziV1ZgT.png)
Donation:
Link: http://deepbot.tv/notifications/donationnotification2.htm
Width: 600
Height: 250
CSS Code:
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 {
position: absolute;
top: 0px;
left: 0px !important;
width: 550px !important;
height: 200px !important;
background-image: url(http://i.imgur.com/PJoBAiX.png) !important;
background-repeat: no-repeat;
background-size: contain !important;
}
#donor-notification .header {
visibility: hidden !important;
}
#donor-notification .streamname {
float: left;
visibility: hidden;
}
#donor-notification .message {
position: absolute;
margin-top: 70px !important;
margin-left: 60px !important;
width: 500px !important;
text-align: left !important;
font-weight: normal !important;
font-size: 20px !important;
font-family: Norwester !important;
color: white !important;
text-transform: capitalize !important;
-webkit-text-stroke-color: black;
-webkit-text-stroke-width: 0px;
text-shadow: none !important;
}
#donor-notification .amount {
position: absolute;
margin-top: 0px !important;
margin-left: -220px !important;
width: 300px !important;
text-align: center !important;
font-weight: bold !important;
font-size: 30px !important;
font-family: Norwester !important;
color: red !important;
text-transform: capitalize !important;
background: ;
-webkit-text-stroke-color: black !important;
-webkit-text-stroke-width: 0px;
text-shadow: none !important;
}
#donor-notification .donor {
position: absolute;
margin-top: 0px !important;
margin-left: -130px !important;
width: 300px !important;
text-align: center !important;
font-weight: bold !important;
font-size: 30px !important;
font-family: Norwester !important;
color: red !important;
text-transform: capitalize !important;
-webkit-text-stroke-color: black;
-webkit-text-stroke-width: 0px;
text-shadow: none !important;
}
#donor-notification .title {
padding-top: 30px;
width: 100%;
float: left;
text-align: center;
}
#donor-notification .messagebox {
width: 100%;
text-align: center;
}
.donor:after {
content: " - " ;
}
Preview: (If there is a black background, it is just my background.)
(http://i.imgur.com/F84dvXL.png)
Host:
Link: http://deepbot.tv/notifications/hostnotification.htm?w=600&h=200
Width: 600
Height: 250
CSS Code:
body {
background-color: transparent;
color: white;
}
#host-notification {
top: 0px;
left: 0px !important;
width: 300px;
height: 200px;
border-radius: 10px;
background-image: url(http://i.imgur.com/15ZcMgm.png) !important;
background-repeat: no-repeat;
background-size: contain;
overflow: hidden;
}
#host-notification .hostname {
margin-top: -30px !important;
margin-left: 70px !important;
text-align: center;
width: 420px !important;
font-size: 32px !important;
font-family: Norwester !important;
text-shadow: none !important;
color: red !important;
-webkit-text-stroke-color: black;
-webkit-text-stroke-width: 0px;
text-transform: capitalize !important;
}
.hostdiv {
margin-top: 50px !important;
margin-left: 250px !important;
text-align: center;
width: 450px !important;
font-size: 26px !important;
font-family: Norwester !important;
text-shadow: none !important;
color: white !important;
-webkit-text-stroke-color: black;
-webkit-text-stroke-width: 0px;
text-transform: capitalize !important;
-webkit-transform: rotate(0deg);
border: none !important;
}
.hostnumber {
visibility: visible !important;
position: relative;
top: 50px !important;
left: -200px !important;
}
#host-notification .header {
text-align: center;
width: 500;
vertical-align: top;
font-size: 26px;
line-height: 26px;
font-family: Norwester !important;
text-shadow: none !important;
text-decoration: underline;
color: white !important;
visibility: hidden;
padding-top: -50px;
}
.hostname:after {
content: "";
}
.hostnumber:before {
content: "Bringing Along ";
}
.hostnumber:after {
content: " viewers";
}
.hostdiv:after {
position: absolute !important;
content: "";
margin-top: 50px !important;
margin-left: -350px !important;
text-align: center;
width: 500px !important;
font-size: 30px !important;
font-family: Courgette !important;
color: red !important;
-webkit-text-stroke-color: black;
-webkit-text-stroke-width: 0px;
text-transform: capitalize !important;
}
Preview: (If there is a black background, it is just my background.)
(http://i.imgur.com/W06kxLl.png)
-
Thanks TheNumbLock,
I'm having some trouble implementing this into Xsplit, I have changed the URL to add the " " which i know is an Xsplit requirement but this still does not work.
Sorry i forgot to mention i am using xsplit in the original request
any advise ?
I am just getting the default image when trying use these notifications
What URL are you using for them?
Edit: Updated CSS for xsplit
-
What URL are you using for them?
Edit: Updated CSS for xsplit
I just found the extra ' around the comment section as you posted. Thanks and sorry about that..
I now have another issue which is the top line of the donation looping back on itself
here is a screen grab
http://imgur.com/a/OkVfa
im working on the others now fingers crossed
EDIT:
I have modified the donation CSS to move #donor-notification.donor Text.align to LEFT
and #donor-notification .amount text.align to the Right.
Seems to have fixed it, both were set to center
-
Interesting, I guess I will have to start doing CSS on xSplit since it seems to effect the original CSS from OBS.
-
Just bringing back this thread to request a sub notification (want to keep them all in the one thread for future reference)
Sub Alert
Image Link: http://i.imgur.com/ufa52v1.png
Font Style/Link: Norwester
Font Color: Red /white (as per example)
Any text fill/boarder?:No
What do you want the alert to say?(Text Options: Host Name, Amount of Viewers): As per example
Example (If applicable): http://i.imgur.com/xY69x6g.png
Anything else?:
-using Xsplit
-font used for notification is
https://www.fontsquirrel.com/fonts/norwester
Thanks a heap
BackyardisTV