Thank you! Now i got. it:-)
I like your dark-styling of the light cards where the icon only changes color when turned on. Do you mind sharing your code? Funny…I had also added mushroom chips to the title card to make use of the space.
Loving all the helpful comments btw!! 
@CM000n @nkkfs @PaNiCo @remcovdwal The font I’m using is a paid font called HK Nova. Hence I didn’t include it within the guide. But honestly, there are plenty of awesome free Google fonts available.
@acesyde This is awesome! I can’t help you code it but if you need any help regarding feedback or something else, let me know!
1 Like
I would love this aswell. We need Climate Cards 
Amazing work Leon and thank you so much for sharing, managed to create my favourite tablet dashboard yet using your work!
24 Likes
Here is just one item inside the grid card. Let me know if you want the entire code instead of just the one light
type: custom:button-card
name: Living Room
icon: mdi:lightbulb
entity: light.living_room_lights
square: false
tap_action:
action: toggle
haptic: medium
hold_action:
action: more-info
haptic: medium
custom_fields:
slider:
card:
type: custom:my-slider-v2
entity: light.living_room_fan_light
colorMode: brightness
styles:
container:
- background: none
- border-radius: 100px
- overflow: visible
card:
- height: 16px
- padding: 0 8px
- background: |
[[[
if (entity.state == "on") return "linear-gradient(90deg, rgba(255,255,255, 0.3) 0%, rgba(255,255,255, 1) 100%)";
else return "var(--contrast4)";
]]]
track:
- overflow: visible
- background: none
progress:
- background: none
thumb:
- background: |
[[[
if (entity.state == "on") return "var(--black)";
if (entity.state == "off") return "var(--contrast20)";
else return "var(--contrast8)";
]]]
- top: 2px
- right: '-6px'
- height: 12px
- width: 12px
- border-radius: 100px
styles:
grid:
- grid-template-areas: '"i" "n" "slider"'
- grid-template-columns: 1fr
- grid-template-rows: 1fr min-content min-content
card:
- background: var(--contrast2)
- padding: 16px
- '--mdc-ripple-press-opacity': 0
img_cell:
- justify-self: start
- width: 24px
icon:
- width: 24px
- height: 24px
- color: var(--contrast8)
name:
- justify-self: start
- font-size: 14px
- margin: 4px 0 12px 0
- color: var(--contrast8)
state:
- value: 'on'
styles:
card: null
icon:
- color: var(--yellow)
name:
- color: var(--yellow)
- value: 'off'
styles:
icon:
- color: var(--contrast20)
name:
- color: var(--contrast20)
1 Like
This is an awesome dashboard! Thanks for the work on it @LE0N! I have a question about the sliders though. They don’t seem to be working for me when I try to use them in the iOS companion app but they do work if I use them in safari on an iPhone. Has anyone else experienced this and been able to fix it? Thanks!
So for me it works fine in the app, in the Safari browser as well.
So it can not be the code
Greetings
Moss
Thanks for the quick reply! Can I ask what version of the iOS app you are using? Is it the latest one from the App Store or are you running the beta version from Test Flight? Thanks!
No beta, the latest from the App Store.
Well unfortunately that didn’t solve the problem. I’ll have to keep looking into it. Thanks for the help though.
Any idea how I could get two labels, like in picture below but with the second label oriented to other lower corner? This is a continuation to what @CM000n has done.
This is my code now (for the image above):
label: >-
[[[ var temperature = states['sensor.living_room'].state; var humidity =
states['sensor.living_room_humidity'].state; return (temperature) + ' °C
______________' + (humidity) + ' % ' ]]]
Edit:
I think I got somewhere. It looks like this now:
Still issues with opacity and/or color, as with lights off humidity can barely be seen.
I created a new custom_field with the name “humi”
custom_fields:
humi:
card:
type: custom:button-card
entity: group.group_living_room
show_name: false
show_label: true
show_icon: false
label: >-
[[[ var humi = states['sensor.living_room_humidity'].state; return
(humi) + ' % ' ]]]
styles:
label:
- justify-self: middle
- align-self: middle
- font-size: 12px
- filter: opacity(80%)
- max-width: 100%
- color: var(--contrast8)
state:
- value: 'on'
styles:
card:
- background: var(--yellow)
icon:
- color: var(--black)
label:
- color: var(--black)
name:
- color: var(--black)
humi:
- color: var(--black)
tap_action:
action: more-info
entity: sensor.living_room_humidity
navigation_path: /lovelace-tablet/livingroom
haptic: medium
I also had to edit grid-template-areas as below.
styles:
grid:
- grid-template-areas: '''i light'' ''n n '' ''l humi'''
anyone know how i can get the padding under scenes text, closer to the buttons? There isnt any padding on the text itself, i tried finding the padding for that under rounded.yaml but couldnt find the one i wanted. I wan the buttons/live feed from security cameras closer to the text
also, how to get the same title font for home? is it another font ,anyone know which one?
Hi,
I have created this button which act as a switch toggle and shows the tempature of my boiler. But when i toggle the switch, i am not able to see if this worked. Is it possible to add a on/off state inside the button?
you can add the following:
state:
- value: 'on'
styles:
card:
- background: var(--purple)
icon:
- color: var(--black)
name:
- color: var(--black)
- value: 'off'
styles:
card:
- background: var(--contrast5)
icon:
- color: var(--contrast10)
name:
- color: var(--contrast15)
Hey folks!
Looks like 2023.4 beta has broken some things with themes since things under the hood changed.
This seems to fix at least the nav bar not being at the bottom:
card-mod-root: |
/* ___________ Bottom tabbar ___________ */
.header {
top: calc(97vh - 48px) !important;
bottom: 0 !important;
transform: unset !important;
backdrop-filter: blur(50px);
-webkit-backdrop-filter: blur(50px);
-moz-backdrop-filter: blur(50px);
-o-backdrop-filter: blur(50px);
-ms-backdrop-filter: blur(50px);
background-color: rgba(var(--contrast1-RGB),0.6) !important;
}
#view {
margin-top: 0px !important;
margin-bottom: 48px !important;
}
.header::before {
box-shadow: none;
height: 20px;
bottom: -20px;
}
.header {
height: 80px !important;
padding: 4px 8px 20px 8px;
background-color: rgba(0,0,0,0) !important;
However I’m stuck with my top cards being cut off:
What can I change in the theme to fix these being cut off? I’m no theme/CSS expert so any help is greatly appreciated 
change from “label” to “l” in your grid-template-areas. “label” would be if you had a custom_field
Can you share youre code please? I also want to have the temp and hum in the right corner.
Thanks! I’ve managed to use the label and get the temp without using custom fields