Custom Donation Tracker | Need Help

[l0wcrow]

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

[Paladin]

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!!! 

[TheNumbLock]

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;
}


[l0wcrow]

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

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;
}