Deep Bot - Twitch Streamer Assistant

Deep Bot => Custom Notifications => Topic started by: Remedeez on April 22, 2015, 03:42:36 AM

Title: CSS Request for Custom Follow, Donation and Sub notifications
Post by: Remedeez on April 22, 2015, 03:42:36 AM

Hello, I have made some graphics I would like to use for my on-screen notifications, but I am not familiar with CSS, and would like some assistance in obtaining the CSS to input to my OBS to use these. :-)

Followers:
IMAGE: http://imgur.com/OTZNsnM.png
Final Example: http://imgur.com/jmJXhpo.png
The font is Comic Sans, colored white with a 5px black outline in Photoshop (using Stroke in blending options)
I'm open minded when it comes to text effects like a wiggle, or the whole graphic fading in/out etc. So feel free to make it magical.

Donations:
IMAGE: http://imgur.com/3GxlRel.png
Final Example: http://imgur.com/7Rjm2Tj.png
The font is Comic Sans, colored white with a 5px black outline in Photoshop (using Stroke in blending options)
I'm open minded when it comes to text effects like a wiggle, or the whole graphic fading in/out etc. So feel free to make it magical.

Subscribers:
IMAGE: http://imgur.com/ZI92Cv6.png
Final Example: http://imgur.com/wd1sQnP.png
The font is Comic Sans, colored white with a 5px black outline in Photoshop (using Stroke in blending options)
I'm open minded when it comes to text effects like a wiggle, or the whole graphic fading in/out etc. So feel free to make it magical.


Lastly, all of the graphics are 510px wide and 250px tall.
I use USD as currency for donations.

If there is any other information I need to provide, I will do so!
Thank you to whoever hops in to help me with this!

Title: Re: CSS Request for Custom Follow, Donation and Sub notifications
Post by: TheNumbLock on April 22, 2015, 08:13:54 AM

Requested by: Remedeez

Follower:

Link: http://deepbot.tv/notifications/follownotification1.htm
Width: 550
Height: 300

CSS Code:

Code: [Select]

#follow-notification {
display: none;
position: absolute;
width: 510px !important;
height: 250px !important;
border-radius: 0px !important;
background-image: url('http://i.imgur.com/OTZNsnM.png') !important;
background-repeat: no-repeat;
}
#follow-notification .followname {
position: absolute !important;
text-align: center !important;
margin-top: 70px !important;
margin-left: 50px !important;
width: 400px !important;
font-size: 60px !important;
font-weight: bold !important;
  color: white !important;
  font-family: Comic Sans MS;
  -webkit-text-stroke-width: 3px;
  -webkit-text-stroke-color: black;
}

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

(http://puu.sh/hmj8a/945ed51567.jpg)


Donation:

Link: http://deepbot.tv/notifications/donationnotification2.htm
Width: 550
Height: 300

CSS Code:

Code: [Select]

#donor-notification {
position: center !important;
width: 510px !important;
height: 250px !important;
background-color: transparent !important;
background-image: url('http://i.imgur.com/3GxlRel.png') !important;
background-size: auto !important;
background-repeat: no-repeat !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 !important;
margin-top: 100px !important;
margin-left: -290px !important;
width: 300px !important;
font-size: 50px !important;
font-weight: bold !important;
  font-family: Comic Sans MS;
-webkit-text-stroke-width: 3px;
  -webkit-text-stroke-color: black;
color: white;
}

#donor-notification .donor {
position: absolute !important;
margin-top: 50px !important;
margin-left: -70px !important;
width: 400px !important;
font-size: 46px !important;
text-transform: uppercase;
font-weight: bold !important;
  font-family: Comic Sans MS;
-webkit-text-stroke-width: 3px;
  -webkit-text-stroke-color: black;
color: white;
}

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

(http://puu.sh/hmjll/e8c3e0edbe.jpg)

Subscriber:

Link: http://deepbot.tv/notifications/subnotification1.htm
Width: 550
Height: 300

CSS Code:

Code: [Select]

#sub-notification {
width: 510px !important;
height: 250px !important;
background-color: transparent !important;
background-image:url('http://i.imgur.com/ZI92Cv6.png') !important;
background-repeat: no-repeat !important;
background-size: initial !important;
}
#sub-notification .subname {
position: absolute !important;
text-align: left !important;
margin-top: -50px !important;
margin-left: 30px !important;
width: 300px !important;
font-size: 50px !important;
text-transform: uppercase;
font-weight: bold !important;
  font-family: Comic Sans MS;
-webkit-text-stroke-width: 3px;
  -webkit-text-stroke-color: black;
color: white !important;
}

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

(http://puu.sh/hmjv0/4e247cbbad.jpg)

Title: Re: CSS Request for Custom Follow, Donation and Sub notifications
Post by: Remedeez on April 22, 2015, 02:42:09 PM

Thank you so much! I can't wait to pop these in OBS!!

Title: Re: CSS Request for Custom Follow, Donation and Sub notifications
Post by: TheNumbLock on April 22, 2015, 03:05:17 PM

Quote from: Remedeez on April 22, 2015, 02:42:09 PM

Thank you so much! I can't wait to pop these in OBS!!

No problem.