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

đŸ“± Mobile Apps
730

Yep.... Sadly it didn't work... But all options are welcome....

#tile-0 > div.tile-title {visibility: hidden;}

731

that is so odd... This one works for me as well.

#tile-3 .tile-title {
    display: none !important;
}
732

For a variable tile?

1 Like
733

lol, copied the wrong one

try this


#tile-11 .tile-title { visibility: hidden !important;
}
734

Sadly not. From what i have looked at in the Chrome Dev Tools, we need to work out the CSS equivalent of nested second Div's....

735

Hopefully, this is it, or at least on the right track. The previous example used variable number, I changed it to a variable string and was able to hide it using

#tile-11 > div.flex.flex-col.w-full.text-center.h-full > div.flex-grow-0.w-full {
   visibility: hidden;
}

I'll be gone for several hours hopefully someone has figured it out by then if this doesn't work.

1 Like
736

That worked!! Thanks.

I am still keen though to try and use something a little less tied to the various classes applied by HE, but it's good to have a working version that we can refine.

1 Like
737

I couldn't agree more.

1 Like
738

I’m looking for a way to auto-refresh a dashboard - Is this actually possible?

Some background:
I have an iPad Mini that I use as a mounted dashboard with the same Hubitat dashboard always displayed. The issue I face is that it after a period of time, it stops updating/refreshing. Pressing the green checkmark reloads/refreshes it and it works again. I would like to find a way to automate this
 Any ideas?

739

I am also interested in working this out, though it may be a while before I get to it...

In terms of something that we could develop, I expect it would require some form of Javascript to automatically trigger the click event on the green tick, something similar to another dashboard utility I have looked at recently...

The simpler option (maybe) would be to see if you can achieve this through another app on the tablet. The kind of thing I am thinking of is something like Fully Kiosk (without knowing if it can do this or can be run on an iPad). Other options on Android could include things like Tasker, but again, not sure if there are similar options available on Apple's devices. Hopefully you get where I'm heading.... just not sure of the options in your case.

1 Like
740

Normally placed in the <head> section, but might work outside of it:

<meta http-equiv="refresh" content="30">

or maybe

<script type=“text/javascript”>
secondsToPause=30 ;
setInterval(function(){location.reload(true);}, 1000*secondsToPause);
</script>
3 Likes
741

That might be an option. I currently use Safari in full screen mode, but if @thebearmay’s recommendation doesn’t I’ll see if I can find something.

Thanks! I added the 2nd option to the CSS section and it saved. Will see if it seems to work and will report back.

2 Likes
742

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
743

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.

744

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
745

Thanks.

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

746

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);
``` ""
747

Added this under “CSS” but unfortunately, I still needed to manually refresh.

Good idea! I’ll give it a try next.

748

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...

749

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:

image
image882×534 116 KB