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!
I don't think you can edit, but you can build your own custom buttons
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?
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..
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; */
}
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.
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; */
}
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.
/*--------------------------------------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!
@Haven this is perfect Thank you so much for your help and instructions on identifying the children
Glad it helped! Best of luck
This doesn't work. As soon as I do something in HSM, for example, disarm all, the buttons change and now I have Arm night instead of Arm away visible. Nice attempt! I wish they'd stop dedicating time to "Smart dashboards" that don't allow any real customization and actually improve the real dashboards. We need the ability to customize pop-ups such as this HSM menu.
This does work. Mind posting a picture of what you’re seeing and your code?
I pasted your exact code. It does NOT work properly. As soon as I perform a function such as "disarm all" the order of the buttons in the HSM popup changes. Try it yourself and you will see. Appreciate your work though! Not sure if there is a way around this. I was trying to identify specific buttons in this menu in order to have the pin entry keypad automatically pop up as though I had pressed the "disarm" button when HSM is in delayed-entry. I ran into the same problem where the "disarm" button would become the "arm home" button or another as their position changes in the DOM based on which one you have used last. I had to use a javascript injection on my tablet that reads all of the button labels in order to determine which is which each time - and that worked. I do not believe there is any way to do that in CSS alone.
You're right, I had not experienced this in the past when I had tested it. That's weird, I wonder if something changed. I was testing it out just now and it looks like the list is not being directly tied to a section of the container like before. I'd have to tinker with it to see if I can find a way to make it worth. I'm not a CSS programmer by any means, just lots of community post reading, google and gemini/chatgpt to help with what I've been able to put together for this case.
I gave up on using this to manage my security because at some point I started to feel uneasy with having the unofficial app connected to Ring not knowing if at any moment the API may get taken down. Additionally, my camera's were only sending 1s snapshots and that wasn't going to solve my needs which were to live stream.
Glad you were able to find a better solution!
Appreciate your reply! I also am just learning CSS / Javascript here with help from ChatGPT. I don't understand why the Hubitat guys ignore these issues and move on to things like "EZ Dashboards" that can't even come close to what we can do with the old "real" dashboards as I like to call them. They could improve on them SO SO much.
I 100% agree, especially when things could have simply been enhanced to allow for a better experience without having to create a totally new dashboard app. For example, HSM should be customizable so that you select which modes to control.
Fan buttons, should also be customizable in the sense that we should be able to select if we want the fan speed to just be low, mid, high or off and we should also be allowed to select whether the fan has a light or not so that we can tie both the fan and switch to the same dashboard button.
I'm sure these aren't significantly difficult things to program since we're all able to do it ourselves via CSS.
At least my custom fan controls aren't moving around when I click low, mid, high or off. I'm sure that with some tinkering on the CSS and some custom rules I can also get it so that if I click the Low-Medium speed (or whatever other speed setting I don't use) it would turn on the light and then a similar workaround to reversing the fan (if the switch/driver allows for it).
Download the Hubitat app
