Deep Bot - Twitch Streamer Assistant

Deep Bot => Custom Notifications => Topic started by: l0wcrow on January 25, 2016, 08:21:19 PM

Title: Custom Donation Tracker | Need Help
Post by: l0wcrow on January 25, 2016, 08:21:19 PM

Hey everyone!

I am not a fan of the regular donation tracker, it just dont look good in the overlay but I am also sure it helps so I came up with an idea for me but I dont have any clue how to do it ;)

Well, my plan is simple! I would like to have a sandwich which is just getting bigger scaled with the total of donations no numbers or abything just the sandwich... Is there someone who could do this for me and just send me the css so I just need to paste it. I would really appreciate the work and I hope its not too much effort but like I said I have no clue...The image for sandwich I would upload as soon as someone says he can do this for me!

Thanks in advance

Title: Re: Custom Donation Tracker | Need Help
Post by: Paladin on January 26, 2016, 06:19:00 AM

Wish i could help the guy above but i also need help! Just looking for either a bar like the default one for deepbot or a small box that shows x(current)/x(goal) for both follower and donations! If a follower tracker wont work thats fine too! A simple box matching the colors of my overlay/stream would be great! Any help is appreciated!!!  ;D

Title: Re: Custom Donation Tracker | Need Help
Post by: TheNumbLock on January 27, 2016, 03:10:14 AM

Quote from: l0wcrow on January 25, 2016, 08:21:19 PM

Hey everyone!

I am not a fan of the regular donation tracker, it just dont look good in the overlay but I am also sure it helps so I came up with an idea for me but I dont have any clue how to do it ;)

Well, my plan is simple! I would like to have a sandwich which is just getting bigger scaled with the total of donations no numbers or abything just the sandwich... Is there someone who could do this for me and just send me the css so I just need to paste it. I would really appreciate the work and I hope its not too much effort but like I said I have no clue...The image for sandwich I would upload as soon as someone says he can do this for me!

Thanks in advance

URL: http://deepbot.tv/widgets/donationtracker.htm?mode=2

CSS:

Code: [Select]

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

#content {
/* width:100%; */
padding: 10px 10px;
}

#thermometer {
position: relative;
  margin: 0px 10px 10px 10px;
height: 200px !important;
background: transparent !important;
border: 3px solid transparent !important;
-webkit-border-radius: 0px !important;
-webkit-box-shadow: 0px 0px 0px transparent !important;
}

#thermometer .track {
height: 150px !important;
top: 0px;
border: 0px solid limegreen !important;
margin: 20px 20px !important;
background: transparent !important;
}

#thermometer .progress {
height: 160px !important;
width: 100% !important;
background: transparent !important;
background-image: url('http://i.imgur.com/UavyqdA.png') !important;
}

#thermometer .goal {
position:absolute;
width: 100%;
}

#thermometer .start-amount {
visibility: hidden !important;
}
#thermometer .end-amount {
visibility: hidden !important;
position: absolute;
float: right;
display: inline-block;
padding-right: 40px;
border-top:0px solid black;
font-family: Impact !important;
font-weight: bold;
font-size: 26px !important;
top: 10px !important;
right: 20px !important;
color: white !important;
-webkit-text-stroke-color: black;
-webkit-text-stroke-width: 1px !important;
  text-shadow:0px 0px 25px white;
}
#thermometer .progress .amount {
  visibility: hidden !important;
display: block;
position: absolute;
text-align: center;
border-top: 0px solid #060;
font-family: Impact !important;
font-size: 26px !important;
font-weight: bold;
color: white !important;
top: 32px !important;
width: 100%;
-webkit-text-stroke-color: black;
-webkit-text-stroke-width: 1px !important;
  text-shadow:0px 0px 25px white;
}

.goal:before {
visibility: hidden !important;
content: 'InsertNameHere' !important;
position: absolute;
float: left !important;
display: inline-block;
padding-right: 40px;
border-top:0px solid black;
font-family: Impact !important;
font-weight: normal;
font-size: 26px !important;
top: 10px !important;
left: 10px !important;
color: white !important;
-webkit-text-stroke-color: black;
-webkit-text-stroke-width: 1px !important;
  text-shadow:0px 0px 25px white;
}


Title: Re: Custom Donation Tracker | Need Help
Post by: l0wcrow on January 29, 2016, 11:38:59 PM

Thanks repent ;) Didnt worked perfectly, the sized didnt changed but I was able to figure it myself but thank you very much to came up with the base code :P

Code: [Select]

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

#content {
/* width:100%; */
padding: 10px 10px;
}

#thermometer {
position: relative;
  margin: 0px 10px 10px 10px;
height: 150px !important;
background: transparent !important;
border: 3px solid transparent !important;
-webkit-border-radius: 0px !important;
-webkit-box-shadow: 0px 0px 0px transparent !important;
}

#thermometer .track {
height: 100px !important;
top: 0px;
border: 0px solid limegreen !important;
margin: 20px 20px !important;
background: transparent !important;
}

#thermometer .progress {
height: 100px !important;
background: url('http://toa5t.de/l0w/subdonations.png') transparent !important;
}

#thermometer .goal {
position:absolute;
width: 100%;
}

#thermometer .start-amount {
visibility: hidden !important;
}
#thermometer .end-amount {
visibility: hidden !important;
position: absolute;
float: right;
display: inline-block;
padding-right: 40px;
border-top:0px solid black;
font-family: Impact !important;
font-weight: bold;
font-size: 26px !important;
top: 10px !important;
right: 20px !important;
color: white !important;
-webkit-text-stroke-color: black;
-webkit-text-stroke-width: 1px !important;
  text-shadow:0px 0px 25px white;
}
#thermometer .progress .amount {
  visibility: hidden !important;
display: block;
position: absolute;
text-align: center;
border-top: 0px solid #060;
font-family: Impact !important;
font-size: 26px !important;
font-weight: bold;
color: white !important;
top: 32px !important;
width: 100%;
-webkit-text-stroke-color: black;
-webkit-text-stroke-width: 1px !important;
  text-shadow:0px 0px 25px white;
}

.goal:before {
visibility: hidden !important;
content: 'InsertNameHere' !important;
position: absolute;
float: left !important;
display: inline-block;
padding-right: 40px;
border-top:0px solid black;
font-family: Impact !important;
font-weight: normal;
font-size: 26px !important;
top: 10px !important;
left: 10px !important;
color: white !important;
-webkit-text-stroke-color: black;
-webkit-text-stroke-width: 1px !important;
  text-shadow:0px 0px 25px white;
}