« previous next »
Pages: [1] 2

Author Topic: [Guide] xSplit Custom Notifications  (Read 18235 times)

0 Members and 2 Guests are viewing this topic.

TheNumbLock

  • Advisor
  • Councilor
  • **
  • Posts: 4776
  • Karma: +137/-5
    • View Profile
  • Twitch Name: TheNumbLock
[Guide] xSplit Custom Notifications
« 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.



Setting up Notifications in DeepBot

1. First you need to set-up your follower/donation notification on DeepBot

1a. Follower Setup


1b. Donation Setup


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



2b. Once you select Webpage URL an address bar will appear where you will need to enter an URL.



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)

Follower Notification (Below are current notification options available)

Subscriber Notification (Below are current notification options available)

Other Options


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.



Now to edit the CSS for the notifications:



Note: xSplit only uses double quotes (") Do not use single quotes (').

Donation CSS Code:

Code: [Select]
#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:

Code: [Select]
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:

Code: [Select]
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:

Code: [Select]
::-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%;
}
Logged
Old Name: RepentGamingTV
Twitch: Here

Need help ASAP?
Join Deepbot's Discord: Discord.Deepbot.tv
Deepbot's Twitter: @DeepSupport

RSQViper

  • Youngling
  • *
  • Posts: 8
  • Karma: +0/-0
    • View Profile
  • Twitch Name: RSQViper
Re: [Guide] xSplit Custom Notifications
« Reply #1 on: June 05, 2015, 11:58:30 PM »
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?
Logged

TheNumbLock

  • Advisor
  • Councilor
  • **
  • Posts: 4776
  • Karma: +137/-5
    • View Profile
  • Twitch Name: TheNumbLock
Re: [Guide] xSplit Custom Notifications
« Reply #2 on: June 06, 2015, 08:42:31 AM »
Quote from: RSQViper on June 05, 2015, 11:58:30 PM
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
Logged
Old Name: RepentGamingTV
Twitch: Here

Need help ASAP?
Join Deepbot's Discord: Discord.Deepbot.tv
Deepbot's Twitter: @DeepSupport

MS_Niveaulos

  • Youngling
  • *
  • Posts: 12
  • Karma: +0/-0
    • View Profile
  • Twitch Name: Necr1te
Re: [Guide] xSplit Custom Notifications
« Reply #3 on: September 30, 2015, 05:24:08 PM »
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 :
Quote
    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? :(
Logged

MercurY3rd

  • Councilor
  • *****
  • Posts: 652
  • Karma: +26/-1
    • View Profile
  • Twitch Name: mercury3rd
Re: [Guide] xSplit Custom Notifications
« Reply #4 on: September 30, 2015, 09:22:16 PM »
you use XSplit or OBS?
can you Pastebin your CSS?
Logged
Hier steht nichts Sinnvolles, dennoch freundliche Grüße. MercurY

MS_Niveaulos

  • Youngling
  • *
  • Posts: 12
  • Karma: +0/-0
    • View Profile
  • Twitch Name: Necr1te
Re: [Guide] xSplit Custom Notifications
« Reply #5 on: October 01, 2015, 01:00:11 AM »
using xSplit and tried every single CSS from the link. :-/
Logged

TheNumbLock

  • Advisor
  • Councilor
  • **
  • Posts: 4776
  • Karma: +137/-5
    • View Profile
  • Twitch Name: TheNumbLock
Re: [Guide] xSplit Custom Notifications
« Reply #6 on: October 02, 2015, 08:00:49 AM »
What image are you trying to use? I can try and do the CSS.
Logged
Old Name: RepentGamingTV
Twitch: Here

Need help ASAP?
Join Deepbot's Discord: Discord.Deepbot.tv
Deepbot's Twitter: @DeepSupport

MS_Niveaulos

  • Youngling
  • *
  • Posts: 12
  • Karma: +0/-0
    • View Profile
  • Twitch Name: Necr1te
Re: [Guide] xSplit Custom Notifications
« Reply #7 on: October 05, 2015, 07:34:10 PM »
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 :(
Logged

MS_Niveaulos

  • Youngling
  • *
  • Posts: 12
  • Karma: +0/-0
    • View Profile
  • Twitch Name: Necr1te
Re: [Guide] xSplit Custom Notifications
« Reply #8 on: October 05, 2015, 08:20:22 PM »
god damn " quotes -.-... 2days of my life left, because of ' to " ... got it xD
Logged

MS_Niveaulos

  • Youngling
  • *
  • Posts: 12
  • Karma: +0/-0
    • View Profile
  • Twitch Name: Necr1te
Re: [Guide] xSplit Custom Notifications
« Reply #9 on: October 05, 2015, 08:39:48 PM »
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  :(
Logged

TheNumbLock

  • Advisor
  • Councilor
  • **
  • Posts: 4776
  • Karma: +137/-5
    • View Profile
  • Twitch Name: TheNumbLock
Re: [Guide] xSplit Custom Notifications
« Reply #10 on: October 05, 2015, 10:21:25 PM »
Quote from: MS_Niveaulos on October 05, 2015, 08:39:48 PM
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?
Logged
Old Name: RepentGamingTV
Twitch: Here

Need help ASAP?
Join Deepbot's Discord: Discord.Deepbot.tv
Deepbot's Twitter: @DeepSupport

MS_Niveaulos

  • Youngling
  • *
  • Posts: 12
  • Karma: +0/-0
    • View Profile
  • Twitch Name: Necr1te
Re: [Guide] xSplit Custom Notifications
« Reply #11 on: October 07, 2015, 11:10:35 PM »
follow :)
Logged

TheNumbLock

  • Advisor
  • Councilor
  • **
  • Posts: 4776
  • Karma: +137/-5
    • View Profile
  • Twitch Name: TheNumbLock
Re: [Guide] xSplit Custom Notifications
« Reply #12 on: October 08, 2015, 01:30:00 AM »
Quote from: MS_Niveaulos on October 07, 2015, 11:10:35 PM
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;
}
Logged
Old Name: RepentGamingTV
Twitch: Here

Need help ASAP?
Join Deepbot's Discord: Discord.Deepbot.tv
Deepbot's Twitter: @DeepSupport

MS_Niveaulos

  • Youngling
  • *
  • Posts: 12
  • Karma: +0/-0
    • View Profile
  • Twitch Name: Necr1te
Re: [Guide] xSplit Custom Notifications
« Reply #13 on: October 16, 2015, 11:08:29 PM »
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
Logged

TheNumbLock

  • Advisor
  • Councilor
  • **
  • Posts: 4776
  • Karma: +137/-5
    • View Profile
  • Twitch Name: TheNumbLock
Re: [Guide] xSplit Custom Notifications
« Reply #14 on: October 19, 2015, 02:52:32 AM »
Quote from: MS_Niveaulos on October 16, 2015, 11:08:29 PM
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:
Code: [Select]
#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;
}
Logged
Old Name: RepentGamingTV
Twitch: Here

Need help ASAP?
Join Deepbot's Discord: Discord.Deepbot.tv
Deepbot's Twitter: @DeepSupport
Pages: [1] 2
« previous next »