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

Weird, I see no flash (not blue or otherwise). Are you using Dashboard on a PC browser or smartphone/tablet?

This is still bugging me.... For anyone willing to work through a bit of a read I would be interested to know why (the very patient) @Krishna needed to repeat the CSS I suggested for each tile, rather than being able to group some of the CSS together for related tiles...

2 Likes

I've had that with several instances. Things that would logically work just fine anywhere else and have worked in the past suddenly seem super resistant.

Me too, I keep all mine separate for this very reason. I struggle enough with CSS as it is, lol

1 Like

Not enough room for your text in the tile? Try this....It scrolls the text up the tile for you. I am using it to scroll the last few notifications to my phone on my house dashboard. Pretty cool.

/Scrolling Notification Tile/
#tile-80 .tile-contents {transform: translateY(100%); animation: my-animation 5s linear infinite;}
@keyframes my-animation {from {transform: translateY(100%);} to {transform: translateY(-100%);}}

7 Likes

Here is a GIF of it,

Hubitat Dashboard - Google Chrome 2021-12-07 10-51-25

3 Likes

This is great! I just set it up on my two notification tiles. I have one for strictly HSM related stuff and another for everything else. I slowed the scrolling way down though.

@chad.andrews That reminds me I still gotta sort out bounce for a couple things. Also, are those presence icons native to HE?

yep, they are native! I still have a lot of work to do, and I am still learning. But that's the fun part! Maybe i should slow mine down too, looking at it here it's pretty fast. I think the scrolling could be useful to lots of people.

Extremely useful! All of this new stuff makes me think much more about needed improvements to this part of the interface. You can't click and drag to select, the jumping to the top of the page thing, and it would be great to be able to expand the window more.

Yes, i hear ya there. The CSS editing window is really weird, not sure why it is that way. Some more transparency for those editing window would be nice too. I am always moving it around to see things on the dashboard.

1 Like

Yes! Me too. I often move it around to see the target as I click save with the anticipation of victory or defeat. :joy:

1 Like

Well I didn't get an answer to my question, but that sure is cool, Chad!

Hi @Krishna, Thanks! Sorry I didn't see a question, was it for me?

It was the question posed by @sburke781. Never mind though, some else answered it elsewhere, any really I just wanted to say that your CSS code was just cool looking and I think I might want to try that eventually.

1 Like
        launcher = launcher + " style='height:${height}%;width:${width}%;border:none;left:0;position:absolute;top:25%;left:25%;'></iframe></div>"

@sburke781
this did it perfectly

Screen_Recording_20211209-191534_Chrome_1_2_1

2 Likes

Is there a way to enable the HE default icons to be available to select for attribute tiles?
at the moment it only allows background image

@mark.cockcroft I've fiddled with that, can't get it to work. I assume there is no spot for an Icon in the first place, so nothing there to replace. I did have a square show up when used the content: "/ea37" for example, but it was like it didn't know how to display the icon from the font-family. Maybe look at another tile with the info you need and CSS it to make what you want, if that makes sense.

I thought there must be something in the the base templates the made the icon option unavailable

Just discovered text outline.....