• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.

Progress bar in notices using CSS

Andy.N

Well-known member
#1
Can anyone help with a simple CSS code that can be use in Notices to display some simple text, url and a progress bar with a goal of $10,000 and the current donation.

Thank you.
 

Brogan

XenForo moderator
Staff member
#2
You can't do that automatically with HTML and CSS, you would have to manually update it all the time.

Try this for a start:
HTML:
<table style="width: 100%"><tr><td style="height: 10px; width: 25%; border: 1px solid #666666; background-color: #999999"></td><td style="width: 75%; border: 1px solid #666666; background-color: #CCCCCC"></td></tr></table>
Obviously you can add text above/below explaining what it is and adjust the percentages to suit, etc.
 

Andy.N

Well-known member
#3
You can't do that automatically with HTML and CSS, you would have to manually update it all the time.

Try this for a start:
HTML:
<table style="width: 100%"><tr><td style="height: 10px; width: 25%; border: 1px solid #666666; background-color: #999999"></td><td style="width: 75%; border: 1px solid #666666; background-color: #CCCCCC"></td></tr></table>
Yes, we will update it manually.
How do we have the 25% and 75% automatically calculated when we just enter the amount received/goal?
 

Brogan

XenForo moderator
Staff member
#4
Well you can remove the second width attribute, so all you need to do then is enter the percentage of the current donations versus the total.
Code:
<table style="width: 100%"><tr><td style="height: 10px; width:25%; border: 1px solid #666666; background-color: #999999"></td><td style="border: 1px solid #666666; background-color: #CCCCCC"></td></tr></table>
You will need to work that out manually though.

Unless xen:calc is supported in notices; I don't think it is though as I just tried this and it didn't work:
width: {xen:calc '1500 / 10000 * 100'}%