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

Could you use iOS Shortcuts to periodically open the URL ?

Use: Safari > "Open URLs"

If the URL is already open it will refresh the existing tab instead of opening a new one.

2 Likes

I am using transparent tiles to make underlying tiles "read only". Is there a way to force the transparent to be "on top" of all other tiles? With simple playing, it looks like the tile-ID is the front to back order with a higher ID being in front.

You need to adjust the z-index of both tiles. I'll find an example

Oh, and there a couple of tricks with the order of tile creation and ways to mess with the id, but a z-index is more explicit

1 Like

Thanks.

I searched for "above" and "hierarchy", but "z-axis" never dawned on me.

there are certain techniques that can be used, and can be browser dependent. refresh won't always work, but most often the javascript technique does.

from: Refresh the Page in JavaScript ā€“ JS Reload Window Tutorial

" This will load the page and take us to the previous page we navigated to. But if we only want to refresh the current page, we can do so by not passing any parameters or by passing 0 (a neutral value):

history.go();
history.go(0);
``` ""

Added this under ā€œCSSā€ but unfortunately, I still needed to manually refresh.

Good idea! Iā€™ll give it a try next.

sorry to interject - but under CSS... that confused me. pretty sure it would need to be outside the css in it's own pair. or in the header ala:
<html> <head> <script> function myFunction() { document.getElementById("demo").innerHTML = "Paragraph changed."; } </script> </head> <body>

This is related to the page refresh right? can't call a refresh from within the object...

I have been looking but can't find a way to make the thermostat tile in Hubitat scale up. My wife said she can't read the text between the up and down touch points. I made the tile 2 x 3 and then started to poke around but nothing I have tried would increase the size of the font where the current set points are. Any suggestions on what CSS attributes could be used. Here is what I have on my dashboard below:

I'm pretty sure @ymerj and @chad.andrews (and others) have worked with thermostat tiles quite a bit, so they may be able to help.

1 Like

I'm far from an expert but I would use this:

#tile-0 .heating.pt-1.w-full>.inline-block {font-size: 3vh !important;}

But I'm not sure it would work on a different thermostat mode. Like @sburke781 says "Others may be able to help" better then I can.

edit: change tile-0 for your tile number and choose a vh size that suit you.

1 Like

Probably one thing to look at would be trying to identify the text without the reference to the operating state (heating). Not sure if it is possible....

1 Like

This is what I found so far with the debugger:

image

But right now the thermostat is calling for heat I will need to see change changes when idle and calling for cooling.

I totally agree, but have no idea if/how I could do that on a dashboard - are you aware of a way to do this?

Have you tried to attack the .inline-block on the tile like this?

#tile-XX .inline-block {
       font-size: 14px !important;
}

Not sure how that will affect the rest of the text, just a thought.

Hi, have you looked into installing an extension on safari that you can set the autorefresh on, like this one?

1 Like

I didnā€™t, but I checked it out - it requires iOS 15 and unfortunately, I donā€™t have it on my old iPad Miniā€¦ :disappointed:

@ronv42 how big do you want it? lol. replace my px numbers to suit your needs.

/*All Thermostat Mode Buttons Adjust*/
.thermostat .inline-block {font-size: 40px !important;}

/*All Thermostat Button Resize*/
.thermostat .pl-3 {font-size: 55px !important;}
.thermostat .pr-3 {font-size: 55px !important;}

/*All Thermostat Top Description Resize*/
.thermostat .p-1 {font-size: 55px !important;}

/*All Thermostat Bottom Description Resize*/
.thermostat div.absolute.bottom-0.text-center.w-full {font-size: 55px !important;}


4 Likes

Thanks this works great. Now the wife will be able to see what the thermostat is set to on our tablets.

image

3 Likes

Handy bit of CSS. very useful, thank you!

3 Likes

This worked great for me. Thanks! :+1:t2:

Is there a way to remove or hide any elements/attributes on the media player tile?

I'm using it with Sonos but would like to remove the mute button and song title, artist name etc. To make it less cluttered.

Thanks in advance.

Mike.

1 Like