Custom Notification WorkShop

[TheNumbLock]

Requested by: skunkodor

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: 450px !important;
  background-repeat: no-repeat;
  background-position-y: 0px;
  background-image: url(https://media.giphy.com/media/mFmuXkziY2RsQ/giphy.gif) !important;
  background-size: 350px 220px !important;
}
 
#sub-notification .subname {
  margin-left: -60px !important;
  padding-top: 230px !important;
  width: 455px;
  text-align: center;
  line-height: 36px !important;
  font-size: 32px !important;
  font-family: Arial !important;
  font-weight: bold !important;
  text-shadow: none !important;
  text-transform: capitalize !important;
  color: white !important;
  -webkit-text-stroke-color: black;
-webkit-text-stroke-width: 1.5px;
}
 
#sub-notification .subtier {
visibility: hidden !important;
}
 
#sub-notification .submonths {
  position: absolute;
  top: 260px !important;
  margin-left: -60px !important;
  width: 455px;
  text-align: center;
  line-height: 36px !important;
  font-size: 32px !important;
  font-family: Arial !important;
  font-weight: bold !important;
  text-shadow: none !important;
  text-transform: capitalize !important;
  color: white !important;
  -webkit-text-stroke-color: black;
-webkit-text-stroke-width: 1.5px;
}
 
#sub-notification .newsubmsg {
  position: absolute;
  top: 280px;
  margin-left: -60px;
  width: 455px;
  text-align: center;
  line-height: 14px;
  font-size: 32px !important;
  font-family: Arial !important;
  font-weight: bold !important;
  text-shadow: none !important;
  color: white !important;
  -webkit-text-stroke-color: black;
-webkit-text-stroke-width: 1.5px;
}
 
#sub-notification .submonths::after {
  content: ' months!';
}
 
#sub-notification .newsubmsg::after {
  content: 'New Subscriber' !important;
}

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

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

[skunkodor]

Donation Alert

Image Link:http://i.makeagif.com/media/9-03-2016/_548Tn.gif
Font Style/Link:Generic Arial
Font Color:White
Any text fill/boarder?:
Currency Type:Tips $
What do you want the alert to say?(Text Options: Donator Name, Donation Amount):
Example (If applicable): http://deepbot.tv/notifications/donationnotification2.htm for the font similarity
Anything else?:

[TheNumbLock]

Donation Alert

Image Link:http://i.makeagif.com/media/9-03-2016/_548Tn.gif
Font Style/Link:Generic Arial
Font Color:White
Any text fill/boarder?:
Currency Type:Tips $
What do you want the alert to say?(Text Options: Donator Name, Donation Amount):
Example (If applicable): http://deepbot.tv/notifications/donationnotification2.htm for the font similarity
Anything else?:

What do you want on the notification? Like Donor's Name? Amount? Donation Message?

[skunkodor]

I'm sorry I thought I corrected it. I want just the name and amount. I have text to speech set up for the message portion.

[TheNumbLock]

Requested by: skunkodor

Donation:

Link: http://deepbot.tv/notifications/donationnotification2.htm
Width: 600
Height: 500

CSS Code:

Code: [Select]

#donor-notification {
position: absolute;
top: 0px !important;
left: 60px !important;
width: 320px !important;
height: 240px !important;
background-repeat: no-repeat;
background-size: contain !important;
background-image: url('http://i.makeagif.com/media/9-03-2016/_548Tn.gif') !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 {
visibility: hidden !important;
}
#donor-notification .amount {
position: absolute;
margin-top: 260px !important;
margin-left: -350px !important;
width: 500px !important;
text-align: center !important;
font-weight: bold !important;
font-size: 30px !important;
font-family: Arial !important;
color: white !important;
text-transform: capitalize !important;
-webkit-text-stroke-color: black;
-webkit-text-stroke-width: 0px;
text-shadow: none !important;
}
#donor-notification .donor {
position: absolute;
margin-top: 220px !important;
margin-left: -160px !important;
width: 500px !important;
text-align: center !important;
font-weight: bold !important;
font-size: 30px !important;
font-family: Arial !important;
color: white !important;
text-transform: capitalize !important;
-webkit-text-stroke-color: black;
-webkit-text-stroke-width: 0px;
text-shadow: none !important;
}

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

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

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

[skunkodor]

The previous sub alert one made like this is working, but this particular one is not appearing in obs for me. I have deleted and created a new clr input.

[TheNumbLock]

Using OBS Classic or Studio?

Also just noticed I messed up on the post putting the wrong info for the URL. xD

[skunkodor]

The change in url fixed it. Thanks!

[FSHSchmo]

Looking for a notification for follow, donation, host, and gamewisp using the following image, thanks in advance!

http://imgur.com/a/3P9Zo

[TheNumbLock]

Looking for a notification for follow, donation, host, and gamewisp using the following image, thanks in advance!

http://imgur.com/a/3P9Zo

Will work on it when I get back from work. What font do you want me to use? Any specific font color? I take it, you want all the names and things just right of the dice in the image?

[FSHSchmo]

Looking for a notification for follow, donation, host, and gamewisp using the following image, thanks in advance!

http://imgur.com/a/3P9Zo

Will work on it when I get back from work. What font do you want me to use? Any specific font color? I take it, you want all the names and things just right of the dice in the image?

Chiller font, and I leave the color up to you, whichever looks best and yes, to the right of the dice.

[TheNumbLock]

Looking for a notification for follow, donation, host, and gamewisp using the following image, thanks in advance!

http://imgur.com/a/3P9Zo

Will work on it when I get back from work. What font do you want me to use? Any specific font color? I take it, you want all the names and things just right of the dice in the image?

Chiller font, and I leave the color up to you, whichever looks best and yes, to the right of the dice.

Do you have a link to the font?

[hossagno]

Hello, first off I'd like to say to RepentGamingTV that he's an awesome guy for doing this custom css things for people. I'm giving you a heads up i'm gonna try make my own donation and follow image in photoshop, so i would like to know what to take in mind before starting so you have an easier job coding this?

[TheNumbLock]

This is all you really should know. Dimensions do not matter, but it is whatever you want to fit your stream. I can't do animations (at least I am not good at them).

The image definitely needs to be .png if you want to avoid transparent areas going totally white if it was .jpg.

For uploading your images use Imgur.

Follower Alert:

Code: [Select]

Follower Alert

Image Link:
Font Style/Link:
Font Color:
Any text fill/boarder?:
Where do you want text located? (Follower Name):
Example (If applicable):
Anything else?:

Donation Alert: (You do not need to include all 3 text options, Just an FYI.)

Code: [Select]

Donation Alert

Image Link:
Font Style/Link:
Font Color:
Any text fill/boarder?:
Currency Type:
What do you want the alert to say?(Text Options: Donator Name, Donation Amount, Message):
Example (If applicable):
Anything else?:


[hossagno]

Alright, had a busy weekend and will see what I can produce this week may I ask if you are also the guy who scripted some mini-games for the deepbot?