On a separate topic... Has anyone ever played with dynamically adjusting the size / shape / location of tiles? I'm wondering if I dig into what smartly offers in the drag and drop feature, that may give me something....
Do you know what the CSS code would be to remove this for a specific tile/device instead of all thermostats? (i.e. so I can adjust a vThermostat for a smart vent to remove the mode/only leave the temperature setting, but have the actual mode options for the real thermostat)
Nvm, figured it out...
#tile-98 div.my-1 {display: none !important;}
3 Likes
Okay, temperature and humidity tiles... I for the life of me can't figure out how to adjust the size of the temperature and humidity read outs on the tiles - I have the font overall for the dashboard increased, but that makes the temperature and humidity readouts wayyy too big, and it doesn't fit onto one line.
Here's the inspector code for the temp tile:
Here's the inspector code from the humidity tile:
I figured it'd be the tile-primary that's being edited, but when I try that (e.g. #tile-156 .tile-primary {font-size: 16px;}), I get nothing... Any help would be much appreciated!
How many times must one fail before figuring it out?
#tile-158 .tile-primary {font-size: 20px !important;}
Needed to include !important;
1 Like
You may be interested in my CSS Editor which allows some text adjustments like fonts and alignment.
In doing some CSS research, I actually came across your app... But I already have most of my dashboards setup how I would want them, so a bit late in finding it! Thanks for the tip though.
I do have one thing I'm still trying to work out though... Hiding unused fan speeds from the drop-down list. I have a whole house fan I'm controlling with a ZEN17 and have it configured as a virtual fan switch, and I only want Low, High, and Off for options. Does anyone know how to hide unused fan speeds from the drop down list? Or @sburke781, can this be accomplished with your Simple CSS Editor driver?
Here's the inspector code from the above drop-down list:
If we were able to [set supported fan modes like you can for virtual thermostats](https://community.hubitat.com/t/virtual-fan-controller/82203/4), that would be a way I could see just removing the options from populating in the dashboard tile's drop-down menu...
@FormosaWest - maybe what you were referencing in this thread would apply for virtual fan switches too? Any thoughts?
Sorry @nathaniel.knautz , was about to respond to your earlier question re fixing panes and noticed I somehow missed your question above about Fan Speeds. I wouldn't have expected the list is likely to be editable via CSS, though the post you linked may be worth a look..... I certainly don't have anything pre-developed for you to easily achieve this, but if someone can get it to work by writing the CSS code I'd consider adding it to the editor I have developed.
totally noob question here… is there a way in CSS to change the shape of a specific dashboard button from the default square/rectange to, say, an oval?
Yes, it's possible. I did this so long ago I forgot how I did it. I assumed I used CSS but when I checked it there is only 1 thing in there and it's for the title alignment. If your on android, I have been using @jpage4500 app for quite some time. But I think I did this with a combo of grid size and rounded corners. My rounded is set at 77 and I built this specifically for my phone.
Border-radius is what you are after. I'll get an example later after work if you can't find one. It won't do oval though...
1 Like
Even if it’s some other non-square shape, it should work for my purposes.
I’m not using Android and just to clarify, I want to change the size of only some buttons in a given dashboard and not all.
By the way, I’m just “typing out loud” here, but it would be my ultimate dream to make my dashboards look like one of those computer screens from Star Trek The Next Generation complete with beeps whenever a button is pressed.
Just saying….
1 Like
Yeah, sorry, I glazed right over specific tile. Sadly, this will provide no help, but it does seem possible. I created scene tiles with the top corners rounded but the bottom were not. I scanned over my CSS and I have no idea how I did that. It was definitely from community help but it looks like this.
So, it would seem it's possible. If you round the bottom corners as well, that would look somewhat like an oval to me. No doubt sburke781 will come back with a solution.
Someone has created a Star Trek themed board. I cannot remember where I've seen it but I believe it's in this thread Show Off Your Dashboards!
1 Like
Well, through sheer dumb luck, I figured it out...
Before:
Added the following to CSS (3, 4, 5, and 7 corresponding to the rows I wanted to hide):
#tile-163 .flex div:nth-of-type(3), #tile-163 .flex div:nth-of-type(4), #tile-163 .flex div:nth-of-type(5), #tile-163 .flex div:nth-of-type(7), #tile-163 .flex div:nth-of-type(8) {display: none ; !important;)
Result:
3 Likes
Try this
#tile-5 {
border-radius: 25% !important;
}
Change the tile number to the one you want to modify and change the border-radius percentage to define the way you want the button to change, 50% will get you a circle, from there you can taper back whatever percentage you like.
by the way if you want oval you will need to change the height and width like so
#tile-5 {
border-radius: 50% !important;
height:90px;
width:200px;
}
2 Likes
Thanks, this might be what I want, but I'm not sure exactly where to insert it. In my first try it created some weird results. Here is a sample CSS code for just one of my buttons. Where exactly would I put the lines above?
#tile-135 .tile-title::after {
visibility: visible;
position: absolute;
text-align: center;
left: inherit;
right: 0;
bottom: 0;
white-space: pre-wrap;
}
#tile-135 .tile-title {
visibility: hidden;
white-space: nowrap !important;
overflow: unset;
}
#tile-135 .tile-title:after {
content: 'Formula Scandinavian';
}
Click the settings cog on the dashboard, select the advanced tab, then CSS. You can add the custom css there.
What I mean was, where in the tile code (given above) in the CSS screen do I put the new lines?
