Solved

Custom Donation Goal

  • 31 January 2020
  • 8 replies
  • 2605 views

Sorry for my bad english

I`m done with my own Donation Goal bar but i can’t figure out how to fill the bar. I can set a value to fill the bar manually but I just don't know what to insert instead of the 77 so that the bar fills up automatically.

<progress id="progressBar" max="100" value="77">

 

I know you don't normally help, but you use it yourself and I just don't know how to do it.
Alternatively, it would be enough if I knew how I could move the text on the standard bar a little, because I only do it because the "title" and "goal-total" disappear behind my overlay. They would only have to be moved slightly towards the center.

 

 

icon

Best answer by Thibaud 1 February 2020, 20:30

Hey there @KaitoSen The bar will fill up when you receive donations, you can test it by clicking “test donations” when you are in your alertbox settings, as for the custom html/css unfortunately unless you know how to build the bar I would recommend against enabling this setting BUT you should be able to copy the widget’s url and use it in a Browser source in your streaming software, there you’ll find a custom css field where you can enter some css, I think by using the following in there the title should go on the right.

.condensed__title{left: 50px;}

 

View original

This topic has been closed for comments

8 replies

Here 2 pictures so that you can better understand why I'm doing this at all. The first picture shows the standard bar and the second picture as I would like it to be. I was hoping to be able to do it with Custom HTML / CSS, but I just can't get the progress bar to work.

 

Streamlabs Condensed Bar
That is what I need

 

Userlevel 6

Hey there @KaitoSen The bar will fill up when you receive donations, you can test it by clicking “test donations” when you are in your alertbox settings, as for the custom html/css unfortunately unless you know how to build the bar I would recommend against enabling this setting BUT you should be able to copy the widget’s url and use it in a Browser source in your streaming software, there you’ll find a custom css field where you can enter some css, I think by using the following in there the title should go on the right.

.condensed__title{left: 50px;}

 

Yeah that works thank u so much :D the title is not behind the overlay anymore.

What do I need for the goal on the right side? 

.condensed__goal{right: 70px;}

.condensed__goal-total{right: 70px;}

doesn’t work :/ 

 

And just by the way, I know the bar fills up if someone donate but my custom bar doesnt fill up. Neither by donating nor by anything else, I had to set the “value” manually. But it doesn’t matter anymore, I only needed it so that you could read the title and the goal and at least you can read the title again :D

Is there no way to move the “€75.00” to the left? I tried so many things I found on google but nothing move it :(

Userlevel 7

Hey there @KaitoSen 

 

Unfortunately, we don’t provide custom HTML/CSS/JS support typically, if we know it, like Must above we can, but for general support we do not provide it. Sorry to keep you hanging. You can look at some of our premade widgets to get an idea 

Does the donation goal widget only pull donation data from the streamlabs dedicated site? Is it possible for it to track donations as they come in to PayPal? Similarly, for any events, can the be triggered by any PayPal activity during the event, or is it just through the streamlabs site? 

Userlevel 5

Hey all, 

This data would be pulled from the Streamlabs API. One link I found handy that may give you some ideas I’ll link below. 
https://codepen.io/Michael_Gibbons/pen/MWapBzN

If you are in need of further assistance, please join us on discord or submit a ticket.

Tickets: https://support.streamlabs.com/hc/en-us/requests/new

Thanks!