Re: Custom Donation & Sub Graphics

[Bigdaddyden]

Twitch sub=http://i.imgur.com/xaOYHZ5.png

name middle

Donation= http://imgur.com/mIHGH1H

name top middle

donation amount bottom middle

tymv xxx

[TheNumbLock]

Requested by: Bigdaddyden

Donation:

Link: http://deepbot.tv/notifications/donationnotification2.htm?ccy=£
Width: 600
Height: 150

CSS Code:

Code: [Select]

#donor-notification {
position: absolute;
top: 150px !important;
width: 580px !important;
height: 134px !important;
background-repeat: no-repeat;
background-size: contain !important;
background-image: url('http://i.imgur.com/mIHGH1H.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: 110px !important;
margin-left: -260px !important;
width: 300px !important;
padding-top: 0px !important;
text-align: center !important;
font-weight: bold !important;
font-size: 40px !important;
font-family: Arial bold !important;
color: white !important;
text-transform: capitalize;
-webkit-text-stroke-color: black;
-webkit-text-stroke-width: 0.3px;
text-shadow: 3px !important;
}
#donor-notification .donor {
position: absolute;
margin-top: -100px !important;
margin-left: -150px !important;
width: 500px !important;
text-align: center !important;
font-weight: bold !important;
font-size: 40px !important;
font-family: Arial Bold !important;
color: white !important;
text-transform: capitalize;
-webkit-text-stroke-color: black;
-webkit-text-stroke-width: 0.3px;
text-shadow: 3px !important;
}

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





Subscriber:

Link: http://deepbot.tv/notifications/subnotification3.htm
Width: 850
Height: 250

CSS Code:

Code: [Select]

body {
    background-color: transparent;
    color: white;
}
#sub-notification {
  display: none;
  position: absolute;
  top: 0px;
  left: 0px;
  width: 760px !important;
  height: 200px !important;
  background-repeat: no-repeat;
  background-image: url('http://i.imgur.com/xaOYHZ5.png') !important;
  background-position-y: 0px;
}
#resub-notification {
  display: none;
  position: absolute;
  top: 0px;
  left: 80px !important;
  width: 760px !important;
  height: 200px !important;
  background-repeat: no-repeat;
  background-image: url('http://i.imgur.com/xaOYHZ5.png') !important;
  background-position-y: 0px;;
}
.subname {
margin-left: 170px !important;
  margin-top: 90px !important;
  padding-top: 0px !important;
  width: 400px !important;
  text-align: center !important;
  line-height: 25px !important;
  font-size: 60px !important;
  font-weight: bold !important;
  font-family: Impact !important;
  color: Yellow !important;
  -webkit-text-stroke: 2px;
  -webkit-text-stroke-color: black;
}

.months {
visibility: hidden !important;
}

.months:after {
visibility: hidden !important;
}

.badge {
visibility: hidden !important;
}

@-webkit-keyframes rot {
    from {
        -webkit-transform: rotate(0deg) translate(-30px) rotate(0deg);
    }
    to {
        -webkit-transform: rotate(360deg) translate(-30px) rotate(-360deg);
    }
}

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