Dashboard-link and tile color

🛎️ Get Help
1

Hi guys,

I'm rebuilding my dashboard and for the frist time trying to use dashboard links.

I would like to create a master dashboards with links to different rooms.

However the challenge hereby is that I would like my dashboard-link tiles to change color (say from grey to yellow or blue) whenever a device (e.g a light) is switched on "within" those tiles.

So that from the master dashboard I can easily see if there's still something switched on and in what room.

Is that possible?

Best regards!

2

It's not possible right now but you can cheat by making the link dashboard transparent and out it on top of another template. Then use RM or Smart lighting to tie them together.
Or hopefully a CSS guru will chime in.

1 Like
3

Ok so if I get this right: I put a virtual switch tile underneath the dashboardlink-tile and have it turn yellow whenever a device in that room is turned on.

But: this would make the tile turn yellow by just accessing the dashboard-link. Eventhough I might not turn on a device, right?!

4

The virtual device will be yellow as long as any device in the rule is ON regardless of you turn it on. Other automation turning it on will also make it yellow.

5

Ok I think I get it! I will try this out. Thanks!

1 Like
6

The newest tile added will be the one which works, so add the virtual first, then overlay with the link :+1: I'm liking your idea on this though :wink:

7

I'm sorry. I'm stuck again. How do I make the dashboard-link tile transparent? And how can I make all the text dissappear so that it doesn't overlay with the text of the tile underneath?

Thanks!

8

Ok, I had some funny issues with this but have been able to do it.
Someone else may know an easier way?

  1. Add all your virtual switches which will show if any device in the location is on etc, I added a custom icon for each as it makes step 2 easier

  2. Edit the Layout json, in the "Advanced" tab, and set the custom icon of the virtual switches to "blank" this wont show the switch icon after.

    "tiles": [
    {
    "rowSpan": 2,
    "template": "switches",
    "col": 1,
    "colSpan": 2,
    "id": 0,
    "row": 1,
    "device": "6123",
    "customIcon": "blank"
    },

  3. Once all virtual tiles are added, set you colours for on/off etc. via the Template for Switches

  4. Add Links to the same locations to overlay the switches you added (not Dashboard links, but as below with the URL to the dash, and name it as needed

image
image.png955×439 15.2 KB

(this was the best way I found to make it meaningful, Dashboard links still displayed the name)

  1. Edit the CSS, through Advanced->CSS and add this for each virtual switch you added (change the coordinates accordingly) This example is Tile 1 is row-start= 1, column start= 1 and has a width and hight of 2. So row end =3, and column end = 3.

     /*"row-start / column-start / row-end / column-end"*/
 /*Lounge*/
 div[style*="1 / 1 / 3 / 3"] .tile-title {
 	visibility: hidden;
 }

Using the "Link" as opposed to "Dashboard Link" seems to make it look prettier.

  1. Set the transparency of the "Link" template to this.
    image
    image.png1405×1001 122 KB

My tile now looks like this.

When all devices are off.

image
image.png735×610 3.01 KB

When any device is on.

image
image.png736×600 2.79 KB

I also set my options as below.

image
image.png1438×586 45.7 KB

And thanks for sharing the idea, I'll be setting my dash the same way now :smiley:

2 Likes
9

Many thanks for this detailed answer! I'm very close to successfully following your tutorial. However I can't remove the device name at the bottom of the tile.

I really don't know anything about coding so I might be doing something wrong....I just copied your code into the empy css field, replaced lounge with the name of my virtual switch and changed the coordinates.

After that when I click save the name of the device is still there though.

1 Like
10

Try making the first tile 2 width and 2 height, and make sure its at the top left hand side.
The name on the tile is coming from the "Link" name provided in the overlaid tile.

11

Ok. So if I do this with the first tile it really works. However the moment i put the tile in row 3 and change the code to 3/1/3/3 it doesn't work anymore.

What does this css code do exactly?

12

The section of the numbers relate to the postion start and end of the tile.
It took me a while to get my head around it too. But take a look at below, hopefully this helps.

You adjust the location to suit, or add the section

		/*"row-start / column-start / row-end / column-end"*/
	/*Lounge*/
	div[style*="1 / 1 / 3 / 3"] .tile-title {
		visibility: hidden;
	}

image
image.png1348×856 10.5 KB

If you use double width or height tiles, then adjust accordingly :+1:

3 Likes
13

I too had some trouble wrapping my head around this. Especially with the 2nd set for different size tiles and then I kept moving them. So add Row + Height and Column + Width for the end tile position. Sadly, this was not so obvious for me at first as I'm sure it was for most.

1 Like
14

Thanks a lot! Thanks to your chart I got it right.

I'm really glad about how this is working now!

1 Like
15

Noob question... Is there a way to hide the hide the "Icon Helper Text" on a per tile basis instead of on a global "dashboard" basis?

Thank you in advance!

16

That's crazy I was looking for the same feature as I too have a switch to tell ME if all doors are closed.
I again am looking for deep nesting of dashboard links.
Also it would be nice to change it's template use.
For example in individual dashboards to make a switch a dashboard link .
And just as dAnderson requested a per tile config

17

You can yes, like below.

#tile-63 .tile-secondary {
visibility: hidden;
}
#tile-63 .tile-secondary:after {
content: 'My Front Door';
}

More information here from @rocketwiz

1 Like
18

This topic was automatically closed 365 days after the last reply. New replies are no longer allowed.