Changing UI Colors?

[whitedavidp]

I have searched all around in the code and simply cannot find this myself. Perhaps someone knows???

I want to change the colors being used to depict "blocked", "screened", and "permitted". I found a reference in the dashboard.html file with some literal values but this appears only to apply only to the bar chart. I searched around in the code for those literal values, but didn't find them.

Thanks!

[thess]

I feel your pain. I'm not much of a UI guy and even less with HTML/CSS -- However, I believe what you are looking for are the badge classes in the Bootstrap javscript toolkit. You will probably want to supply .css overrides for badge-primary, badge-danger, etc.

Ref: Bootstrap Doc - badges

[whitedavidp]

Thanks, as always. I never would have found this. Now it seems it is down the rabbit-hole of Bootstrap and .css. Yikes!

[whitedavidp]

Ok, now that I know and have done a little research, this has been pretty easy to accomplish and I write this in hopes that it might help others...

I wanted blocked calls to be red in color (as they originally are), screened calls to be yellow-ish (but settled for orange) in color, and permitted calls to be green in color. So I had to modify 2 files:

In userinterface/static/css, I modified callattendant.css and simply added the following at the very bottom:

/*
Override badge colors
*/
.badge-primary {
   background-color: green
}
.badge-info {
   background-color: orange
}

In userinterface/templates, I modified dashboard.html's declaration of the variable barChartData to be:

var barChartData = {
        labels: dates,
        datasets: [{
            label: "Blocked",
            backgroundColor: "#DC3545",
            data: blocked
        }, {
            label: "Permitted",
            backgroundColor: "green",
            //backgroundColor: "#007BFF",
            data: allowed
        }, {
            label: "Screened",
            //backgroundColor: "#17A2B8",
            backgroundColor: "orange",
            data: screened
        }]
    }

And this seemed to do the trick!

Thanks again for the pointer!