Changing background color of big number box

Hi,

Is it possible to change the background color of a big number box in Mode's report builder? 

Thanks,

Sujin

9replies Oldest first
  • Oldest first
  • Newest first
  • Active threads
  • Popular
  • Hi Sujin !  I think this custom HTML code at the top of your report should do the trick:

    <style>
      .chart-big-number{
        background: #DAF7A6;
      }
    </style>

    Let me know how this works for you!

    Reply Like
  • Hi Donna , thanks for the help! It did apply color to the background within the number area (shown in photo attached). However, do you know how to fill the entire big-number widget? I tried adding: 

    .col-md-6 {
            background-color: #DAF7A6;
    }

    but this only colored the frame of the widgets. 

    Reply Like
  • Hi Sujin ! Here's an example of how to do this: https://modeanalytics.com/modeanalytics/reports/054ddc1edf85

    You can do it in a script block, by adding a line like this for each chart:

    <script>
    
      $("#chart_65e2b7a231e2 .chart-content").css("background","#666")
      $("#chart_3dc18b13ca64 .chart-content").css("background","#eee")
    
    </script>

    The "#chart_65e2b7a231e2" bit comes from the id of the chart element in the HTML. If you want all of the charts to have the same background color, you can delete that part, and just have a line like this:

    <script>
    
      $(".chart-content").css("background","#666")
    
    </script>

    Let me know if this works!

    Reply Like 1
  • That worked, thank you  Benn !

    Reply Like 1
  • Does this work for changing the background of a text box as well?

    Reply Like
  • Hi  Steven Lee , you can change text elements' background colors, but it's not super straightforward like the examples described above. You would need to wrap the text elements inside another div with a custom class name, then give that div a background color. I made an example report here: https://modeanalytics.com/modeanalytics/reports/0ec11729ebb9 You can view the HTML and javascript code by clicking View Details -> HTML.

    Reply Like
  • That's perfect thanks Leqi

    Reply Like
  • Leqi Long Similarly to this, is it possible to change the colour of the text in a text box? I assume there are some sort of text-options that allow this?  

    Reply Like
  • Hey Jess Verbruggen , our current UI doesn't offer native color picking on text b boxes. However, this effect is very easy to achieve using a little custom HTML and CSS. Check out this example report as a guide!

    Reply Like 1
Like2 Follow
  • Status Answered
  • 2 Likes
  • 5 mths agoLast active
  • 9Replies
  • 1665Views
  • 8 Following

Create A New Discussion

Share your thoughts