This one affected the menus and the options window, so I had to get creative. The only new part is the text-tile part at the top. Everything below that remains the same.
/* This should work for a dashboard of only battery & text tiles. 1 or 2 columns look best. */
/* Set tile Width of 250 to 300 and Height of 25. Hide tile template names. */
/*TEXT TILE*/
/* This uses the * (grandchild) selector to isolate the justify-center class of the text-tile */
[class*=" text-tile "] * .justify-center {
padding: 0px 0px 0px 4px !important; /*top right bottom left*/
justify-content: unset;
font-size: 14px !important;
}
/*BATTERY TILE*/
/* 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 */
}
Hi, sure thing. Here's what I came up with. Hopefully this won't interfere with other device type layouts.
If you'd like the water icons in the same column as the battery icons, this should work.
/* Modify the position of the water sensor icon. */
.tile-primary.dry {
position: absolute;
left: 20%;
}
.tile-primary.wet {
position: absolute;
left: 20%;
}
If you'd like the battery % hidden since it's already showing up in the Battery Levels, then you might want to only add this. My guess is that other tiles having Secondary data will disappear too, without extra work or specifying this css by specific tile numbers.
...once in the batteries dashboard I would like to have a "back" link which you can see here but I can't seem to apply my normal tricks of hidding the contents and changing the title from "Dashboards" to "Back".
The "Dashboard" text is accessible through the .tile-title class, and the name of the dashboard is under .tile-primary so one way of changing it to read "Back" (changing "20" to match the tile ID):
This is awesome!
Question: how do I get the color of the tile to reflect the battery level?
I notice that one of my tiles shows battery at 37%, and it is grey. Others are green.
Are the colors customizable? Could not find in the code.
There are 2 classes that can be used to do some customization, the more specific is at the the tile-primary level and is changed to match the actual level reported, ie battery-27 or battery-98...
The other is interval based, i.e. he-battery_25_color, he-battery_50_color...
If you click on the 3 vertical dots on the tile it will bring up the Tile Edit dialog, the tile ID is in the upper left of that. Clicking on the dashboard cog wheel and then Advanced | CSS will bring up the CSS entry screen.
I’d suggest creating a test dashboard where you can play a little, and try things first without impacting your “production” dashboards.
Other than that keep coming here and asking questions, it won’t be too long before you’ll be an expert.
Oh ok, see I was using "hidden" for the tile title and it looks like you are basically shrinking it till it's not visible. That seems to have worked for me. Thank you.
Well here's something unexpected. I have that back button formatted perfectly but it now no longer works as a link because apparently only the primary contents of the tile are the actual functioning link. Strange.
It appears this is a problem tied to the global changes earlier in the CSS code that I used to modify the battery tiles. I believe the tile-content is the clickable link, so the following changes seem to work. It results in a tile with 'Back' centered.
/* Modify the content of dashboard button #12. */
/* 1. Override the position used elsewhere in the battery tiles */
#tile-12 .tile-contents {
position: unset !important;
left: unset !important;
}
/* 2. Shrink the original text */
#tile-12 .tile-primary {
font-size: 0px !important;
}
/* 3. Add in 'Back' text */
#tile-12 .tile-primary::before {
font-size: 18px;
content: 'Back';
}
/* 4. Get rid of the title 'Dashboard' */
#tile-12 .tile-title {
display: none;
}
/* 5. Stretch the contents to 100% so the whole tile is clickable */
#tile-12 .tile-contents {
width: 100% !important;
}