Home General Discussion

How to update colour of statuses in 9.0.9

Sean_TerrySean_Terry Customer Advanced IT Monkey ✭✭✭

Anyone know how to change the active button below:




In the past we've had users clicking on the blue button and for whatever reason black is best for us, so we have this set up in 8.9.5 that we currently have in live:







Answers

  • Brian_WiestBrian_Wiest Customer Super IT Monkey ✭✭✭✭✭
    Custom CSS

    .status-pill--active {
        color: white;
        background-color: #333 !important;
    }

  • Sean_TerrySean_Terry Customer Advanced IT Monkey ✭✭✭
    Thanks

  • Gabriel_LencesGabriel_Lences Customer Advanced IT Monkey ✭✭✭
    Can this be further enhanced to have different colors according to what the status of the SR is? 
    E.g: failed would be red, submitted blue, completed green etc.?
  • Shane_WhiteShane_White Cireson Support Super IT Monkey ✭✭✭✭✭
    edited April 2019
    Hi @Gabriel_Lences,

    Yes it certainly can, I have drawn up a quick example for Incidents to show you how this might work, the js would need to go in CustomSpace folder and is changing the status-pill class background color (you can add border color and other css elements as well) to red if Active and blue if resolved:

    $(document).ready(function () {
    var mainPageNode = document.getElementById('main_wrapper');
    var observer = new MutationObserver(function(mutations) {

    var statusPill =  $('.status-pill')
    //console.log(statusPill);
    if (statusPill.length > 0) { //An Element Exists
    if(pageForm.viewModel.Status.Name === "Active") {
    for(var i = 0; i < statusPill.length; i++){statusPill[i].style.backgroundColor = "green"}
    }
    if(pageForm.viewModel.Status.Name === 'Resolved') {
    for(var i = 0; i < statusPill.length; i++){statusPill[i].style.backgroundColor = "red"}
    }
    observer.disconnect();
    }
    });

    // configure the observer and start the instance.
    var observerConfig = {attributes: true, childList: true, subtree: true, characterData: true };
    observer.observe(mainPageNode, observerConfig);
    });

    Below is a screenshot of the result:


    Hope this helps,
    Thanks,
    Shane.
  • Gabriel_LencesGabriel_Lences Customer Advanced IT Monkey ✭✭✭
    @Shane_White , that's exactly what I was looking for, perfect! Thanks a bunch!  :)
  • Shane_WhiteShane_White Cireson Support Super IT Monkey ✭✭✭✭✭
    @Gabriel_Lences

    I have done a quick edit on the above code to fix it as a used the wrong if statement :smile:

    Thanks,
    Shane.
Sign In or Register to comment.