1. 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

Discussion in 'Styling and Customization Questions' started by Andy.N, Nov 7, 2011.

  1. Andy.N

    Andy.N Well-Known Member

    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.
  2. Brogan

    Brogan XenForo Moderator Staff Member

    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:
    <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 likes this.
  3. Andy.N

    Andy.N Well-Known Member

    Yes, we will update it manually.
    How do we have the 25% and 75% automatically calculated when we just enter the amount received/goal?
  4. Brogan

    Brogan XenForo Moderator Staff Member

    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.
    <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'}%
    Andy.N likes this.

Share This Page