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

You mention that you had added some Custom CSS, That's what I was interested in seeing.

Ooww you meant the custom CSS I "wrote" for hidding some stuff. Here is the screen shot of that.

Really nothing special here... I think. :slight_smile:

I'd agree, probably nothing special... Hiding elements doesn't stop them consuming the space they occupy, but that doesn't entirely explain what you are seeing. Perhaps you could try removing the Custom CSS you posted to see if anything shows up....?

Without the custom CSS, things look like this:

afbeelding

The on-page CSS code now looks like this:

Which is again showing 1 extra attribute on TileID 13. I checked the CSS of the other Thermostat tiles, and they all have the same structure are TileID 12.

I think I may have found something... The underlying thermostat devices diver... I have 4 running against a Eurotronic TRV, I have 1 running against a virtual advanced thermostat (just using temo readings from two Aeontec TriSensor') and I have one running from a Heat IT Z-Temp thermostat. This last one is associated with Tile 13. When looking at the driver code, I noticed that the driver DOES mention a cooling operating state, even though this is not visible on the device details screen. The drivers for the TRV's and the virtual Adv. thermostat, are the other way around. There are cooling settings visible on the tile of the device pages, but not in the list of the operating modes. This (to me) seems to indicate that the driver does not support cooling for those devices, the device type template automatically does office the tiles for cooling setpoints by default for all devices using the Thermostat type, and since the driver of my Heat IT Thermostat actually does offer that functionality, this is what triggers the confusion on the dashboard tiles. The CSS for those tile,might just be generated based on the technical capabilities according to the underlying device drivers.

Could this be the reason that my dashboard looks misaligned and there is an CSS attribute missing?

Also posting this here at it could use useful for others that want to work with the OOTB Icons:

2 Likes

Anyone know how to hide the tile title for a variable tile?

My incorrect attempt late at night is below, but am hoping someone else can put me on the right track...

#tile-0 > div[1] > div[2] { display: hidden !important; }

Have you tried

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

before
image

After
image

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

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

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

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

For a variable tile?

1 Like

lol, copied the wrong one

try this


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

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

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

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

I couldn't agree more.

1 Like

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?

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

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

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