This really makes me want to go through and over haul the organization of mine.
1 Like
Guys, this is a non-CSS "cheat" but something I felt worth sharing. After opening my Living Room dashboard in Chrome, I took a screenshot and edited in MS Paint (3D), then imported the edited version into Google Draw, then did a "Publish to Web" and grabbed the link which I pasted into the Background field in Dashboard.
Although I forgot to mask over the tiles themselves – ideally, the background image should just be a photo or graphic – the point of this was to show how you can delineate "zones" or rectangular quadrants of your dashboard with swatches of color (purple and green, in this example). This effectively groups your tiles by function, room, whatever ... in a visual way, using filled or unfilled outlines.
Just more food for thought.
P.S. In hindsight, I could have done all the drawing in Google Draw, which is infinitely superior in terms of object alignment (since it offers an adjustable grid) and shapes. One beautiful thing about "Publish to Web" in Google Drive is that any future edits get reflected in the linked image, so you can continue to fine tune without all that downloading and uploading!
1 Like
One of the reasons I don't dashboards anymore, but it is fun experimenting 
2 Likes
Ok.....
This might be diving really deep:
The slight blue square "flash" that happens when interacting with a dashboard. Is there a way to get rid of it?
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,
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. 
1 Like
Well I didn't get an answer to my question, but that sure is cool, Chad!
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
2 Likes
