Change status word in dashboard

Mobile Apps Dashboard
#1

Is there a way to change the status wording.

I have a contact sensor that I am using to tell when something is full or empty. The icon says open or closed. Is there a way to change it so that when that specific Contact is closed it would actually say "empty" and if it is open to have it say "full"

It is the same sensor that I use for windows so I don't want it to be a global change.

#2

Have not tried it myself but have you checked to see about editing the css under Advanced?

#3

Not just yet (TMK, I can edit via inspect, but cannot target in CSS that due to location, could be my lack of CSS skillz).

However you will be able to soon via smartly, check here for details.

#4

If you use smartly, you'll be able to set a different icon to either state to be more descriptive of what's empty or full. Here's a search I did for 'tray' and it shows a few options.

image
image940×664 22.4 KB

The CSS to do the text replacement is below:

#tile-99 .tile-primary>div {
  visibility: hidden;
  font-size: 0;
}

#tile-99 .tile-primary.open>div:after,
#tile-99 .tile-primary.closed>div:after {
    visibility: visible;
    font-size: 14px;
}

#tile-99 .tile-primary.open>div:after {
    content: "Full";
}

#tile-99 .tile-primary.closed>div:after {
    content: "Empty";
}
1 Like
#5

Thank you that worked great.

2 Likes
#6

dang it!! I had.... doesn't work look above.

#tile-99 .tile-primary.open>div { content: "Full"; }

soooo close. Thanks @spelcheck. figure linking would draw him out for @paul :laughing:

1 Like
#7

Ah yes, very close! Know that you can't swap out actual content of an element, you can only hide what's there, make it take up no space, then use :before or :after (or both) to inject new text.

1 Like