Author Topic: custom follow notification overlay?  (Read 7145 times)

0 Members and 1 Guest are viewing this topic.

ERGaming

  • Padawan
  • **
  • Posts: 52
  • Karma: +0/-0
    • View Profile
  • Twitch Name: EpicResetGaming
custom follow notification overlay?
« on: August 15, 2014, 03:57:39 AM »
I pride myself in the uniqueness of my channel... I currently run custom overlays for when donations or follows are recieved using subalert.

I noticed there are only 2 follow notifications and 1 donation notification link for the overlay. Is there anyway to upload a custom image/animation and sound?

I would love to transition more towards deepbot having my all in one solution.

Also I currently grab information from my subalert for my overlay via txtfiles like

latest/top follower
latest/top donator
latest sub
etc...

i thought i read that these txt files will be coming in the next release... is that still planned?

Dante557

  • Advisor
  • Councilor
  • **
  • Posts: 555
  • Karma: +26/-0
  • Sometimes Helpful, Sometimes Not :D
    • View Profile
    • My Twitch Page
  • Twitch Name: Dante557
Re: custom follow notification overlay?
« Reply #1 on: August 15, 2014, 04:27:22 AM »
Deepbot delivers all notifications via the CLR Browser which uses HTML and CSS. As such you would need to intercept the CSS template and then apply your own to include your own custom graphics. As with all CSS, this is pretty trial and error to make sure that the text and the image are aligned properly.

You can find more information in this forum http://deepbot.deep.sg/forums/index.php?board=13.0

Thanks,
Dante557
If you need to get through to me you can try to contact me on Twitter @ http://www.twitter.com/dante556

ERGaming

  • Padawan
  • **
  • Posts: 52
  • Karma: +0/-0
    • View Profile
  • Twitch Name: EpicResetGaming
Re: custom follow notification overlay?
« Reply #2 on: August 15, 2014, 05:18:07 AM »
Deepbot delivers all notifications via the CLR Browser which uses HTML and CSS. As such you would need to intercept the CSS template and then apply your own to include your own custom graphics. As with all CSS, this is pretty trial and error to make sure that the text and the image are aligned properly.

You can find more information in this forum http://deepbot.deep.sg/forums/index.php?board=13.0

Thanks,
Dante557

so i just edit the css in the obs source? i check the css file within the obs clr browser plugin, but it's default. I don't know how to access the link for the actual overlay css
« Last Edit: August 15, 2014, 05:33:18 AM by ERGaming »

IanChandler1990

  • Padawan
  • **
  • Posts: 84
  • Karma: +0/-0
    • View Profile
    • Twitch
  • Twitch Name: Ianchandler1990
Re: custom follow notification overlay?
« Reply #3 on: August 15, 2014, 07:21:42 AM »
Here are too links that can help. http://deepbot.deep.sg/wiki/OBS+CLR+Browser&structure=Index&page_ref_id=11

And one Dante post just read this posts http://deepbot.deep.sg/forums/index.php?board=13.0
Sent from my Nokia Lumia 920 using Tapatalk

ERGaming

  • Padawan
  • **
  • Posts: 52
  • Karma: +0/-0
    • View Profile
  • Twitch Name: EpicResetGaming
Re: custom follow notification overlay?
« Reply #4 on: August 15, 2014, 08:22:49 AM »
Here are too links that can help. http://deepbot.deep.sg/wiki/OBS+CLR+Browser&structure=Index&page_ref_id=11

And one Dante post just read this posts http://deepbot.deep.sg/forums/index.php?board=13.0
Sent from my Nokia Lumia 920 using Tapatalk

the problem is no that i can't get the overlay to work... my issue is that editing the style sheet does NOT replace the image that loads during the follow notification overlay.

I just took the custom css and looked at the code for the follow notification and there is no images loaded within the css code... I'm assuming that it is located in the htm file itself.

Or am i just reading the css code wrong

EDIT... just confirmed that even with a blank css sheet in the obs clr plugin and it still loads the overlay image found in the htm file... any way to edit the actual code that loads the image?

IanChandler1990

  • Padawan
  • **
  • Posts: 84
  • Karma: +0/-0
    • View Profile
    • Twitch
  • Twitch Name: Ianchandler1990
Re: custom follow notification overlay?
« Reply #5 on: August 15, 2014, 06:10:42 PM »
If you try this css you can see the background image this what you want to change. If need more help I can talk on skype.
Sent from my Nokia Lumia 920 using Tapatalk

IanChandler1990

  • Padawan
  • **
  • Posts: 84
  • Karma: +0/-0
    • View Profile
    • Twitch
  • Twitch Name: Ianchandler1990
Re: custom follow notification overlay?
« Reply #6 on: August 15, 2014, 06:10:54 PM »
#follow-notification {
display: none;
position: absolute;
top: 0px;
left: 0px;
width: 580px !important;
height: 110px !important;
border-radius: 10px;
background-image: url('http://i.imgur.com/7OvSYo4.png') !important;
background-repeat: no-repeat;
}
#follow-notification .followname {
margin-top: 15px !important;
margin-left: 80px !important;
text-align: center !important;
width: 480px !important;
font-size: 42px !important;
font-weight: bold !important;
font-family: Algerian !important;
color: #FFFFFF !important;
-webkit-text-stroke: 0.8px;
-webkit-text-stroke-color: #8a0823;
}
Sent from my Nokia Lumia 920 using Tapatalk

ERGaming

  • Padawan
  • **
  • Posts: 52
  • Karma: +0/-0
    • View Profile
  • Twitch Name: EpicResetGaming
Re: custom follow notification overlay?
« Reply #7 on: August 16, 2014, 09:34:20 AM »
If you try this css you can see the background image this what you want to change. If need more help I can talk on skype.
Sent from my Nokia Lumia 920 using Tapatalk

dude you are sooo awesome! I'm going to try and code this in tonight. :) Thanks for all your help man... I'll let you know when i get this working :)

IanChandler1990

  • Padawan
  • **
  • Posts: 84
  • Karma: +0/-0
    • View Profile
    • Twitch
  • Twitch Name: Ianchandler1990
Re: custom follow notification overlay?
« Reply #8 on: August 16, 2014, 06:39:44 PM »
You will have to change things like width night and the padding to make the text fit.
Sent from my Nokia Lumia 920 using Tapatalk