Changing Text in HSM tile

🛎️ Get Help
1

Hi all,

I am by no means a CSS expert but I've managed to muddle through a boatload of CSS to get all my dashboards laid out fairly nice with one exception. I can't for the life of me figure out how to change the text in the HSM tile. Does anyone know how to do that? Thanks

2

If you're looking at the Armed..Disarmed the tag is P-1

3

Thanks, I did find that but I couldn't get the right syntax to get it to override the text.

4 
div#tile-[ID] div.tile-contents div.tile-primary div.p-1 { color: green, font-weight: bold;}

Replace [ID] with your actual tile ID.

5

Thanks but I couldn't get that to work. I'll keep poking around.

6

Open up your dashboard on your computer.
Right click on the HSM tile (preferably on the "Disarmed" word).
Click "Inspect" or "Inspect Element" (each browser is different).
This will open a console in your browser, probably on the bottom of the page.
Take a screenshot of that area.

It should look similar to the following:

Capture
Capture1119×291 16.2 KB

7

Mine looks almost identical to yours, sans the tile number. I have CSS in to adjust the padding which works ok, it's just overriding the text.

image

8

What is it exactly you are wanting to accomplish?
Are you wanting to change the text color, it's size?

9

I just wanted to change the text for the 'armed' states. I just want 'armed', not armed away, armed home, etc. It's not a big deal, it's more a learning exercise/mission at this point.

10

Gotcha.
Yeah, I don't think it's possible to have more than one value via the CSS rule.
Whenever the state changes, it would overwrite whatever you are placing there via CSS.
Meaning, you can make it say "Armed" via CSS... but when the system disarms then re-arms again, it would go back to the default "armed away". If you refresh the dashboard, it will then say "Armed" again, until the status changes again. This could get very confusing. Is there not a better way to change the text of the HSM status? I'll look myself, also.

But, for your exercise, here is the proper code to adjust the text via CSS:

div#tile-0 div.tile-contents div.tile-primary div.p-1:after { content: "TESTING"; }
11

Gotcha, thanks. Maybe I'll just overlay a transparent tile with a string tag.