Requesting Help With Custom CSS Work (Follow/Donation)

[USAF_Hart]

Hello. I have tried to understand the inner workings of CSS, but I just cannot wrap my hands around it. Maybe by having someone set up notifications for me, I can study it a bit more within the deepbot program and possibly get the hang out of it. Thank you in advance to anyone who is willing to take time out of their day/night to help a fellow streamer :-).

I would like to use this photo here: http://www.af.mil/portals/1/images/factsheets/factsheet_graphic.jpg
for my follower notification.

I would like to use this gif here: http://replygif.net/i/1171.gif  for my donation notification- Also if I could have the donation text below the gif, that would be great as well. If not, it's ok.

Any help would be greatly appreciated.

[TheNumbLock]

Requested by: USAF_Hart

Follower:

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

CSS Code:

Code: [Select]

#follow-notification {
display: none;
position: absolute;
width: 681px !important;
height: 203px !important;
background-image: url('http://i.imgur.com/7izp19A.jpg') !important;
background-repeat: no-repeat;
}
#follow-notification .followname {
position: absolute !important;
margin-top: 80px !important;
margin-left: 170px !important;
text-align: center !important;
width: 350px !important;
font-size: 40px !important;
font-weight: normal !important;
  font-family: Impact !important;
  color: #ffffff !important;
-webkit-text-stroke-width: 0px;
  -webkit-text-stroke-color: black;
  -webkit-text-fill-color: white;
}

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




Donation:

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

CSS Code:

Code: [Select]

#donor-notification {
width: 300px !important;
height: 240px !important;
background-color: transparent !important;
background-image:url('http://i.imgur.com/WAETwv4.gif') !important;
background-repeat: no-repeat !important;
background-size: initial !important;
}
 
 
#donor-notification .header {
visibility: hidden !important;
}
 
#donor-notification .streamname {
visibility: hidden !important;
}
 
#donor-notification .message {
visibility: hidden !important;
}
#donor-notification .amount {
position: absolute !important;
margin-top: 150px !important;
margin-left: -180px !important;
font-size: 32px !important;
font-family: Impact !important;
font-weight: normal !important;
-webkit-text-fill-color: white;
}
#donor-notification .donor {
position: absolute !important;
margin-top: 100px !important;
margin-left: 30px !important;
font-size: 32px !important;
font-family: Impact !important;
font-weight: normal !important;
color: red !important;
  -webkit-text-fill-color: white;
}

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

[USAF_Hart]

Repent, you are simply amazing! Thank you so much! This was such a quick  turn around and I actually get to use it for my 24 hour stream tonight in support of Operation Supply Drop. Thank you again for all your continued hard work!

[SkipSh00ter]

I would like some custom css work done and i don't mind paying or donating for it.
What I'm looking for is custom css that would replace scrolling latest followers and scrolling now playing, possibly more if i can think of anything else
Anyone interested in such a job or can point me in the right direction for it?
thanks

[TheNumbLock]

I would like some custom css work done and i don't mind paying or donating for it.
What I'm looking for is custom css that would replace scrolling latest followers and scrolling now playing, possibly more if i can think of anything else
Anyone interested in such a job or can point me in the right direction for it?
thanks

Why not just add a text source to obs, and set it to scroll?

Example of mine:

[SkipSh00ter]

I want it to replace scrolling text. So that it pops up and fades out.
For instance, showing latest 5 followers with last on top and biggest with 4 below it and smaller and fading to nothing.
Same with songs.