HSM Button

[Haven]

I'm certain the answer is NO, but are we able to customize the HSM Tile in Hubitat Dashboards so that only these options appear?

I like the way this tile works, looks and even works well with the pin pad but I only have Disarmed, Home and Away modes so I don't need the other buttons.

I've found a few old posts with no answers or just alternate methods like creating PIN protected buttons. This could indeed be a solution, but I'd rather use built in functionality if possible.

Thanks!

[Rxich]

I don't think you can edit, but you can build your own custom buttons

[Haven]

Figures. Would I be able to create a single button that houses three mode options? Or would it have to be one button per mode? If it's the latter, can the button Icons and Colors change based on the status of the alarm?

[Rxich]

There are so many talented developers on here and if I recall correctly someone did just that, but there is so MUCH content here, it'd be hard to find. There are also many 3rd party apps that allow you to have multi function buttons and maybe a control dash that you like better. Take a look at HD+ by Joe Page, it's free, no ads
I hope you're on Android..

[RELEASE] HD+ - Android Dashboard

**[RELEASE] HD+ ** [image] What is it? A native Android app for viewing and controlling your Hubitat devices. Features Easy to login - 1-click login will auto discover the Hubitat Hub Full screen - ideal for wall-mounted tablets Keep the screen on during the day and turn it off at night (Configurable) Flexible - fully customize the interface (icons, tile size, text size, colors) All traffic is LOCAL to your network. No 3rd party server is used. There is also a remote access option (us…

[Haven]

I want to circle back to this and report that I've found a solution. Here is the end-result and below is the CSS.

/*--------------------------------------Modify HSM Pop-Up---------------------------------------*/
/* Remove Extra Options from HSM Pop-Up Menu Child(2) is Arm Nights, Child(4) is Arm All Rules, Child(5) is Disarm All Rules, Child(7) is Arm All, Child(8) is Cancel All Alerts */
.flex-row div.md\:w-1\/2:nth-child(2) > div:nth-child(1),
.flex-row div.md\:w-1\/2:nth-child(4) > div:nth-child(1),
.flex-row div.md\:w-1\/2:nth-child(5),
.flex-row div.md\:w-1\/2:nth-child(7),
.flex-row div.md\:w-1\/2:nth-child(8)  > div:nth-child(1),
.flex-row div.md\:w-1\/2:nth-child(9) {
    display: none;
    font-family: Trebuchet MS;
    width: 100%;
}

/* Adjust pop-up window size */
.popup-content {
    width: 40%;
}

/* Adjust button size */
.flex-row div.md\:w-1\/2:nth-child(1),
.flex-row div.md\:w-1\/2:nth-child(3),
.flex-row div.md\:w-1\/2:nth-child(6) {
   width: 100%;
   font-family: Trebuchet MS;
   font-weight: bold;
}

/* Remove Events and Alerts */

div.text-lg > div.w-full.flex.p-2:nth-child(2) {
  display: none; /* or visibility: hidden; */
}

[scubamikejax904]

This is awesome, Anyway you can point me in the right direction for doing this for Fan switches? I am trying to remove everything but on, off, High, Medium, low.

[Haven]

I modified the code a bit so that it wouldn't impact other screens. Now the changes are just isolated to the HSM Pop-Up.

/*--------------------------------------Modify HSM Pop-Up---------------------------------------*/
/* Remove Extra Options from HSM Pop-Up Menu Child(2) is Arm Nights, Child(4) is Arm All Rules, Child(5) is Disarm All Rules, Child(7) is Arm All, Child(8) is Cancel All Alerts */
.flex-row div.md\:w-1\/2:nth-child(2) > div:nth-child(1),
.flex-row div.md\:w-1\/2:nth-child(4) > div:nth-child(1),
.flex-row div.md\:w-1\/2:nth-child(5),
.flex-row div.md\:w-1\/2:nth-child(7),
.flex-row div.md\:w-1\/2:nth-child(8)  > div:nth-child(1),
.flex-row div.md\:w-1\/2:nth-child(9) {
    display: none;
    font-family: Trebuchet MS;
    width: 100%;
}

/* Adjust pop-up window size */
.popup-content {
    width: 40%;
}

/* Adjust button size */
.flex-row div.md\:w-1\/2:nth-child(1),
.flex-row div.md\:w-1\/2:nth-child(3),
.flex-row div.md\:w-1\/2:nth-child(6) {
   width: 100%;
   font-family: Trebuchet MS;
   font-weight: bold;
}

/* Remove Events and Alerts */

div.text-lg > div.w-full.flex.p-2:nth-child(2) {
  display: none; /* or visibility: hidden; */
}

[Haven]

Hey Mike,

I'm not an expert, but here's what I was able to find so far. These are essentially child divs within the fan's pop-up. Just replace the tile number with yours and it should work.

• Child number 3 is Medium Low
• Child number 5 is Medium High
• Child number 7 is Auto

/*--------------------------------------Modify Fan Pop-Up---------------------------------------*/

#tile-9 div.options.w-full.text-lg div.shadow-md:nth-child(3),
#tile-9 div.options.w-full.text-lg div.shadow-md:nth-child(5),
#tile-9 div.options.w-full.text-lg div.shadow-md:nth-child(7) {
  display: none;
}

If you wanted to play around with the Font or the Width of the Pop-Up, you can use:

#tile-9 .popup-content {
   width: 25% !important;
   font-family: Trebuchet MS;
}

Just make sure you test your mobile, tablet and desktop views to ensure your pop-up doesn't end up being too small for either. 

To identify the children, just right click on the object and then hit inspect and once you head into the css inspector right click again and go to copy CSS Selector and CSS Path. Paste those onto a note and you can start to read what divs/classes to use to modify the objects. I'm using FireFox so your browser may be different.

Hope this helps!

[scubamikejax904]

@Haven this is perfect Thank you so much for your help and instructions on identifying the children

[Haven]

Glad it helped! Best of luck