Change color of active icon?

Third party integrations AppDaemon
1

I have created a couple of dashboards that I can navigate between using the navigate-widget. I have set the icon_active and icon_inactive to the same icon and was expecting it to change color to highlight which navigate-widget I’m currently in when I navigate to the different dashboards but all icons remain white.

image

There is this in the css for my skin (dashboard.css) which I thought would cause the icon of the dashboard I’m currently in to change color:

.icon-inactive {
  color: #888;
}

.icon-active {
  color: #aaff00;
}

Anyone know how to achieve this kindof highlighting?

2

Some widgets have the icon_style_active and icon_style_inactive arguments where the icon color can be set.
icon_style_inactive: "color: green"
The navigate widget has only a icon_style argument
Don’t know if this works.

3

Ok, I found that in variables.yaml for my skin I can set the “active” style. But this only affects the icon right after I clicked it. I have set the active icon to “fa-spinner fa-spin” now and that shows a nice spinning animation when I click a button to navigate to another dashboard. But when the dashboard I navigated to finishes loading I would like it to have a widget icon that is highligted in a different color so that I can easily see which dashboard is active.

4

an active state from an icon is different with a widget like a switch (on or off)
but with navigate you activate the button and then another page gets loaded.

you have several dashboard (obvious)
and in each dashboard you have the same 3 buttons.

you could do it like this:

set the color from your home navigate button to green in the home dashboard
set the color from your control navigate button to green in the control dashboard.

but its actaully a bit foolish to have a navigate button to home in your homedash.
i would use a label instead.

5

Yeah, I thought of that too but liked the idea of just including the same menu-bar on all my panels (also the reason for a navigate button to home in my home dash, so I can just include menu.yaml on all panels).

6

I have this on my to-do list.

1 Like