Custom Notification WorkShop

[tarantism]

GameWisp Sub Alert

Image Link: http://i.imgur.com/tQE0nK5.png
Font Style/Link:  Open Sans, 22px
Font Color: #c6b817
Any text fill/boarder?: No
What do you want the alert to say?(Text Options: Sub Name, Sub months, New Sub, Sub Tier): Sub Name - TwitchUserName     Sub Months - TwitchUserName for NumberOfMonths months!
Example (If applicable): https://gyazo.com/6910c5762843080c49454e8c02670193   https://gyazo.com/b0f180e6fb29ac60d1ea9fe76cd86c7f
Anything else?: No

[TheNumbLock]

Requested by: tarantism

GameWisp Sub:

Link: http://deepbot.tv/notifications/gwnotification.htm
Width: 800
Height: 90

CSS Code:

Code: [Select]

body {
  background-color: transparent;
  color: black;
}
 
#sub-notification {
  display: none;
  position: absolute;
  top: 0px;
  left: 0px !important;
  width: 762px !important;
  height: 62px !important;
  background-repeat: no-repeat;
  background-position-y: 0px;
  background-image: url(http://i.imgur.com/tQE0nK5.png) !important;
}
 
#sub-notification .subname {
  margin-left: 180px !important;
  padding-top: 2px !important;
  width: 455px;
  text-align: center;
  line-height: 36px !important;
  font-size: 22px !important;
  font-family: 'Open Sans', sans-serif !important;
  font-weight: normal !important;
  text-shadow: none !important;
  text-transform: capitalize !important;
  color: #c6b817 !important;
}
 
#sub-notification .subtier {
visibility: hidden !important;
}
 
#sub-notification .submonths {
  position: absolute;
  top: 25px !important;
  margin-left: 180px !important;
  width: 455px;
  text-align: center;
  line-height: 36px !important;
  font-size: 22px !important;
  font-family: 'Open Sans', sans-serif !important;
  font-weight: normal !important;
  text-shadow: none !important;
  text-transform: capitalize !important;
  color: #c6b817 !important;
}
 
#sub-notification .newsubmsg {
visibility: hidden !important;
}
 
#sub-notification .submonths::after {
  content: ' months!';
  color: white !important;
}
 
#sub-notification .newsubmsg::after {
  content: '' !important;
}

#sub-notification .submonths::before{
  content: ' for ';
  color: white !important;
}
 
#sub-notification .subamount {
visibility: hidden !important;
}

Preview: (If there is a black background, it is just my background.)

[tarantism]

What if a user has a really long username, when testing it overlapped over the "For X Months" part. Also is there no way to get the user's name perfectly center?

[TheNumbLock]

I can make the name centered for both subs/resubs. But for resubs, Idk where to put the for x months! I can throw it far right, but yeah.

[tarantism]

what about underneath?

[TheNumbLock]

Like underneath the name? Or underneath the image?

[tarantism]

Underneath the name, both of the text centered.

[TheNumbLock]

Underneath the name, both of the text centered.

Updated post with the CSS Code/Image: http://deepbot.deep.sg/forums/index.php?topic=2704.msg36292#msg36292

[tarantism]

I guess there would be no way to apply a completely different style for when someone subscribes and when someone resubs?

What I mean is it looks like the way it's setup is you have a style set up for when the sub, but when the resub you just sort of "append" a new style onto what you already have rather then having a new style altogether.

Does this sound right, or does it not make sense at all lol?

[TheNumbLock]

What happens is it just "adds for x months!" for resubs. So it just gets everything for a sub, and for a resub, it just adds the words. :/

[tarantism]

Oh. Well what you did so far was awesome. The only thing I'm looking for at this point is for the style of the .subname to change from when to subscribe compared to when the resub

[dommiers]

GameWisp Sub Alert

Image Link: http://imgur.com/a/XbrHT
Font Style/Link: RuneScape UF (Link: http://www.dafont.com/runescape-uf.font )
Font Color: Yellow
Any text fill/boarder?:
What do you want the alert to say?(Text Options: Sub Name, Sub months, New Sub, Sub Tier):
Example (If applicable): "user Has just subscribed!" or "user Has just subscribed for x months!"
Anything else?: Text underneath pic, solid colour background so i can colour key it, thanks!


Follower alert

Image Link: http://imgur.com/a/XbrHT
Font Style/Link:  RuneScape UF (Link: http://www.dafont.com/runescape-uf.font )
Font Color: Yellow
Any text fill/boarder?:
What do you want the alert to say?(Text Options: Sub Name, Sub months, New Sub, Sub Tier):
Example (If applicable): "user followed!"
Anything else?: Text underneath pic, solid colour background so i can colour key it, thanks!


Donation Alert

Image Link: http://imgur.com/a/XbrHT
Font Style/Link:  RuneScape UF (Link: http://www.dafont.com/runescape-uf.font )
Font Color: Yellow
Any text fill/boarder?:
What do you want the alert to say?(Text Options: Sub Name, Sub months, New Sub, Sub Tier):
Example (If applicable): "user donated X! (Donation message)"
Anything else?: Text underneath pic, solid colour background so i can colour key it, thanks!
Modify message

[TheRealAlixe]

Dommiers   Here is the follower CSS

Code: [Select]

body {
                background-color: transparent ;
                font-family: 'RuneScape UF' ;
                font-weight: bold ;
                color: yellow ;
            }

            #follow-notification {
                display: none ;
                position: absolute ;
                top: 0px ;
                left: 0px ;
                width: 500px ;
                height: 500px ;
                border-radius: 10px ;
            }
            #follow-notification .image {
                background-image: url("http://i.imgur.com/bdKhASI.jpg") ;
                background-size: 250px 150px ;
                background-repeat: no-repeat ;
                background-position: center ;
                width: 500px ;
                height: 150px ;
            }
            #follow-notification .followname {
                text-align: center ;
            }

            #follow-notification .header {
                text-align: center ;
            }

