Hello!
I really do hope, I'm in the right thread, even though it's not the typical 'notification request'..
Sometimes, I have crazy ideas and my dear friend phoenix722 from Twitch was so kind to help out a bit.
Long story short, I wanted a customized donationtracker bar, this is, what we have worked out so far
(see embeded code). Now our only problem is, we can't figure out, how to change the currency from $ to €.
So I ask the wonderful team around Deepbot, if that would be possible with the following code?
body {
background-color: transparent;
color: white;
}
#content {
/* width:100%; */
padding: 0px 0px;
}
#thermometer {
position: relative;
margin: 0px 0px 0px 0px;
height:0px;
background: #ddd;
border:0px solid;
-webkit-border-radius: 0px;
-webkit-box-shadow: 0px;
}
#thermometer .track {
height:50px;
top: 0px;
border: 1px solid #aaa;
margin: 20px 20px;
background: rgb(255,255,255);
}
#thermometer .progress {
height: 50px;
width:10%;
background: linear-gradient(90deg, #a85e6c 0%, #a85e6c 12.5%, #e37f52 12.5%, #e37f52 25%, #ef9f48 25%, #ef9f48 37.5%, #9cb641 37.5%, #9cb641 50%, #009484 50%, #009484 62.5%, #21acb8 62.5%, #21acb8 75%, #1972dd 75%, #1972dd 87.5%, #8fa0ae 87.5%, #8fa0ae 100%);
background-image: -webkit-gradient(linear, 0% 50%, 100% 50%, color-stop(0%, #a85e6c), color-stop(12.5%, #a85e6c), color-stop(12.5%, #e37f52), color-stop(25%, #e37f52), color-stop(25%, #ef9f48), color-stop(37.5%, #ef9f48), color-stop(37.5%, #9cb641), color-stop(50%, #9cb641), color-stop(50%, #009484), color-stop(62.5%, #009484), color-stop(62.5%, #21acb8), color-stop(75%, #21acb8), color-stop(75%, #1972dd), color-stop(87.5%, #1972dd), color-stop(87.5%, #8fa0ae), color-stop(100%, #8fa0ae));
background-image: -webkit-linear-gradient(left, #a85e6c 0%, #a85e6c 12.5%, #e37f52 12.5%, #e37f52 25%, #ef9f48 25%, #ef9f48 37.5%, #9cb641 37.5%, #9cb641 50%, #009484 50%, #009484 62.5%, #21acb8 62.5%, #21acb8 75%, #1972dd 75%, #1972dd 87.5%, #8fa0ae 87.5%, #8fa0ae 100%);
background-image: -moz-linear-gradient(left, #a85e6c 0%, #a85e6c 12.5%, #e37f52 12.5%, #e37f52 25%, #ef9f48 25%, #ef9f48 37.5%, #9cb641 37.5%, #9cb641 50%, #009484 50%, #009484 62.5%, #21acb8 62.5%, #21acb8 75%, #1972dd 75%, #1972dd 87.5%, #8fa0ae 87.5%, #8fa0ae 100%);
background-image: -o-linear-gradient(left, #a85e6c 0%, #a85e6c 12.5%, #e37f52 12.5%, #e37f52 25%, #ef9f48 25%, #ef9f48 37.5%, #9cb641 37.5%, #9cb641 50%, #009484 50%, #009484 62.5%, #21acb8 62.5%, #21acb8 75%, #1972dd 75%, #1972dd 87.5%, #8fa0ae 87.5%, #8fa0ae 100%);
background-image: linear-gradient(left, #a85e6c 0%,#a85e6c 12.5%,#e37f52 12.5%,#e37f52 25%,#ef9f48 25%,#ef9f48 37.5%,#9cb641 37.5%,#9cb641 50%,#009484 50%,#009484 62.5%,#21acb8 62.5%,#21acb8 75%,#1972dd 75%,#1972dd 87.5%,#8fa0ae 87.5%,#8fa0ae 100%);
}
#thermometer .goal {
position:absolute;
width: 100%;
}
#thermometer .start-amount {
position: absolute;
float: right;
display: inline-block;
border-top:0px solid black;
font-family: Trebuchet MS;
font-weight: bold;
top: 50px;
right: 0px;
width: 100%;
color:#ffffff;
}
#thermometer .end-amount {
position: absolute;
float: right;
display: inline-block;
padding-right: 40px;
border-top:0px solid black;
font-family: Trebuchet MS;
font-weight: bold;
top: 50px;
right: 0px;
color:#ffffff;
}
#thermometer .progress .amount {
display: block;
position: absolute;
text-align: center;
border-top: 0px solid #060;
font-family: Trebuchet MS;
font-size: 32px;
font-weight: bold;
color: white;
-webkit-text-fill-color: white;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: black;
top: 8px;
width: 100%;
}Much love and thanks in advance for any kind of help
headcrashrainbow
