Author Topic: Custom follower overlay  (Read 3303 times)

0 Members and 1 Guest are viewing this topic.

noah123103

  • Youngling
  • *
  • Posts: 4
  • Karma: +0/-0
    • View Profile
  • Twitch Name: streamerbrothers
Custom follower overlay
« 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!

ExpertsOnline

  • Creator
  • Councilor
  • *****
  • Posts: 2656
  • Karma: +289/-24
    • View Profile
  • Twitch Name: expertsonline
Re: Custom follower overlay
« Reply #1 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:

noah123103

  • Youngling
  • *
  • Posts: 4
  • Karma: +0/-0
    • View Profile
  • Twitch Name: streamerbrothers
Re: Custom follower overlay
« Reply #2 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;
}

ExpertsOnline

  • Creator
  • Councilor
  • *****
  • Posts: 2656
  • Karma: +289/-24
    • View Profile
  • Twitch Name: expertsonline
Re: Custom follower overlay
« Reply #3 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.

noah123103

  • Youngling
  • *
  • Posts: 4
  • Karma: +0/-0
    • View Profile
  • Twitch Name: streamerbrothers
Re: Custom follower overlay
« Reply #4 on: December 25, 2014, 10:19:39 AM »
Thank you ;D sorry to make you do this so close to holidays!