It looks like it's possibly related to the update using a new CSS (See post 5) 2.3.9.150 update caused issues with dashboard/s on iPad Air - #5 by user1025
I guess I'll see if I can get this old tablet to update so it is compatible. If that doesn't work, maybe I need to make one big dummy tile that is all black that the other tiles overlap.
lol
Yea, that seems to be the case. I just tried on a newer iPad and don’t have that issue with it.
Will try the big tile in the background - Hopefully, that will fix the issue.
RIP using cheap old tablets off Ebay as dashboard displays. 
I got it to work. It's truly the most kludgy way, but reminds me of the old days of "we can't get this error window to go away, let's just put a background color window over it so you don't see it anymore."
I uploaded a 1x1 black (or whatever bg color you want) pixel image file to the Hubitat through the file manager. Then I found the lowest numbered tile on that Dashboard and changed it to an Image tile using the 1x1 pixel as the Image. I moved that tile to position top left and then changed its size to match the whole dashboard.
Last thing was to make a new replacement tile duplicating the old function of the tile that was used to create the background. I attached a photo with the image tile 1 column smaller than the dashboard to show it successfully covering up all the other red blocks.
Latest update has fixed this issue, so now I can delete the big bg file that was covering up the red tiles. Thanks!
Anyone know how I can align the Groups on the left to be left aligned?
I'm also struggling with getting the keypad to fill the entire tile that it's sitting in. The top and bottom padding doesn't seem to go away regardless of what I set in the CSS.
Here's the CSS I have so far, all of the tiles are currently TEXT but will eventually be replaced with links to individual dashboards.
#tile-30 .tile-title {
display:none;
object-fit: cover;
background-color:transparent;
border: none;
}
#tile-30 .tile-contents {
padding: 0px;
height:100%;
width:100%;
background-color:transparent;
border: none;
}
#tile-30 .tile-primary {
padding: 0;
height:100%;
width:100%;
object-fit: cover;
background-color:transparent;
border: none;
}
#tile-11 .tile-title::after {
visibility: visible;
position: absolute;
text-align: center;
left: inherit;
right: 0;
bottom: 0;
white-space: pre-wrap;
}
#tile-11 .tile-title {
visibility: hidden;
white-space: nowrap !important;
overflow: unset;
}
Found it! For everyone who is trying this, here's the CSS:
div.md\:w-1\/2:nth-child(2) > div:nth-child(1),
div.md\:w-1\/2:nth-child(4) > div:nth-child(1),
div.md\:w-1\/2:nth-child(5) > div:nth-child(1),
div.md\:w-1\/2:nth-child(7) > div:nth-child(1),
div.md\:w-1\/2:nth-child(8) > div:nth-child(1),
div.md\:w-1\/2:nth-child(9) {
display:none
}
Here's the result, now I need to figure out how to align the boxes.
Boom!
/*--------------------------------------Modify HSM Pop-Up---------------------------------------*/
/* Remove Extra Options from HSM Pop-Up Menu Child(2) is Arm Nights, Child(4) is Arm All Rules, Child(5) is Disarm All Rules, Child(7) is Arm All, Child(8) is Cancel All Alerts */
.flex-row div.md\:w-1\/2:nth-child(2) > div:nth-child(1),
.flex-row div.md\:w-1\/2:nth-child(4) > div:nth-child(1),
.flex-row div.md\:w-1\/2:nth-child(5),
.flex-row div.md\:w-1\/2:nth-child(7),
.flex-row div.md\:w-1\/2:nth-child(8) > div:nth-child(1),
.flex-row div.md\:w-1\/2:nth-child(9) {
display: none;
font-family: Trebuchet MS;
width: 100%;
}
/* Adjust pop-up window size */
.popup-content {
width: 40%;
}
/* Adjust button size */
.flex-row div.md\:w-1\/2:nth-child(1),
.flex-row div.md\:w-1\/2:nth-child(3),
.flex-row div.md\:w-1\/2:nth-child(6) {
width: 100%;
font-family: Trebuchet MS;
font-weight: bold;
}
/* Remove Events and Alerts */
div.text-lg > div.w-full.flex.p-2:nth-child(2) {
display: none; /* or visibility: hidden; */
}
Inspired by @william2's post. Here are two updated templates for Light Switches and Smart Bulbs.
I wish I could figure out how to make the dimmer into a half-doughnut but honestly it's probably not worth the hassle.
ON:
OFF:
Both the Garage Door and Pool Gate tiles are templates Garage and Door Status. Both are sensors.
On the top left of tiles show 100% which is battery level.
But CSS shows it is temperature? should battery? HE bug?
@Haven @william2 can you please link me the post that shows how to get light icons like that. That looks awesome!
Would love to do it to all my switches and dimmers.
Here you go.
just a short scroll down 
They could be a bulb or a dimmer, can't remember the exact names.
i like how the transparent icon has a yellow outline glow when its on.
You can see how to make the outline glow when the light is on by looking at the CSS for the switch.
I came here looking for css to resize an image of an image tile or an image in an attribute tile, but I could not find anything. Since I figured it out, I thought I would share it here.
I am playing around with using image tiles and attribute tiles as changeable dashboard backgrounds, so I wanted to change image position and size, and make the background go away, and put it behind the other tiles. Here is what I am using:
Image Tiles:
This puts the image tile behind all others, and gets rid of the tile background that can show through the edges:
/* Make Image tile with background transparent and behind others */
#tile-114 {
z-index: -10 !important;
text-shadow:none;
background-color:transparent !important;
border:none;
}
I use this to change the image location and size (note that I am only using left position, width and height, but you can add right, top and bottom offsets if needed):
#tile-114.tile.image {
left: -10px !important;
width: 1320px !important;
height: 735px !important;
}
Attribute Tiles:
Same idea, I use the same as above to make it background transparent and behind other tiles.
For the resize, the css is just a bit different for attribute tiles:
/* Image Resize Attribute */
#tile-32 .tile-primary .image {
left: -10px !important;
width: 1300px !important;
height: 650px !important;
}
And I use this to hide the title on the attribute tile:
#tile-32 .tile-title {
visibility: hidden;
white-space: nowrap !important;
overflow: unset;
}
This based on me making dynamic 3D dashboards that change with the lighting scene, and time of day. I detailed it all in this post if anyone is interested:
This thread has always been my go-to guide for all things CSS on legacy Dashboards, so it's high time I contributed something new and unusual for the community to enjoy.
I present...
EDIT MENU FLYOUTS WITH TILE NUMBERS
Some call them tooltips, others know these as context menus or pop-ups, but here's what they look like on my dash when the mouse points at the upper-right corner of a tile:
BASIC IDEA
THE ACTUAL CSS (feel free to copy into your Custom CSS)
/* TILE NUMBERING (required) */
#tile-0 {--tileN: '0';}#tile-1 {--tileN: '1';}#tile-2 {--tileN: '2';}#tile-3 {--tileN: '3';}#tile-4 {--tileN: '4';}#tile-5 {--tileN: '5';}#tile-6 {--tileN: '6';}#tile-7 {--tileN: '7';}#tile-8 {--tileN: '8';}#tile-9 {--tileN: '9';}#tile-10 {--tileN: '10';}#tile-11 {--tileN: '11';}#tile-12 {--tileN: '12';}#tile-13 {--tileN: '13';}#tile-14 {--tileN: '14';}#tile-15 {--tileN: '15';}#tile-16 {--tileN: '16';}#tile-17 {--tileN: '17';}#tile-18 {--tileN: '18';}#tile-19 {--tileN: '19';}#tile-20 {--tileN: '20';}#tile-21 {--tileN: '21';}#tile-22 {--tileN: '22';}#tile-23 {--tileN: '23';}#tile-24 {--tileN: '24';}#tile-25 {--tileN: '25';}#tile-26 {--tileN: '26';}#tile-27 {--tileN: '27';}#tile-28 {--tileN: '28';}#tile-29 {--tileN: '29';}#tile-30 {--tileN: '30';}#tile-31 {--tileN: '31';}#tile-32 {--tileN: '32';}#tile-33 {--tileN: '33';}#tile-34 {--tileN: '34';}#tile-35 {--tileN: '35';}#tile-36 {--tileN: '36';}#tile-37 {--tileN: '37';}#tile-38 {--tileN: '38';}#tile-39 {--tileN: '39';}#tile-40 {--tileN: '40';}#tile-41 {--tileN: '41';}#tile-42 {--tileN: '42';}#tile-43 {--tileN: '43';}#tile-44 {--tileN: '44';}#tile-45 {--tileN: '45';}#tile-46 {--tileN: '46';}#tile-47 {--tileN: '47';}#tile-48 {--tileN: '48';}#tile-49 {--tileN: '49';}#tile-50 {--tileN: '50';}#tile-51 {--tileN: '51';}#tile-52 {--tileN: '52';}#tile-53 {--tileN: '53';}#tile-54 {--tileN: '54';}#tile-55 {--tileN: '55';}#tile-56 {--tileN: '56';}#tile-57 {--tileN: '57';}#tile-58 {--tileN: '58';}#tile-59 {--tileN: '59';}#tile-60 {--tileN: '60';}#tile-61 {--tileN: '61';}#tile-62 {--tileN: '62';}#tile-63 {--tileN: '63';}#tile-64 {--tileN: '64';}#tile-65 {--tileN: '65';}#tile-66 {--tileN: '66';}#tile-67 {--tileN: '67';}#tile-68 {--tileN: '68';}#tile-69 {--tileN: '69';}#tile-70 {--tileN: '70';}#tile-71 {--tileN: '71';}#tile-72 {--tileN: '72';}#tile-73 {--tileN: '73';}#tile-74 {--tileN: '74';}#tile-75 {--tileN: '75';}#tile-76 {--tileN: '76';}#tile-77 {--tileN: '77';}#tile-78 {--tileN: '78';}#tile-79 {--tileN: '79';}#tile-80 {--tileN: '80';}#tile-81 {--tileN: '81';}#tile-82 {--tileN: '82';}#tile-83 {--tileN: '83';}#tile-84 {--tileN: '84';}#tile-85 {--tileN: '85';}#tile-86 {--tileN: '86';}#tile-87 {--tileN: '87';}#tile-88 {--tileN: '88';}#tile-89 {--tileN: '89';}#tile-90 {--tileN: '90';}#tile-91 {--tileN: '91';}#tile-92 {--tileN: '92';}#tile-93 {--tileN: '93';}#tile-94 {--tileN: '94';}#tile-95 {--tileN: '95';}#tile-96 {--tileN: '96';}#tile-97 {--tileN: '97';}#tile-98 {--tileN: '98';}#tile-99 {--tileN: '99';}#tile-100 {--tileN: '100';}
/* TOOLTIP HOVER */
.tile-edit:hover::before {
visibility: visible;
opacity: 1;
}
/* TOOLTIP */
.tile-edit::before {
content: "Edit tile #" var(--tileN);
position: absolute;
transform: translate(-110%, 25%);
visibility: hidden;
opacity: 0;
background-color: #f1f1f1;
color: #333;
text-align: center;
font-size: 50%;
border-radius: 6px;
white-space: nowrap;
padding: 3px 5px;
z-index: 1;
}
/* EDIT MENU */
.tile-edit {
position: relative;
background-color: #777;
border: 1px solid #111;
border-radius: 5px;
width: 15%;
height: 100%;
margin-right: 3px;
& .material-icons {
visibility: hidden;
}
}
You could say I went a little overboard with styling these components, but it's part of a larger dashboard styling project due for release early next year (I'm waiting for W3C to finalize some experimental CSS features so everyone can enjoy).
Stay tuned!
Download the Hubitat app
