Discussions

Expand all | Collapse all

Custom Icons

  • 1.  Custom Icons

    Posted 17 days ago

    I need to create a series of stoplights that are colored based on a percentage number that would show up in the middle of them. My percentage scales would be based on 0%-100% and broken down in increments of 10. Each percentage would be a gradient color from red to green. I found some code but not sure how to tie it all together and get them into a report.


    Here is the code I found.

    .circle {

      width: 500px;

      height: 500px;

      line-height: 500px;

      border-radius: 50%;

      font-size: 50px;

      color: #fff;

      text-align: center;

      background: #000

    }

    <div class="circle">Hello I am A Circle</div>



    ------------------------------
    Joey Zint
    ------------------------------


  • 2.  RE: Custom Icons

    Posted 17 days ago
    There's an app in the Exchange with several examples of exactly this. Go to the App Exchange and search on Magic Buttons. Once you have that app, take a look at the Projects table and the Green Square Option field.

    ------------------------------
    Blake Harrison
    bharrison@datablender.io
    DataBlender - Quick Base Solution Provider
    Atlanta GA
    404.800.1702 / http://datablender.io/
    ------------------------------



  • 3.  RE: Custom Icons

    Posted 14 days ago
    Not exactly what I am looking for.

    ------------------------------
    Joey Zint
    ------------------------------



  • 4.  RE: Custom Icons

    Posted 14 days ago
    I want a single stoplight that changes color and has the percentage complete in the circle. One stoplight per task, not 10 lights per task

    ------------------------------
    Joey Zint
    ------------------------------



  • 5.  RE: Custom Icons

    Posted 14 days ago
    Ok, that's doable, but you'll need to outline the CSS styling within the HTML you're building instead of styling a class and then referencing that class. 

    <div style='width: 500px;height: 500px;line-height: 500px;border-radius: 50%; font-size: 50px;color: #fff;text-align: center;background: #000>Hello I am A Circle</div>​

    You'll want to play with the width/height/line-height (this creates a very large circle), but I've tested this and it works!



    ------------------------------
    Blake Harrison
    bharrison@datablender.io
    DataBlender - Quick Base Solution Provider
    Atlanta GA
    404.800.1702 / http://datablender.io/
    ------------------------------