Author Topic: Custom Donation Tracker small  (Read 1712 times)

0 Members and 1 Guest are viewing this topic.

GGSoundjack

  • Youngling
  • *
  • Posts: 23
  • Karma: +0/-0
    • View Profile
  • Twitch Name: ggsoundjack
Custom Donation Tracker small
« on: September 04, 2015, 07:03:06 PM »
Hey there

I want a kind of smaller donation tracker, something like http://cdn.cssflow.com/snippets/metal-progress-bar/preview-260.png
Can somebody create me some thing like this?

TheNumbLock

  • Advisor
  • Councilor
  • **
  • Posts: 4776
  • Karma: +137/-5
    • View Profile
  • Twitch Name: TheNumbLock
Re: Custom Donation Tracker small
« Reply #1 on: September 07, 2015, 05:43:24 AM »
Hopefully this works, if you need anything else, let me know.

Requested by: GGSoundJack

Donation Tracker:

Link: http://deepbot.tv/widgets/donationtracker.htm?mode=2
Width: 600
Height: 250

CSS Code:
Code: [Select]
body {
background-color: transparent;
color: white;
}

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

#thermometer {
position: relative;
margin: 60px auto !important;
overflow: hidden !important;
  padding: 0 15px !important;
  width: 220px !important;
  height: 34px !important;
  background: #d3d5d9 !important;
  border-radius: 17px !important;
  background-image: -webkit-linear-gradient(top, #ebecef, #bfc3c7) !important;
}

#thermometer .track {
display: block !important;
  overflow: hidden !important;
  margin-top: 12px !important;
  height: 10px !important;
  background: #b8b8b8 !important;
  border-radius: 4px !important;
  background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.2), transparent 60%) !important;
  -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2), 0 1px rgba(255, 255, 255, 0.6) !important;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2), 0 1px rgba(255, 255, 255, 0.6) !important;
}

#thermometer .progress {
  display: block !important;
  top: -20px !important;
  height: 10px !important;
  background: #1997e6 !important;
  background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0) 60%, rgba(0, 0, 0, 0) 61%, rgba(0, 0, 0, 0.2)), -webkit-linear-gradient(left, #147cd6, #24c1fc) !important;
}

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

#thermometer .start-amount {
visibility: hidden !important;
}
#thermometer .end-amount {
visibility: hidden !important;
}
#thermometer .progress .amount {
display: block !important;
text-align: center !important;
border-top: 0px solid #060 !important;
font-size: 20px !important;
font-weight: bold !important;
top: 0px !important;
left: 0px !important;
width: 100% !important;
font: bold 14px/34px Helvetica, Arial, sans-serif !important;
  color: #333 !important;
  text-shadow: 0 1px rgba(255, 255, 255, 0.6) !important;
}

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

Old Name: RepentGamingTV
Twitch: Here

Need help ASAP?
Join Deepbot's Discord: Discord.Deepbot.tv
Deepbot's Twitter: @DeepSupport