[TheNumbLock]

Requested by:  dommiers

Donation:

Link: http://deepbot.tv/notifications/donationnotification2.htm
Width: 650
Height: 400

CSS Code:

Code: [Select]

#donor-notification {
position: absolute;
top: 0px !important;
left: 150px !important;
width: 500px !important;
height: 150px !important;
background-repeat: no-repeat;
background-size: contain !important;
background-image: url('http://i.imgur.com/bdKhASI.jpg') !important;
overflow: ahidden !important;
}
#donor-notification .header {
visibility: hidden !important;
}
 
#donor-notification .date {
visibility: hidden !important;
}
 
#donor-notification .streamname {
visibility: hidden !important;
}
 
#donor-notification .message {
position: absolute;
margin-top: 210px !important;
margin-left: -130px !important;
width: 500px !important;
text-align: center !important;
font-weight: bold !important;
font-size: 32px !important;
font-family: Runescape UF !important;
color: yellow !important;
text-transform: capitalize;
-webkit-text-stroke-color: black;
-webkit-text-stroke-width: 0px;
text-shadow: none !important;
}
#donor-notification .amount {
position: absolute;
margin-top: 150px !important;
margin-left: -420px !important;
width: 400px !important;
padding-top: 0px !important;
text-align: center !important;
font-weight: bold !important;
font-size: 32px !important;
font-family: Runescape UF !important;
color: yellow !important;
text-transform: capitalize;
-webkit-text-stroke-color: yellow;
-webkit-text-stroke-width: 0px;
text-shadow: none !important;
}
#donor-notification .donor {
position: absolute;
margin-top: 120px !important;
margin-left: -280px !important;
width: 500px !important;
text-align: center !important;
font-weight: bold !important;
font-size: 32px !important;
font-family: Runescape UF !important;
color: yellow !important;
text-transform: capitalize;
-webkit-text-stroke-color: black;
-webkit-text-stroke-width: 0px;
text-shadow: none !important;
}

.donor:before {
content: '';
}
 
.donor:after {
content: ' donated ';
}

.amount:after{
content: '!';
}
#donor-notification .messagebox {
    width: 100%;
    text-align: center;
}

Preview: (If there is a black background, it is just my background.)




GameWisp Sub:

Link: http://deepbot.tv/notifications/gwnotification.htm
Width: 650
Height: 400

CSS Code:

Code: [Select]

::-webkit-scrollbar {
    visibility: hidden;
}

body {
  background-color: transparent;
  color: black;
}
 
#sub-notification {
  display: none;
  position: absolute;
  top: 0px;
  left: 150px !important;
  width: 500px !important;
  height: 150px !important;
  background-repeat: no-repeat;
  background-position-y: 0px;
  background-image: url(http://i.imgur.com/bdKhASI.jpg) !important;
  background-size: 250px 150px !important;
}
 
#sub-notification .subname {
  margin-left: -90px !important;
  padding-top: 160px !important;
  width: 455px;
  text-align: center;
  line-height: 36px !important;
  font-size: 32px !important;
  font-family: Runescape UF !important;
  font-weight: bold !important;
  text-shadow: none !important;
  text-transform: capitalize !important;
  color: yellow !important;
}
 
#sub-notification .subtier {
visibility: hidden !important;
}
 
#sub-notification .submonths {
  position: absolute;
  top: 190px !important;
  margin-left: -90px !important;
  width: 455px;
  text-align: center;
  line-height: 36px !important;
  font-size: 32px !important;
  font-family: Runescape UF !important;
  font-weight: bold !important;
  text-shadow: none !important;
  text-transform: capitalize !important;
  color: yellow !important;
}
 
#sub-notification .newsubmsg {
  position: absolute;
  top: 210px;
  margin-left: -90px;
  width: 455px;
  text-align: center;
  line-height: 14px;
  font-size: 32px !important;
  font-family: Runescape UF !important;
  font-weight: bold !important;
  text-shadow: none !important;
  color: yellow !important;
}
 
#sub-notification .submonths::after {
  content: ' months!';
}
 
#sub-notification .newsubmsg::after {
  content: ' has just subscribed!' !important;
}

#sub-notification .submonths::before{
  content: ' has just subscribed for ';
}
 
#sub-notification .subamount {
visibility: hidden !important;
}

Preview: (If there is a black background, it is just my background.)

[skunkodor]

GameWisp Sub Alert

Image Link: https://media.giphy.com/media/mFmuXkziY2RsQ/giphy.gif
Font Style/Link:arial styling
Font Color:white
Any text fill/boarder?:black border
What do you want the alert to say?(Text Options: Sub Name, Sub months, New Sub, Sub Tier): Sub name and months/new sub
Example (If applicable):
Anything else?: