Dashboard Device Names - Any Way To Selectively Change?

🧰 Built-In Apps and Drivers
1

Is there a way to change the display name of a device within a dashboard without changing its name in the Hubitat list and the name Alexa uses to control the device?

Let me explain why I ask this. I have 60-80 different devices and the challenge to create unique names for each of them was only overcome by me by prefacing each device with the name of the room it's located in - i.e. "Living Room Fan Lights" or "Study Room Desk Lights."

But I have some dashboards organized by room and thus I don't need to see "Living Room" this in the title for each device on, say, the Living Room dashboard.

2

You can achieve it with CSS. I think it can vary from device type to device type, but for switches, I have used the CSS below to insert a name, remove the icon, and hide the tile title. You may also be interested in the CSS thread for some other ideas on modifying your tiles.

/* Switch Titles */
#tile-89 .tile-primary:after{ content: "NEWS TIME"; }
#tile-90 .tile-primary:after{ content: "CLOSE ALL BLINDS"; }
#tile-91 .tile-primary:after{ content: "SWAP TV's"; }
/* Switch Icons and Title Hiding */
#tile-89 .material-icons, #tile-90 .material-icons, #tile-91 .material-icons { display: none; !important; }
#tile-89 .tile-title, #tile-90 .tile-title, #tile-91 .tile-title { visibility: hidden; }

I say that like everyone knows how to update the CSS on a dashboard.... :slight_smile:

To apply this, find out the tile Id you want to change on the dashboard by clicking on the 3 dots on the tile, the id is in the top left of the dialog. Close the tile editor and click on the cog icon, click Advanced, CSS and then enter the CSS you want to use, replacing the Tile Id's in any of my example (if you use it) with the tile id on your dashboard.

1 Like
3

Cool. So when I did that, it added the new title but didn't remove the old one.

This is a title button that says "Living Room Formula Classical Christmas." It's an imported Hue formula.

The Tile ID is 89 and here is what I inserted:

#tile-89 .tile-primary:after{ content: "Classical Christmas"; }

I think I'm almost there but just don't know how to replace instead of adding....

4

You need to hide the title, so:

#tile-89 .tile-primary:after{ content: "Classical Christmas"; }
#tile-89 .tile-title { visibility: hidden; }

I was wanting the text to inhabit the majority of my tile, I didn't want an icon. Another option that I just looked up is to essentially replace the title. You could try:

#tile-89 .tile-title::after {
    visibility: visible;
    position: absolute;
    text-align: center;
    left: inherit;
    right: 0;
    bottom: 0;
    white-space: pre-wrap;
}

#tile-89 .tile-title {
    visibility: hidden;
    white-space: nowrap !important;
    overflow: unset;
}
#tile-89 .tile-title:after {
    content: 'Classical Christmas';
}

This last option was originally posted here

4 Likes
5

OK, that did it! I Specifically, the longer, second one you posted was what I was wanting. I changed a few more tiles also and it worked. I don't exactly understand the individual components of the CSS code but as long as I copy-cut-paste it and change tile ID and put in the new name, it works!

Quick question - does the tile ID change if I move it around or change the tile type? I assume it won't change unless I were to delete and recreate it, yes?

6

Glad to hear you got it working. One tip, you can bundle some of the CSS together for multiple tiles, specifically the first two parts, e.g.:

#tile-89 .tile-title::after, #tile-90 .tile-title::after, #tile-91 .tile-title::after {
    visibility: visible;
    position: absolute;
    text-align: center;
    left: inherit;
    right: 0;
    bottom: 0;
    white-space: pre-wrap;
}

#tile-89 .tile-title, #tile-90 .tile-title, #tile-91 .tile-title {
    visibility: hidden;
    white-space: nowrap !important;
    overflow: unset;
}

You would then need to set their titles individually, and for neatness we could probably reformat it slightly:

#tile-89 .tile-title:after { content: 'Classical Christmas'; }
#tile-90 .tile-title:after { content: 'Rock Christmas'     ; }
#tile-91 .tile-title:after { content: 'Relaxing Christmas' ; }

And one more tip, comments often help, particularly as you end up with more and more CSS. You can see an example of this in my original response, with text enclosed by /* and */.

That's correct, it's only if you re-create it. There is a way to change the id that I have seen, but it wasn't a common set of steps.

2 Likes
7

Thanks, I'll try that. One more question - is there something you can do with the CSS to make the font size variable and proportional the tile size? I kept the tile size dimensions blank to make the dashboards conform to whatever screen I was using (I have different tablets in different rooms of different sizes). I can't seem to find a single font size that works for all of them - a variable font size based on the tile size in each device would work best.

8

Hmmm, not that I have seen, but that doesn't rule it out..... If I find anything I'll try and remember to post back here.

1 Like
9

For some reason when I bundle the CSS, the tiles are disappearing:

#tile-74, #tile-75, #tile-76, #tile-77, #tile-78, #tile-79, #tile-80, #tile-81, #tile-82, #tile-83, #tile-84, #tile-85, #tile-88, #tile-89 .tile-title::after {
visibility: visible;
position: absolute;
text-align: center;
left: inherit;
right: 0;
bottom: 0;
white-space: pre-wrap;
}

#tile-74, #tile-75, #tile-76, #tile-77, #tile-78, #tile-79, #tile-80, #tile-81, #tile-82, #tile-83, #tile-84, #tile-85, #tile-88, #tile-89 .tile-title {
visibility: hidden;
white-space: nowrap !important;
overflow: unset;
}

Is it because I haven't added the custom text yet or is there something else I'm doing wrong here?

10

No, that is something I did wrong :slight_smile: Let me edit the post, you just need to add the tile-title parts after each tile reference.

11

Try that...

12

Am I doing something wrong here? This is what I created based on your edited post and pasted into CSS. Nothing happened. Nothing changed. Even when I press "Save CSS" nothing happens. Do you see anything obviously wrong with this?

#tile-73 .tile-title::after, #tile-20 .tile-title::after, #tile-21 .tile-title::after, #tile-49 .tile-title::after, #tile-50 .tile-title::after, #tile-22 .tile-title::after, #tile-23 .tile-title::after, #tile-24 .tile-title::after, #tile-25 .tile-title::after, #tile-51 .tile-title::after, #tile-26 .tile-title::after, #tile-52 .tile-title::after, #tile-27 .tile-title::after, #tile-53 .tile-title::after, #tile-54 .tile-title::after, #tile-55 .tile-title::after, #tile-56 .tile-title::after, #tile-57 .tile-title::after, #tile-58 .tile-title::after, #tile-29 .tile-title::after, #tile-59 .tile-title::after, #tile-60 .tile-title::after, #tile-61 .tile-title::after, #tile-62 .tile-title::after, #tile-63 .tile-title::after, #tile-64 .tile-title::after, #tile-65 .tile-title::after, #tile-66 .tile-title::after, #tile-67 .tile-title::after, #tile-30 .tile-title::after, #tile-31 .tile-title::after, #tile-32 .tile-title::after, #tile-33 .tile-title::after, #tile-68 .tile-title::after, #tile-34 .tile-title::after, #tile-35 .tile-title::after, #tile-69 .tile-title::after, #tile-70 .tile-title::after, #tile-71 .tile-title::after, #tile-72 .tile-title::after, #tile-36 .tile-title::after, #tile-37 .tile-title::after, #tile-38 .tile-title::after, #tile-39 .tile-title::after, #tile-40 .tile-title::after, #tile-41 .tile-title::after, #tile-42 .tile-title::after, #tile-43 .tile-title::after, #tile-44 .tile-title::after, #tile-45 .tile-title::after, #tile-46 .tile-title::after, #tile-47 .tile-title::after, #tile-74 .tile-title::after, #tile-75 .tile-title::after, #tile-76 .tile-title::after, #tile-77 .tile-title::after, #tile-78 .tile-title::after, #tile-79 .tile-title::after, #tile-80 .tile-title::after, #tile-81 .tile-title::after, #tile-82 .tile-title::after, #tile-83 .tile-title::after, #tile-84 .tile-title::after, #tile-85 .tile-title::after, #tile-88 .tile-title::after, #tile-89 .tile-title::after {
visibility: visible;
position: absolute;
text-align: center;
left: inherit;
right: 0;
bottom: 0;
white-space: pre-wrap;
}

#tile-73 .tile-title, #tile-20 .tile-title, #tile-21 .tile-title, #tile-49 .tile-title, #tile-50 .tile-title, #tile-22 .tile-title, #tile-23 .tile-title, #tile-24 .tile-title, #tile-25 .tile-title, #tile-51 .tile-title, #tile-26 .tile-title, #tile-52 .tile-title, #tile-27 .tile-title, #tile-53 .tile-title, #tile-54 .tile-title, #tile-55 .tile-title, #tile-56 .tile-title, #tile-57 .tile-title, #tile-58 .tile-title, #tile-29 .tile-title, #tile-59 .tile-title, #tile-60 .tile-title:, #tile-61 .tile-title, #tile-62 .tile-title, #tile-63 .tile-title, #tile-64 .tile-title, #tile-65 .tile-title, #tile-66 .tile-title, #tile-67 .tile-title, #tile-30 .tile-title, #tile-31 .tile-title, #tile-32 .tile-title, #tile-33 .tile-title, #tile-68 .tile-title, #tile-34 .tile-title, #tile-35 .tile-title, #tile-69 .tile-title, #tile-70 .tile-title, #tile-71 .tile-title, #tile-72 .tile-title, #tile-36 .tile-title, #tile-37 .tile-title, #tile-38 .tile-title, #tile-39 .tile-title, #tile-40 .tile-title, #tile-41 .tile-title, #tile-42 .tile-title, #tile-43 .tile-title, #tile-44 .tile-title, #tile-45 .tile-title, #tile-46 .tile-title, #tile-47 .tile-title, #tile-74 .tile-title, #tile-75 .tile-title, #tile-76 .tile-title, #tile-77 .tile-title, #tile-78 .tile-title, #tile-79 .tile-title, #tile-80 .tile-title, #tile-81 .tile-title, #tile-82 .tile-title, #tile-83 .tile-title, #tile-84 .tile-title, #tile-85 .tile-title, #tile-88 .tile-title, #tile-89 .tile-title {
visibility: hidden;
white-space: nowrap !important;
overflow: unset;
}

#tile-73 .tile-title:after { content: ‘Formula Color Loop Art Niches’; }
#tile-20 .tile-title:after { content: ‘Scene Arctic Aurora’; }
#tile-21 .tile-title:after { content: ‘Scene Autumn Gold’; }
#tile-49 .tile-title:after { content: ‘Scene Blood Moon’; }
#tile-50 .tile-title:after { content: ‘Scene Blue Lagoon’; }
#tile-22 .tile-title:after { content: ‘Scene Bright’; }
#tile-23 .tile-title:after { content: ‘Scene Chinatown’; }
#tile-24 .tile-title:after { content: ‘Scene Concentrate’; }
#tile-25 .tile-title:after { content: ‘Scene Dimmed’; }
#tile-51 .tile-title:after { content: ‘Scene Emerald Isle’; }
#tile-26 .tile-title:after { content: ‘Scene Energize’; }
#tile-52 .tile-title:after { content: ‘Scene Fairfax’; }
#tile-27 .tile-title:after { content: ‘Scene Frosty Dawn’; }
#tile-53 .tile-title:after { content: ‘Scene Galaxy’; }
#tile-54 .tile-title:after { content: ‘Scene Golden Pond’; }
#tile-55 .tile-title:after { content: ‘Scene Honolulu’; }
#tile-56 .tile-title:after { content: ‘Scene Ibiza’; }
#tile-57 .tile-title:after { content: ‘Scene Lake Mist’; }
#tile-58 .tile-title:after { content: ‘Scene Lake Placid’; }
#tile-29 .tile-title:after { content: ‘Scene Nightlight’; }
#tile-59 .tile-title:after { content: ‘Scene Midsomer Sun’; }
#tile-60 .tile-title:after { content: ‘Scene Midwinter’; }
#tile-61 .tile-title:after { content: ‘Scene Moonlight’; }
#tile-62 .tile-title:after { content: ‘Scene Motown’; }
#tile-63 .tile-title:after { content: ‘Scene Mountain Breeze’; }
#tile-64 .tile-title:after { content: ‘Scene Nebula’; }
#tile-65 .tile-title:after { content: ‘Scene Ocean Dawn’; }
#tile-66 .tile-title:after { content: ‘Scene Osaka’; }
#tile-67 .tile-title:after { content: ‘Scene Palm Beach’; }
#tile-30 .tile-title:after { content: ‘Scene Read’; }
#tile-31 .tile-title:after { content: ‘Scene Relax’; }
#tile-32 .tile-title:after { content: ‘Scene Ruby Glow’; }
#tile-33 .tile-title:after { content: ‘Scene Savanna Sunset’; }
#tile-68 .tile-title:after { content: ‘Scene Soho’; }
#tile-34 .tile-title:after { content: ‘Scene Spring Blossom’; }
#tile-35 .tile-title:after { content: ‘Scene Spring Lake’; }
#tile-69 .tile-title:after { content: ‘Scene Starlight’; }
#tile-70 .tile-title:after { content: ‘Scene Sunday Morning’; }
#tile-71 .tile-title:after { content: ‘Scene Sundowner’; }
#tile-72 .tile-title:after { content: ‘Scene Tokyo’; }
#tile-36 .tile-title:after { content: ‘Scene Tropical Twilight’; }
#tile-37 .tile-title:after { content: ‘Scene Winter Mountain’; }
#tile-38 .tile-title:after { content: ‘Ceiling Scene Color Loop’; }
#tile-39 .tile-title:after { content: ‘Ceiling Scene Colourful’; }
#tile-40 .tile-title:after { content: ‘Ceiling Scene Eating’; }
#tile-41 .tile-title:after { content: ‘Ceiling Scene Eye Protection’; }
#tile-42 .tile-title:after { content: ‘Ceiling Scene Mediterranean’; }
#tile-43 .tile-title:after { content: ‘Ceiling Scene Meeting’; }
#tile-44 .tile-title:after { content: ‘Ceiling Scene Night’; }
#tile-45 .tile-title:after { content: ‘Ceiling Scene Pink’; }
#tile-46 .tile-title:after { content: ‘Ceiling Scene Reading’; }
#tile-47 .tile-title:after { content: ‘Ceiling Scene White’; }
#tile-89 .tile-title:after { content: ‘Formula Classic Christmas’; }
#tile-74 .tile-title:after { content: ‘Formula Color Loop Art Niches’; }
#tile-79 .tile-title:after { content: ‘Formula Dark Sunset’: }
#tile-78 .tile-title:after { content: ‘Formula Festival of Lights’; }
#tile-80 .tile-title:after { content: ‘Formula Dinner Party’; }
#tile-81 .tile-title:after { content: ‘Formula Oranges’; }
#tile-82 .tile-title:after { content: ‘Formula Over the Rainbow’; }
#tile-83 .tile-title:after { content: ‘Formula Sakura Blooming’; }
#tile-75 .tile-title:after { content: ‘Formula Scandinavian’; }
#tile-84 .tile-title:after { content: ‘Formula Summer Vibe’; }
#tile-76 .tile-title:after { content: ‘Formula Timeless’; }
#tile-85 .tile-title:after { content: ‘Formula Under the Sea’; }
#tile-77 .tile-title:after { content: ‘Formula Urban’; }
#tile-88 .tile-title:after { content: ‘Formula Winter Wonderland’; }

