i need help creating a follow notification

[helltaker666]

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]

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.

[helltaker666]

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

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]

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

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.)

[helltaker666]

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]

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?

[helltaker666]

http://deepbot.tv/notifications/follownotification1.htm?dur=10000

[TheNumbLock]

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;
}


[helltaker666]

that is just giving me the xbox controler loading with the name of the follower :/

[TheNumbLock]

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

[helltaker666]

wow, that worked.... but arnt they the same link?

Try this URL: http://deepbot.tv/notifications/follownotification1.htm?dur=10000

http://deepbot.tv/notifications/follownotification1.htm?dur=10000

either way its working purrrrrfect, many thanks