Customizing Graphical Icons on TEP

It might seem trivial, but after creating a dashboard in TEP showing business impacts at a glance, I've been frequently asked to change some of the icons for a more consistent display.

Doing this requires creating or modifying the cascading style sheets (.css files) that ship with ITM 6.1. There is a heirarchy of import statements to import your new filenames into a new .css so they will be available for selection in the view style in TEP.

Example new style "jje_consistent_round":

@import "$base.css";
@import "$jje_baseNodeStateFixed.css";
@import "$baseNodeLabelRight.css";

node {
labelColor : "black";
}

"jje_baseNodeStateFixed":

@import "$jje_baseNodeState.css";

node{
shapeWidth : "20";
}

Here's a snippet from jje_baseNodeState.css where I change the warning icon to be more consistent:



node[state == 30]{
nodeStateLegend : "Warning";
shapeType : "Ellipse";
fillColor1 : "white";
fillColor2 : "yellow";
}



If you create your own .css files that need re-imported like I did, you will need to restart TEPS to reread them.