Deep Bot - Twitch Streamer Assistant

Deep Bot => Custom Notifications => Topic started by: noah123103 on December 24, 2014, 05:14:31 AM

Title: Custom follower overlay
Post by: noah123103 on December 24, 2014, 05:14:31 AM

So i made a follower overlay i want to be used for when someone follows but have no idea what to do with it. I was told you amazing people could help out!

http://i.imgur.com/dTmI6jr.png

That is the png i would like to use. Thank you for helping me!

Title: Re: Custom follower overlay
Post by: ExpertsOnline on December 25, 2014, 02:43:11 AM

Follow
Link : http://deepbot.tv/notifications/follownotification1.htm
Width: 1850
Height: 660

CSS Code:

Code: [Select]

#follow-notification {
display: none;
position: absolute;
top: 0px;
left: 0px;
width: 1850px !important;
height: 660px !important;
border-radius: 0px!important;
background-image: url('http://i.imgur.com/dTmI6jr.png') !important;
background-repeat: no-repeat;
}
#follow-notification .followname {
margin-top: 260px !important;
margin-left: 000px !important;
text-align: center !important;
width: 1850px !important;
font-size: 158px !important;
font-family: Corbel !important;
font-weight: bold !important;
color: #FFF !important;
-webkit-text-stroke-width: 7.0px;
-webkit-text-stroke-color: #000;
text-shadow:3px 3px 15px #000;
     
}
#follow-notification .header {
visibility: hidden !important;
}

Preview:
(http://puu.sh/dI0cf/35b114a4c1.jpg)

Title: Re: Custom follower overlay
Post by: noah123103 on December 25, 2014, 09:56:21 AM

I made the image smaller and tried to mess with the code to see if i could do it my self but failed, the text is a little off. What did i do wrong?

Quote

#follow-notification {
   display: none;
   position: absolute;
   top: 0px;
   left: 0px;
   width: 600px !important;
   height: 220px !important;
   border-radius: 0px!important;
   background-image: url('http://i.imgur.com/nptvq2W.png') !important;
   background-repeat: no-repeat;
}
#follow-notification .followname {
   margin-top: 25px !important;
   margin-left: 000px !important;
   text-align: center !important;
   width: 420px !important;
   font-size: 52px !important;
   font-family: Corbel !important;
   font-weight: bold !important;
   color: #FFF !important;
   -webkit-text-stroke-width: 2.0px;
   -webkit-text-stroke-color: #000;
   text-shadow:3px 3px 5px #000;
     
}
#follow-notification .header {      
   visibility: hidden !important;
}

Title: Re: Custom follower overlay
Post by: ExpertsOnline on December 25, 2014, 10:04:06 AM

Under : "#follow-notification .followname {"

You need to make sure the width is the same as the image if you want it centered.

Title: Re: Custom follower overlay
Post by: noah123103 on December 25, 2014, 10:19:39 AM

Thank you ;D sorry to make you do this so close to holidays!