Special Switch Template in Dashboard to mimic Modes

[dan1]

I am trying to do something that's been discussed from different angles many times.

Since modes are singular, I need a second 'thing' for the second mode. I could use a virtual switch or 2 virtual buttons.

I use modes for Home and Away which I can reference extensively in Rule Manager to change the behaviour of the automations.

I cannot have a Day & Night mode on top of that. So, what I have been doing is having 2 buttons, Good Morning & Good Night, which execute their respective automations. The problem is that there is no indication on the dashboard as to whether it is Day or Night.

I could use a virtual switch, which would be "on" for day, and "off" for night, then just run automations on the state change. The problem with this approach is that I use the Switch template extensively on the dashboard - and ideally this day/night virtual switch would have different colours and different state icons. (In a perfect world if the D/N virtual switch was in Day mode I could turn the background sky blue & show a sun; if in night mode, change the background to black and show a moon?)

Is there a way to clone the Switch template in the dashboard so I can customize the look & feel?

(If I could do this, I'd probably abandon the Modes altogether and just reference the state of one or more virtual switches)

[neonturbo]

Why not add modes to cover these situations? I have 5 modes.

• Day and Home
• Day and Away
• Night and Home
• Night and Away
• Sleep

My modes are determined by sunrise/sunset for Day and Night, and Home/Away is by presence. Sleep is a bit more fixed, from 10 PM to sunrise so lighting and other automations are more appropriate for this quiet time.

Via the Modes template in Dashboard you can easily change between these modes.

And when I click on that button it expands to show:

The only thing this doesn't do that you asked for is to change colors to match modes.

[dan1]

This is definitely an option - however it seems very kludgey to me.... (and does not readily show the status)..

[sburke781]

You can include some CSS to override the template colours for a single tile. Have a look around for some examples or I can find one if you get stuck.

For the icon there might be a similar override available, but I would have to check.

[dan1]

Thanks for the reply! So I've gone down the rabbit hole of adding CSS to change the look of an individual tile, and I'm close but I can't quite nail it.

(The Tile ID I'm working with is 57)

If I do this:

#tile-57 .on {
background-color: blue !important;
}

#tile-57 .off {
background-color: black !important;
}

I get almost the behaviour I want, but the image looks weird:

Now, I read a number of threads, many of which you replied to - I tweaked the CSS a bit, if I do as somebody said in this post:

Custom dashboard colors per dashboard

That is the fallacy of the switch tile. if you don't mind testing a few changes to see if we can get rid of the box in the box. So that you don't have to clear what you already have done, comment them out, then copy and paste the following: /* ON */ #tile-2[style*="background-color"] { width: 120px; height: 120px; background-color: red !important; animation: animate 1s linear infinite; } @keyframes animate { 0%{ opacity: 0.3; } 50%{ opacity: 0.7; } 100%{ opacity: 0…

/* ON /
#tile-57[style="background-color"] {
background-color: blue !important;
}
/* OFF */
#tile-57 {
background-color: black !important;
}

The tile looks fine, but there is no way to reference the on or off state.... it just stays blue regardless of state.

I also cannot figure out the attribute to show a custom icon (even one from the default repository) that I can reference in the CSS? customIcon does not seem to have any effect.

[sburke781]

Nice work... And well spotted re the CSS topics...

Let me see what I can find over the next few days....

Part of it is likely the earlier conversations in the NOOBs thread about updating the Templates section to set the color of the On/Off states, likely wanting to set just one state instead of both.

[william2]

@dan1

/* ON*/

Yeah, this is one of those odd tiles that always wants to be different
Yours isn't working because you are missing the asterisk after, it should look like this:

[style*= 

/* Change the color of the button when turned on */

#tile-57[style*="background-color"] {
  width: 120px; 
  height: 120px;
  background-color: rgba(25,25,112,1) !important;
}

Here is an example for custom icons:

/* Hide the original icon */

#tile-2 .he-bulb_on:before {
  visibility: hidden;
}

/* Add a new icon when the light is turned on, format it, move it to the left and up */

#tile-2 .he-bulb_on:before {
  visibility: visible;
  font-family: 'Material Icons' !important;
  content: "wb_incandescent";
  font-size: 30px !important;
  color: rgba(125,209,233,1) !important;
  position: relative;
  top: -25px;
  left: -25px;
  background-color: rgba(255, 255, 255, .75);
  border: 1px solid rgba(255,255,255,1);
  padding: 5px;
  border-radius: 25px;
  box-shadow: 1px 1px 10px 1px rgba(255,255,225,.70);
  border-color: 1px solid rgba(250,128,114,1) !important;

}

Hopefully, this helped, if not, as @sburke781 mentioned there is a huge amount of information over at the noob thread. We all have either contributed or learned from it as well.

[sburke781]

@sburke781

Let me see what I can find over the next few days....

I'll admit I didn't look any more once @william2 so expertly provided (I hope) the solution....

[dan1]

Thanks for the reply! Yes, I put the star in and it works to turn the tile blue (when it's on) - I can't figure out how to give it a custom colour when it's off? This code leaves it blue in both the on and off state..

[william2]

@dan1

off

off should be a simple background-color change, make sure you have !important; is in there or it won't respect the change.

background-color: rgb(57,57,76) !important;

[dan1]

Hmmm - I have this code in there, should this work? (It just stays blue)

/* ON /
#tile-57[style="background-color"] {
background-color: rgba(25,25,112,1) !important;
}
/* OFF */
#tile-57 { background-color: rgb(17,17,18) !important; }

[sburke781]

It could be the forum messing with your pasted code, but are you missing a star just after the ON at the beginning of the code-snippet? i.e. closing the comment? Although, I wouldn't expect that to affect the Off override, more the ON.... Hmmm...

[dan1]

LOL - yes ,it is the forum messing that up. There is a star thre:

Here is the code as a screenshot

[sburke781]

Looking back at my discussion with @william2 about this

The Noob's (in)complete guide to CSS for Hubitat

That's right. I believe what is happening there is that the DIV with the tile-primary class sits inside the larger tile DIV, so the change to the background-color is only being applied to the smaller / inner DIV, not the entire tile. I found one of the earlier posts from @BrianP that I had in mind, which is very similar to what you started with. One thing that is missing from this specific post, and I believe is what makes this work, is that you need to set the default colors in the templa…

and at your code above, I think your ON is trumping the OFF override, and changing them around would simply result in the off color being set all the time. I think if you want both colors overridden you need to be more specific and search for the exact color like is linked in my post above

The Noob's (in)complete guide to CSS for Hubitat

Maybe adapt my suggestion for the linear-gradient above: div.switch[style*="background-color: rgba(250, 242, 0, 0.87)"] { background: linear-gradient(red,yellow); } change it to something like: #tile-1[style*="background-color: rgba(200, 0, 0, 0.67)"] { background-color: rgba(0, 200, 0, 0.67) !important; } #tile-1[style*="background-color: rgba(0, 200, 0, 0.67);"] { background-color: rgba(200, 0, 0, 0.67) !important; } That should switch the color from red to green and green to red…

utilizing the colors from the template in both searches, potentially for both on and off.

[william2]

@dan1

should this work?

This should work for you. I would tell you what was wrong but then what fun would that be Hint: compare your snip with this one

/* ON */
#tile-8[style*="background-color"] {
background-color: rgba(25,25,112,1) !important;
}
/* OFF */
#tile-8 { background-color: rgba(60,60,60,0.4) !important;
}

[dan1]

Flipping around the On and the Off? I have tried it both ways, and it stays blue regardless..

Here is the code, screenshot so the forum doesn't chew it up:

(I see you used different rgba values with the opacity at 0.4)?

[william2]

@dan1

blue regardless

Wait, are you saying that after copying what I sent you it still didn't work?

[dan1]

yeah, still didn't work...

[sburke781]

Might be worth capturing your full Custom CSS and any Template overrides. I'll admit, with no other CSS for my tile or Switch overrides, @william2 's code does in fact work So there must be something else going on....

[dan1]

This code is the only thing in my custom CSS... See attached screenshot: