Author Topic: i need help creating a follow notification  (Read 2677 times)

0 Members and 1 Guest are viewing this topic.

helltaker666

  • Youngling
  • *
  • Posts: 10
  • Karma: +0/-0
    • View Profile
  • Twitch Name: twitch.tv/helltaker666
i need help creating a follow notification
« on: April 04, 2017, 06:05:35 PM »
ok so im currently using http://i.imgur.com/A9waiZn.png as my follow notification and would like to add https://gyazo.com/6d11f497ddfe2157c0cd57425599b2f7 to it either to the left or right of it, can anyone help make this happen?

m4ntis87

  • Youngling
  • *
  • Posts: 4
  • Karma: +0/-0
    • View Profile
  • Twitch Name: m4ntis87
Re: i need help creating a follow notification
« Reply #1 on: April 06, 2017, 10:54:28 AM »
I had a few minutes to spare, so I ran them both through photoshop and created this. The quality on the follow notification is lower due to becoming a gif, it's limited to 256 colors.

http://imgur.com/a/ce5BQ

--

Edit: My method for the additional transparent space to the right is to center the original follow notification, this is how I got around using the text with sites like streamlabs, opposed to custom CSS. The extra unused space could be removed if you were to use custom css.
« Last Edit: April 06, 2017, 11:00:12 AM by m4ntis87 »

helltaker666

  • Youngling
  • *
  • Posts: 10
  • Karma: +0/-0
    • View Profile
  • Twitch Name: twitch.tv/helltaker666
Re: i need help creating a follow notification
« Reply #2 on: April 07, 2017, 10:29:49 AM »
ok well ima noob when it comes to css, i can move things like the txt around but it seems just replacing the old img link with that 1 doesnt work :P

Here is my current css

body {
  background-color: rgba(0, 0, 0, 0);
  margin: 0px auto;
  overflow: hidden;
}
#follow-notification {
   display: none;
   position: absolute;
   top: 0px;
   left: 0px;
   width: 600px !important;
   height: 145px !important;
   border-radius: 10px;
   background-image: url('http://i.imgur.com/A9waiZn.png') !important;
   background-repeat: no-repeat;
}
#follow-notification .followname {
   margin-top: 35px !important;
   margin-left: 0px !important;
   text-align: center !important;
   width: 600px !important;
   font-size: 38px !important;
   font-weight: bold !important;
   font-family: Verdana !important;
   color: #FF0000 !important;
   -webkit-text-stroke: 1px;
   -webkit-text-stroke-color: #000
}

Edit: but yes that is what i want with the trans background, thanks :)

TheNumbLock

  • Advisor
  • Councilor
  • **
  • Posts: 4776
  • Karma: +137/-5
    • View Profile
  • Twitch Name: TheNumbLock
Re: i need help creating a follow notification
« Reply #3 on: April 07, 2017, 09:29:14 PM »
ok well ima noob when it comes to css, i can move things like the txt around but it seems just replacing the old img link with that 1 doesnt work :P

Here is my current css

body {
  background-color: rgba(0, 0, 0, 0);
  margin: 0px auto;
  overflow: hidden;
}
#follow-notification {
   display: none;
   position: absolute;
   top: 0px;
   left: 0px;
   width: 600px !important;
   height: 145px !important;
   border-radius: 10px;
   background-image: url('http://i.imgur.com/A9waiZn.png') !important;
   background-repeat: no-repeat;
}
#follow-notification .followname {
   margin-top: 35px !important;
   margin-left: 0px !important;
   text-align: center !important;
   width: 600px !important;
   font-size: 38px !important;
   font-weight: bold !important;
   font-family: Verdana !important;
   color: #FF0000 !important;
   -webkit-text-stroke: 1px;
   -webkit-text-stroke-color: #000
}

Edit: but yes that is what i want with the trans background, thanks :)

You have to use the direct image link: http://i.imgur.com/2vuUvLA.mp4 (May have to adjust width and height right above it in the CSS if it looks off. Usually you just change the dimensions to what the image is itself. Then may need to adjust the dimensions on the General Tab of the CLR Browser.)
Old Name: RepentGamingTV
Twitch: Here

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

helltaker666

  • Youngling
  • *
  • Posts: 10
  • Karma: +0/-0
    • View Profile
  • Twitch Name: twitch.tv/helltaker666
Re: i need help creating a follow notification
« Reply #4 on: April 08, 2017, 04:22:44 AM »
tried just changing the link and im getting no image show up atall :( so i dont know what needs changing to get the image to show

TheNumbLock

  • Advisor
  • Councilor
  • **
  • Posts: 4776
  • Karma: +137/-5
    • View Profile
  • Twitch Name: TheNumbLock
Re: i need help creating a follow notification
« Reply #5 on: April 08, 2017, 04:26:09 AM »
tried just changing the link and im getting no image show up atall :( so i dont know what needs changing to get the image to show

I will test it when I get home. But what URL are you using for the follower notification itself?
Old Name: RepentGamingTV
Twitch: Here

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

helltaker666

  • Youngling
  • *
  • Posts: 10
  • Karma: +0/-0
    • View Profile
  • Twitch Name: twitch.tv/helltaker666

TheNumbLock

  • Advisor
  • Councilor
  • **
  • Posts: 4776
  • Karma: +137/-5
    • View Profile
  • Twitch Name: TheNumbLock
Re: i need help creating a follow notification
« Reply #7 on: April 08, 2017, 09:54:58 PM »
http://deepbot.tv/notifications/follownotification1.htm?dur=10000

Try this CSS:

Code: [Select]
#follow-notification {
display: none;
position: absolute;
top: 0px !important;
left: 0px !important;
width: 1149px !important;
height: 212px !important;
border-radius: 00px !important;
background-size: contain !important;
background-image: url(http://i.imgur.com/2vuUvLA.gif) !important;
background-repeat: no-repeat;
}

#follow-notification .header {
visibility: hidden !important;
}

#follow-notification .followname {
position: absolute !important;
text-align: center !important;
margin-top: 80px !important;
margin-left: 450px !important;
width: 300px !important;
font-size: 38px !important;
font-weight: bold !important;
font-family: Verdana !important;
color: #FF0000 !important;
text-transform: capitalize;
-webkit-text-stroke-color: #000;
-webkit-text-stroke-width: 1px;
}

.followname:before {
content: '' !important;
}

.followname:after {
content: '' !important;
}
Old Name: RepentGamingTV
Twitch: Here

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

helltaker666

  • Youngling
  • *
  • Posts: 10
  • Karma: +0/-0
    • View Profile
  • Twitch Name: twitch.tv/helltaker666
Re: i need help creating a follow notification
« Reply #8 on: April 09, 2017, 01:05:17 AM »
that is just giving me the xbox controler loading with the name of the follower :/

TheNumbLock

  • Advisor
  • Councilor
  • **
  • Posts: 4776
  • Karma: +137/-5
    • View Profile
  • Twitch Name: TheNumbLock
Re: i need help creating a follow notification
« Reply #9 on: April 09, 2017, 10:12:30 AM »
that is just giving me the xbox controler loading with the name of the follower :/

o.o What streaming software are you using?

Try this URL: http://deepbot.tv/notifications/follownotification1.htm?dur=10000
Old Name: RepentGamingTV
Twitch: Here

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

helltaker666

  • Youngling
  • *
  • Posts: 10
  • Karma: +0/-0
    • View Profile
  • Twitch Name: twitch.tv/helltaker666