13

Perhaps I should actually test what I recommend... let me try a small example and post back shortly...

1 Like
14

Are you using a switch template for the tiles, or something else? I can't remember... It worked for me for both a switch and an attribute template....

Only other thing I can think of is, if you did add any comments like I mentioned, make sure you close the comment with the */ at the end of the comment.

And try refreshing the dashboard by clicking the green tick.

15

Yes, switch templates only. I didn't add any comments and I did refresh the dashboard. Still no luck. Let me try doing it one piece at a time and see if that works.

16

Pasting it in parts did not help either. I'm using the Apple text editor program if it matters. The complete CSS code is what I gave in the above posting - nothing else is there. Does any of it look wrong? I could go back to doing it one tile at a time but it's a lot of tiles in that dashboard.

17

OK so I tried this, and it made the existing text disappear but did not put the new text for the device tile

#tile-73 .tile-title::after {
visibility: visible;
position: absolute;
text-align: center;
left: inherit;
right: 0;
bottom: 0;
white-space: pre-wrap;
}

#tile-73 .tile-title {
visibility: hidden;
white-space: nowrap !important;
overflow: unset;
}

#tile-73 .tile-title:after { content: ‘Formula Color Loop Art Niches’; }

18

Try refreshing?

19

Done. Didn't help. Not sure what's wrong... this was working before.

20

So I went back and did this and it worked automatically, did not have to refresh:

#tile-73 .tile-title::after {
visibility: visible;
position: absolute;
text-align: center;
left: inherit;
right: 0;
bottom: 0;
white-space: pre-wrap;
}

#tile-73 .tile-title {
visibility: hidden;
white-space: nowrap !important;
overflow: unset;
}
#tile-73 .tile-title:after {
content: 'Formula Color Loop Art Niches';
}

What's the difference? All I did was copy cut paste this from your posting above