I also found if you open the "cloud link" in Chrome (on phone) and "add link to home screen". When opening the link it creates there is no url header, or hubitat footer (I know this can be removed but header remains). It looks cleaner and works better than Hubitat app IMO for Dashes.
How it renders varies greatly by the device. I applied the CSS from @harriscd's post, then tweeked the column, row, font,and icon sizes for viewing with a Google Pixel 3a.
/* This should work for a dashboard of only battery tiles. 1 or 2 columns look best. */
/* Set tile Width of 250 to 300 and Height of 25. Hide tile template names. */
/* Move the device name up and to the left */
.tile-title {
position: absolute;
top: 4px;
left: 4px;
text-align: left;
}
/* Move the icon and icon label halfway across and at the top */
.tile-contents {
top: 4px;
left: 47%; /* Change this to slide the icon and label left-right together */
height: fit-content;
width: 60%; /* and/or change this to slide the icon and label left-right together */
padding: unset;
}
/* Move the 3-dot menu up and shrink it down a little */
.tile-edit {
top: 0px;
font-size: 16px !important;
transform: scale(0.75,0.75)
}
/* Modify the position of the battery icon. */
[class*=" battery-"] {
position: unset;
top: 0px;
}
/* Find the 'i' tag that is a child of the battery icon and re-align */
[class*=" battery-"] > i {
position: absolute;
left: 62%; /* Change this to slide just the icon left-right */
}
2 Likes
Hi Otto_Mation could you please tell me where I went wrong?
Can't work out how to get the battery percentages included...
Did you use the CSS for contact sensors instead of the one for batteries?
I used the CSS bjcowles posted just above.
The CSS I used previously was missing the info required to produce the Battery Percentages, my mistake.
Thanks for getting back to me so quickly, much appreciated!!
OK i'm finally circling back to this. What did you end up using to make this work and where did you apply it? using that smartly tool or something else? Thanks!
