Custom Notification WorkShop

[TheNumbLock]

thanks so much! now i must ask where do i insert the code to make it work, still really new to all of this

So on OBS, you already added a CLR Browser Source? If yes, then you edit the properties of the CLR Browser and input what I said, the URL and dimensions go on the General Tab, and the CSS Code, goes on the CSS tab, just copy and paste, then overwrite anything on the CSS tab. Then you can test it, by doing preview on the follower notification settings on deepbot. Make sure OBS CLR Browser is checked on those settings as well. If you have any trouble/problems, let me know.

[TheManLtDan]

sorry, i cant seem to figure out how to get the CLR browser to hook up with obs. this is making me feel really dumb cuz im normally pretty decent with this kind of stuff

[TheNumbLock]

sorry, i cant seem to figure out how to get the CLR browser to hook up with obs. this is making me feel really dumb cuz im normally pretty decent with this kind of stuff

I recommend closing OBS during all of this.

So just follow the first part of this guide, the Pre-requisites, Install, and Other Required Software: http://deepbot.deep.sg/forums/index.php?topic=2890.msg13484#msg13484

Install both 32-bit and 64-bit plugins of CLR Browser, you can stop reading the guide right before setup, but the guide will also assist on helping you setup the notification as well.

[TheManLtDan]

i feel super retared right now, but i still cant seem to figure out how to get everything to work like how the guide is saying. you should maybe think about a youtube video on how to do this.

[JDM_4EVA]

im trying to get my css to work with a custom font im using with no luck i have everything working but the font

Code: [Select]

body {
    background-color: transparent;
    color: white;
}

#follow-notification {
  display: none;
  position: absolute;
  top: 0px;
  left: 0px;
  width: 580px;
  height: 110px;
  border-radius: 10px;
  background-image: url('http://i.imgur.com/XwX5kMx.png') !important;
  background-repeat: no-repeat;
}
#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: ('Homoarakhn Regular');
  src: url ('C:\Windows\Fonts\Homoarak.ttf');
  text-shadow: 1px 1px 1px #FFFDE8;
  color: red;
  float: right;
  border-bottom: red;
  border-bottom-style: double;
}
can anyone help me get this working?

[Davidccheng]

Can you please create a deepbot donation notification CSS for me?

Donation Alert

Image Link: http://i.imgur.com/evoTyEz.gif
Font Style/Link: Gotham font (the middle font here: http://madebymany.com.s3.amazonaws.com/legacy/uploads/2008/03/gotham.gif)
Font Color: Green
Any text fill/boarder?:
Currency Type: $ (dollars)
Where do you want text located?(Donator Name, Donation Amount, Message) Just place all three text fields to the right of image.
Example (If applicable):
Anything else?:

THANKS SO MUCH!

[TheNumbLock]

Requested by: Davidccheng

Donation:

Link: http://deepbot.tv/notifications/donationnotification2.htm
Width: 1500
Height: 950  (You may need to adjust a little bit bigger if donation messages get too long. But it should fit.)

CSS Code:

Code: [Select]

@font-face {
font-family: "Gotham";
src: url("http://freakfonts.com/download/41930.html");
}

#donor-notification {
width: 1500px !important;
height: 800px !important;
background-color: transparent !important;
background-image:url('http://i.imgur.com/evoTyEz.gif') !important;
background-repeat: no-repeat !important;
background-size: initial !important;
}
 
 
#donor-notification .header {
visibility: hidden !important;
}
 
#donor-notification .streamname {
visibility: hidden !important;
}
 
#donor-notification .message {
position: absolute !important;
margin-top: 750px !important;
margin-left: 250px !important;
width: 1000px !important;
font-size: 40px !important;
font-family: Gotham !important;
font-weight: normal !important;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: green;
-webkit-text-fill-color: green;
}
#donor-notification .amount {
position: absolute !important;
margin-top: 300px !important;
margin-left: 250px !important;
font-size: 70px !important;
font-family: Gotham !important;
font-weight: normal !important;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: green;
-webkit-text-fill-color: green;
}
#donor-notification .donor {
position: absolute !important;
margin-top: 200px !important;
margin-left: 370px !important;
font-size: 70px !important;
font-family: Gotham !important;
font-weight: normal !important;
color: red !important;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: green;
-webkit-text-fill-color: green;
}

Preview: (If there is a black background, it is just my background.)

[Davidccheng]

Thanks so much, but it doesn't work. It just says "experts online donated" etc.  I'm using xsplit, so I used double quotes for the URL links, and still nothing.  Any suggestions?

Thanks!

[Davidccheng]

Also, I think there was a typo in the imgur link. (i.imgur).  I took out the "i." and still nothing.

[TheNumbLock]

Also, I think there was a typo in the imgur link. (i.imgur).  I took out the "i." and still nothing.

Oh it's because xsplit likes " , not '. Let me fix the CSS. And the "i" is suppose to be there.

Edit: Fixed

[Davidccheng]

In regards to "edit: fixed": it's fixed or you're fixing it?  Where do I find the new CSS?  Thanks!!

[TheNumbLock]

In regards to "edit: fixed": it's fixed or you're fixing it?  Where do I find the new CSS?  Thanks!!

Up above, I just edit the post.

[Davidccheng]

Yeah, I figured. Tried it, and still nothing

[Davidccheng]

nm, I added the double quotes in the imgur link, and it worked.  Thanks so much, RepentGamingTV!!!!

[CalToxReaper]

Donation Alert

Image Link: http://s1074.photobucket.com/user/ComputeDrift/media/Teamcaltox-Donation_zpsvk97v4n1.jpg.html
Font Style/Link: Standard Or What looks cool with photo provided
Font Color: Green
Any text fill/boarder?: The photo provided is 580x110 so, or i just dont know what you mean xD
Currency Type: $ usa
Where do you want text located?(Donator Name, Donation Amount, Message) i would like 2 ways to do this just incase i dont like the messges being showed

Example 1:doner name right after Go Team Caltox (size it to fit anyname) then the amount messge below that so it sould look like this
Go team caltox:(username)(amount$)
(Messge:great stream buddy)

Example 2: just amout next to go team caltox then below the user name
Go Team CalTox (Amount$)
         (username centerd)

Anything else?: I would like to have bouth ex done but if you can do ex 1 for now to get me started thats cool i would like ex 2 if spam starts to show up in the messeges get me?