Costum Follower and Donation Notification

[Flaunty17]

Follower one: http://38.media.tumblr.com/8600f64ff30d42e1df9989273d43cdd6/tumblr_mwekviYiEG1rqsb0so1_250.gif

Donation one: http://orig13.deviantart.net/31c4/f/2011/285/3/0/fox_walk_cycle_by_theartistgal-d4co8tl.gif

If your missing anything or anything is wrong let me know!

Thank for all the effort and time you put in it! On a side note! No clue how to add it in CSS. Can you post a link to that as well?

[TheNumbLock]

When you add a CLR Browser to OBS as a source, you notice in the box that pops up where you put the link and dimensions, there is a CSS Tab in the top left. You will remove everything in that CSS tab, then post the CSS from here in to there.

If you want anything changed/added/edited, let me know.

Requested by: Flaunty17

Follower:

Link: http://deepbot.tv/notifications/follownotification1.htm?dur=10000
Width: 600
Height: 200

CSS Code:

Code: [Select]

body {
background-color: transparent;
color: white;
}

#follow-notification {
display: none;
position: absolute !important;
top: 0px !important;
left: 200px !important;
width: 212px !important;
height: 137px !important;
background-image: url(http://38.media.tumblr.com/8600f64ff30d42e1df9989273d43cdd6/tumblr_mwekviYiEG1rqsb0so1_250.gif) !important;
background-repeat: no-repeat !important;
background-size: cover !important;
}

#follow-notification .followname {
  margin-left: -140px !important;
  margin-top: 150px !important;
  width: 455px;
  text-align: center;
  line-height: 36px !important;
  font-size: 32px !important;
  font-family: Impact !important;
  font-weight: normal !important;
  text-shadow: 2px 2px 1px #000 !important;
  text-transform: capitalize !important;
  color: white !important;
  -webkit-text-stroke-color: black;
-webkit-text-stroke-width: 0px;
}

#follow-notification .header {
display: none !important;
}

#follow-notification .followname:after {
content: ' has just followed!' !important;
}

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



Donation:

Link: http://deepbot.tv/notifications/donationnotification2.htm?dur=10000
Width: 500
Height: 400

CSS Code:

Code: [Select]

body {
    background-color: transparent;
    color: white;
}
sup {
    top: -0.5em;
}
sub {
    bottom: -0.25em;
}

#donor-notification {
position: absolute;
top: 0px !important;
left: 50px !important;
width: 400px !important;
height: 300px !important;
background-repeat: no-repeat;
background-size: contain !important;
background-image: url(http://orig13.deviantart.net/31c4/f/2011/285/3/0/fox_walk_cycle_by_theartistgal-d4co8tl.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: normal !important;
font-size: 30px !important;
font-family: Impact !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: normal !important;
font-size: 30px !important;
font-family: Impact !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.)