A Andy.N Well-known member Nov 7, 2011 #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.
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.
P Paul B XenForo moderator Staff member Nov 7, 2011 #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. Upvote 0 Downvote
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.
A Andy.N Well-known member Nov 7, 2011 #3 Brogan said: 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> Click to expand... Yes, we will update it manually. How do we have the 25% and 75% automatically calculated when we just enter the amount received/goal? Upvote 0 Downvote
Brogan said: 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> Click to expand... Yes, we will update it manually. How do we have the 25% and 75% automatically calculated when we just enter the amount received/goal?
P Paul B XenForo moderator Staff member Nov 7, 2011 #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'}% Upvote 0 Downvote
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'}%
