Custom Follow, Donations, Sub

[iced00d]

So after trying to do my own artwork and failing, I realized I need help .  My theme is from the Anime 11eyes and can be found on my Twitch channel ( http://www.twitch.tv/iced00d ).  Attached are some of the artwork that I tried using.  I like the 'folder' style the artists used so I'd like to keep that if possible.  Thanks..

[TheNumbLock]

So you want the folders to each be made into follower/donation/sub alerts?

[iced00d]

Sure if you think that would look good

[TheNumbLock]

So if you want to change the image for each notification, just upload the images to imgur, then copy and paste the Direct Link into the background image part of the CSS (between the '):

Code: [Select]

background-image: url('http://i.imgur.com/lpBnEIV.png') !important;

If you want to adjust the font color, then you will edit this line. (You can use HTML color codes):

Code: [Select]

-webkit-text-fill-color: #9c002b;

And to adjust the white stroke along the text, then:

Code: [Select]

-webkit-text-stroke-width: 0.28px;

Requested by: iced00d

Follower:

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

CSS Code:

Code: [Select]

#follow-notification {
display: none;
position: absolute;
top: 0px !important;
width: 512px !important;
height: 512px !important;
border-radius: 00px !important;
background-image: url('http://i.imgur.com/lpBnEIV.png') !important;
background-repeat: no-repeat;
}
#follow-notification .followname {
position: absolute !important;
text-align: center !important;
margin-top: 145px !important;
margin-left: 180px !important;
width: 150px !important;
font-size: 50px !important;
font-weight: bold !important;
font-family: Germanica !important;
color: #ffffff !important;
text-transform: capitalize;
-webkit-text-fill-color: #9c002b;
-webkit-text-stroke-color: white;
-webkit-text-stroke-width: 0.28px;
text-shadow: 1px !important;
}

.followname:before {
content: 'New follower ' !important;
position: absolute !important;
text-align: center !important;
margin-top: -90px !important;
margin-left: 90px !important;
width: 250px !important;
font-size: 40px !important;
font-weight: bold !important;
font-family: Germanica !important;
color: #ffffff !important;
text-transform: capitalize;
-webkit-text-fill-color: #9c002b;
-webkit-text-stroke-color: white;
-webkit-text-stroke-width: 0.28px;
text-shadow: 1px !important;
}

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




Donation:

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

CSS Code:

Code: [Select]

#donor-notification {
position: absolute;
left: 0px !important;
width: 512px !important;
height: 512px !important;
background-repeat: no-repeat;
background-size: contain !important;
background-image: url('http://i.imgur.com/7nIvkIb.png') !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: 250px !important;
margin-left: 0px !important;
width: 500px !important;
padding-top: 0px !important;
text-align: center !important;
font-weight: bold !important;
line-height: 90% !important;
font-size: 30px !important;
font-family: Germanica !important;
color: #37b2e5 !important;
text-transform: capitalize;
-webkit-text-fill-color: blue;
-webkit-text-stroke-color: black;
-webkit-text-stroke-width: 0.3px;
text-shadow: 3px !important;
}
#donor-notification .amount {
position: absolute;
margin-top: 145px !important;
margin-left: -30px !important;
width: 0px !important;
padding-top: 0px !important;
text-align: center !important;
font-weight: bold !important;
font-size: 40px !important;
font-family: Germanica !important;
color: orange !important;
text-transform: capitalize;
-webkit-text-fill-color: blue;
-webkit-text-stroke-color: black;
-webkit-text-stroke-width: 0.3px;
text-shadow: 3px !important;
}
#donor-notification .donor {
position: absolute;
margin-top: 145px !important;
margin-left: -140px !important;
width: 300px !important;
text-align: center !important;
font-weight: bold !important;
font-size: 40px !important;
font-family: Germanica !important;
color: orange !important;
text-transform: capitalize;
-webkit-text-fill-color: blue;
-webkit-text-stroke-color: black;
-webkit-text-stroke-width: 0.3px;
text-shadow: 3px !important;
}

.amount:before {
content: 'New Donation ' !important;
position: absolute;
margin-top: -60px !important;
margin-left: -70px !important;
width: 200px !important;
padding-top: 0px !important;
text-align: center !important;
font-weight: bold !important;
font-size: 40px !important;
font-family: Germanica !important;
color: orange !important;
text-transform: capitalize;
-webkit-text-fill-color: blue;
-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.)

[iced00d]

TYVM ! I like the artwork ... appreciate it ....