You made a mistake in the grid-template Part.
Try this:
grid-template-areas: '“icon1 .” “n n” “l icon2” ’
Hey all,
I’ve got another one that I need help with. I’m trying to get my card below to show the slider contained and I’m struggling to do so. Any ideas?
Code:
type: custom:button-card
entity: light.living_room_light_switch
name: Main Light
show_icon: false
show_label: true
tap_action:
action: toggle
haptic: medium
hold_action:
action: more-info
haptic: medium
label: |
[[[
var bri = (Math.round(states['light.living_room_light_switch'].attributes.brightness / 2.55));
return ' ' + (bri ? bri : '0') + '%';
]]]
styles:
card:
- border-radius: 25px
- border-style: none
- box-shadow: 0px 0px 10px -9px black
- background: var(--red);
grid:
- grid-template-areas: '"icon_cells" "n" "l" "slider"'
- grid-template-rows: 32px min-content 24px min-content min-content
- grid-template-columns: 1fr // Adjusted to contain the slider
custom_fields:
icon_cells:
- justify-self: start
- margin-top: 12px
- margin-left: 15px
icon1:
- position: absolute
- width: 4.5em
- opacity: 10%
- color: black;
- transform: rotate(-20deg)
- justify-self: end
- margin-top: 25px
name:
- font-size: 90%
- font-weight: bold
- justify-self: start
- margin-top: 6px
- margin-left: 15px
- color: black;
label:
- justify-self: end
- margin-top: '-15%'
- font-size: 85%
- color: |
[[[
if (entity.state == "on") return "var(--black)";
if (entity.state == "off") return "black";
]]]
custom_fields:
slider:
card:
type: custom:my-slider-v2
entity: '[[[ return entity.entity_id ]]]'
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(--red)";
else return "var(--contrast8)";
]]]
- top: 2px
- right: '-8px'
- height: 12px
- width: 12px
- border-radius: 10px
icon_cells: |
[[[
var state = states['light.living_room_light_switch'].state;
if(state == "on")
return `<ha-icon
icon="mdi:ceiling-light"
style="width: 25px; height: 25px; color: black;">
</ha-icon>`;
else
return `<ha-icon
icon="mdi:ceiling-light-outline"
style="width: 25px; height: 25px; color: black;">
</ha-icon>`;
]]]
icon1: |
[[[
return '<ha-icon icon="mdi:ceiling-light"></ha-icon>';
]]]
state:
- value: 'on'
styles:
card:
- background: |
[[[
var color = entity.attributes?.rgb_color;
if (entity.state != "on"){
return 'var(--contrast20)';
}
else if (color){
return 'rgba(' + color + ')'
}
else{
return 'var(--yellow)'
}
]]]
name:
- color: var(--black)
- value: 'off'
styles:
name:
- color: black
What I’m aiming to achieve is something very similar to below;
Okay, been playing around a bit and got it almost there, but I’m still mixing something.
type: custom:button-card
entity: light.living_room_light_switch
name: Main Light
show_icon: false
styles:
card:
- border-radius: 25px
- border-style: none
- box-shadow: 0px 0px 10px -9px black
- background-color: |
[[[
if (entity.state == 'on') {
return 'var(--green)';
} else {
return 'var(--red)';
}
]]]
grid:
- grid-template-areas: '"icon_cells" "n" "button"'
- grid-template-rows: 32px min-content 24px min-content min-content
- grid-template-columns: 1fr
custom_fields:
icon_cells:
- justify-self: start
- margin-top: 12px
- margin-left: 15px
icon1:
- position: absolute
- width: 4.5em
- opacity: 10%
- color: |
[[[
if (entity.state == 'on') {
return 'var(--black)';
} else {
return 'var(--black)';
}
]]]
- transform: rotate(-20deg)
- justify-self: end
- margin-top: 25px
name:
- font-size: 90%
- font-weight: bold
- justify-self: start
- margin-top: 6px
- margin-left: 15px
- color: |
[[[
return states['switch.living_room_lamp'].state === 'on' ? 'black' : 'black';
]]]
custom_fields:
icon_cells: |
[[[
var state = states['switch.living_room_lamp'].state;
if(state == "on")
return `<ha-icon
icon="mdi:lamp"
style="width: 25px; height: 25px; color: black;">
</ha-icon>`;
else
return `<ha-icon
icon="mdi:lamp-outline"
style="width: 25px; height: 25px; color: black;">
</ha-icon>`;
]]]
icon1: |
[[[
return '<ha-icon icon="mdi:lamp"></ha-icon>';
]]]
button:
card:
type: custom:button-card
entity: light.living_room_light_switch
show_icon: false
show_name: false
styles:
card:
- border-style: none
- margin-top: '-4%'
- margin-bottom: '-5%'
- background-color: transparent
grid:
- grid-template-areas: '"slider"'
- grid-template-columns: 1fr
- grid-template-rows: 1fr min-content min-content
custom_fields:
slider:
- justify-self: start
- align-self: middle
- font-size: 12px
- margin-left: 15px
- margin-top: 1.6px
custom_fields:
slider:
card:
type: custom:my-slider-v2
entity: '[[[ return entity.entity_id ]]]'
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(--red)";
else return "var(--contrast8)";
]]]
- top: 2px
- right: '-8px'
- height: 12px
- width: 12px
- border-radius: 10px
I’m still gonna keep playing but if anyone spots what I’m doing wrong, that would be great
1 Like
Here ist my sollution.
entity: light.wohnzimmer_gruppe
name: '[[[ return entity.attributes.friendly_name ]]]'
icon: '[[[ return entity.attributes.icon ]]]'
show_name: true
show_icon: true
show_label: true
show_state: false
hold_action:
action: more-info
label: |
[[[
var b = Math.round(entity.attributes.brightness/255*100);
if(entity.attributes.brightness > 0)
return `${b}%`;
else
return `Aus`;
]]]
custom_fields:
icon1: |
[[[
var i = entity.attributes.icon;
return `<ha-icon icon='${i}'></ha-icon>`
]]]
slider:
card:
type: custom:my-slider-v2
entity: '[[[ return entity.entity_id ]]]'
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 'transparent';
]]]
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: '-8px'
- height: 12px
- width: 12px
- border-radius: 10px
extra_styles: |
@keyframes fountain {
0%, 100 { clip-path: polygon(0 100%, 0 0, 100% 0, 100% 100%); }
50% { clip-path: polygon(0 100%, 0 47%, 100% 47%, 100% 100%); }
60% { clip-path: polygon(0 100%, 100% 100%, 100% 37%, 79% 36%, 71% 21%, 56% 25%, 44% 25%, 31% 20%, 20% 36%, 0 36%); }
70% { clip-path: polygon(0 100%, 100% 100%, 100% 36%, 79% 36%, 71% 22%, 81% 1%, 24% 0, 31% 21%, 20% 36%, 0 36%); }
80% { clip-path: polygon(0 100%, 100% 100%, 100% 36%, 79% 36%, 76% 28%, 100% 0, 0 0, 23% 28%, 20% 36%, 0 36%); }
}
styles:
grid:
- grid-template-areas: '"icon1 ." "n l" "slider slider" '
- grid-template-columns: 1fr
- grid-template-rows: 1fr min-content min-content
card:
- background: var(--ha-card-background)
- padding: 16px
- '--mdc-ripple-press-opacity': 0
img_cell:
- position: absolute
- top: 20%
- left: 40%
- overflow: visible
icon:
- position: absolute
- width: 20em
- opacity: 20%
- color: |
[[[
if (entity.state == 'on') {
return 'var(--black)';
} else {
return 'var(--contrast9)';
}
]]]
- transform: rotate(-20deg)
label:
- text-align: right
- font-size: 14px
- justify-self: end
- align-self: end
- margin: 4px 0 12px 0
- overflow: visible
name:
- justify-self: start
- font-size: 14px
- font-weight: 500
- margin: 4px 0 12px 0
- color: var(--contrast8)
custom_fields:
icon1:
- justify-self: start
- width: 24px
- color: |
[[[
if (entity.state == 'on') {
return 'var(--black)';
} else {
return 'var(--contrast20)';
}
]]]
state:
- value: 'on'
styles:
card:
- background: |
[[[
var color = entity.attributes?.rgb_color;
if (entity.state != "on"){
return 'var(--contrast20)';
}
else if (color){
return 'rgba(' + color + ')'
}
else{
return 'var(--yellow)'
}
]]]
icon:
- color: var(--black)
name:
- color: var(--black)
label:
- color: var(--black)
- value: 'off'
styles:
icon:
- color: var(--contrast20)
name:
- color: var(--contrast20)
label:
- color: var(--contrast12)
I like this but for some reason I can’t get the black dot to appear in the slider and the icon above the name
You Had to declare an Icon in the settings of the entity.
The DOT ist declared in the thumb section of the Slider.
thumb:
- background: |
[[[
if (entity.state == "on") return "var(--black)";
if (entity.state == "off") return "var(--contrast20)";
else return "var(--contrast8)";
]]]
- top: 2px
- right: '-8px'
- height: 12px
- width: 12px
- border-radius: 10px
Show me your config. Perhaps I can Help.
Hi! Thanks for this!
I’m trying to configure this dashboard, but scroll does not work on my phone. Any suggestion? I have the last version of HA.
Thanks in advance!
type: custom:button-card
entity: light.office_light
name: '[[[ return entity.attributes.friendly_name ]]]'
icon: '[[[ return entity.attributes.icon ]]]'
show_name: true
show_state: false
show_label: true
show_icon: true
hold_action:
action: more-info
label: |
[[[
var b = Math.round(entity.attributes.brightness/255*100);
if(entity.attributes.brightness > 0)
return `${b}%`;
else
return `Off`;
]]]
custom_fields:
icon1: |
[[[
var i = entity.attributes.icon;
return `<ha-icon icon='${i}'></ha-icon>`
]]]
slider:
card:
type: custom:my-slider-v2
entity: '[[[ return entity.entity_id ]]]'
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 'transparent';
]]]
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: '-8px'
- height: 12px
- width: 12px
- border-radius: 10px
extra_styles: |
@keyframes fountain {
0%, 100 { clip-path: polygon(0 100%, 0 0, 100% 0, 100% 100%); }
50% { clip-path: polygon(0 100%, 0 47%, 100% 47%, 100% 100%); }
60% { clip-path: polygon(0 100%, 100% 100%, 100% 37%, 79% 36%, 71% 21%, 56% 25%, 44% 25%, 31% 20%, 20% 36%, 0 36%); }
70% { clip-path: polygon(0 100%, 100% 100%, 100% 36%, 79% 36%, 71% 22%, 81% 1%, 24% 0, 31% 21%, 20% 36%, 0 36%); }
80% { clip-path: polygon(0 100%, 100% 100%, 100% 36%, 79% 36%, 76% 28%, 100% 0, 0 0, 23% 28%, 20% 36%, 0 36%); }
}
styles:
grid:
- grid-template-areas: '"icon1 ." "n l" "slider slider"'
- grid-template-columns: 1fr
- grid_template-rows: 1fr min-content min-content
card:
- background: var(--ha-card-background)
- padding: 16px
- '--mdc-ripple-press-opacity': 0
img_cell:
- position: absolute
- top: 20%
- left: 40%
- overflow: visible
icon:
- position: absolute
- width: 20em
- opacity: 20%
- color: |
[[[
if (entity.state == 'on') {
return 'var(--black)';
} else {
return 'var(--contrast9)';
}
]]]
- transform: rotate(-20deg)
label:
- text-align: right
- font-size: 14px
- justify-self: end
- align-self: end
- margin: 4px 0 12px 0
- overflow: visible
name:
- justify-self: start
- font-size: 14px
- font-weight: 500
- margin: 4px 0 12px 0
- color: var(--contrast8)
custom_fields:
icon1:
- justify-self: start
- width: 24px
- color: |
[[[
if (entity.state == 'on') {
return 'var(--black)';
} else {
return 'var(--contrast20)';
}
]]]
state:
- value: 'on'
styles:
card:
- background: |
[[[
var color = entity.attributes.rgb_color;
if (entity.state == "on"){
return 'var(--contrast20)';
}
else if (color){
return 'rgba(' + color + ')'
}
else{
return 'var(--yellow)'
}
]]]
icon:
- color: var(--black)
name:
- color: var(--black)
label:
- color: var(--black)
- value: 'off'
styles:
icon:
- color: var(--contrast20)
name:
- color: var(--contrast20)
label:
- color: var(--contrast12)
This has given me the following:-
I used the rounded theme and a few cards from others to create my new desktop dashboard. What do you think?
13 Likes
I really like the menu on the left and the information at the top!
Agree to share?
Sure, I can share how I made it. It is actually quite easy. I used custom:layout card in the view tab to make a custom grid with header, sidebar and main area.
grid-template-columns: 120px 90%
grid-template-rows: auto
grid-template-areas: |
"header header header"
"sidebar . main"
"footer footer footer"
And set the different cards to the specific grid area with
view_layout:
grid-area: header
The sidebar are just the scene buttons from this theme. And the header is custom button card with no background for the time and the profile card and mushroom chips with custom background color for the information. It’s all conditional so it only shows what’s necessary. Hope that helps!
4 Likes
I actually got it working with different colors. I just used templates in the card mod section for the color, like so:
card_mod:
hui-card-features $:
hui-alarm-modes-card-feature $:
ha-control-select$: |
.container {
color: grey !important;
--control-select-color: {% if is_state('alarm_control_panel.security_system', 'armed_home') %} var(--green) !important {% elif is_state('alarm_control_panel.security_system', 'armed_night') %} var(--blue) !important {% elif is_state('alarm_control_panel.security_system', 'disarmed') %} var(--contrast14) !important {% else %} var(--red) {% endif %};
}
Here is my full code for the card. I changed it a little bit though.
type: custom:button-card
entity: alarm_control_panel.security_system
name: Security System
icon: mdi:security
tap_action:
action: navigate
navigation_path: security
hold_action:
action: more-info
state:
- value: disarmed
icon: mdi:shield-off-outline
custom_fields:
cs: Disarmed
- value: armed_home
icon: mdi:shield-home
custom_fields:
cs: Home
- value: armed_night
icon: mdi:shield-moon
custom_fields:
cs: Night
- value: arming
icon: mdi:shield-lock-open
custom_fields:
cs: Arming
styles:
icon:
- animation: blink 2s ease infinite
- value: armed_away
icon: mdi:shield-lock
custom_fields:
cs: Armed Away
- value: pending
icon: mdi:security
custom_fields:
cs: Pending
styles:
icon:
- animation: blink 2s ease infinite
- value: triggered
icon: mdi:shield-alert-outline
custom_fields:
cs: Triggered
styles:
card:
- background: var(--red)
icon:
- animation: blink 2s ease infinite
- color: var(--black)
name:
- color: var(--black)
custom_fields:
cs:
- color: var(--black)
styles:
grid:
- grid-template-areas: '"i i" "cs ec" "n ec" "n ec"'
- grid-template-columns: 1fr min-content
- grid-template-rows: 1fr min-content min-content 1fr min-content
custom_fields:
cs:
- text-align: left
- white-space: no-wrap
- z-index: 4
- justify-self: start
- font-size: 14px
- width: 100%
- margin: 8px 0 2px 0
- color: >-
[[[ return states[entity.entity_id].state == 'on' ||
states[entity.entity_id].state == variables.on_state ? 'var(--black)'
: 'var(--contrast18)'; ]]]
- text-overflow: ellipsis
es:
- color: var(--black)
ec:
- justify-self: start
- justify-content: center
card:
- padding: 16px
- background: var(--contrast2)
- '--mdc-ripple-press-opacity': 0
- height: '[[[ return variables.max_height ? ''100%'' : ''100px''; ]]]'
icon:
- color: var(--contrast20)
- width: 24px
- height: 24px
- line-height: 24px
name:
- color: var(--contrast15)
- text-align: start
- white-space: no-wrap
- justify-self: start
- font-size: 12px
- margin: 2px 0 2px 0
- text-overflow: ellipsis
img_cell:
- justify-self: start
- width: 24px
- height: 24px
- line-height: 24px
- border-radius: 8px
custom_fields:
ec:
card:
type: tile
entity: '[[[ return entity.entity_id; ]]]'
color: red
features:
- type: alarm-modes
modes:
- armed_away
- armed_home
- armed_night
- disarmed
card_mod:
style:
.: |
ha-card .content {
display: none;
} ha-card {
width: 200px;
background: transparent;
border-radius: 0px;
} ha-card.active {
height: 40px;
}
.features hui-alarm-modes-tile-feature $: |
.container {
padding: 0px !important;
}
.features hui-alarm-modes-tile-feature $ .container ha-control-select $ .container: |
.option {
background-color: transparent !important;
border-radius: 13px !important;
}
card_mod:
hui-card-features $:
hui-alarm-modes-card-feature $:
ha-control-select$: |
.container {
color: grey !important;
--control-select-color: {% if is_state('alarm_control_panel.security_system', 'armed_home') %} var(--green) !important {% elif is_state('alarm_control_panel.security_system', 'armed_night') %} var(--blue) !important {% elif is_state('alarm_control_panel.security_system', 'disarmed') %} var(--contrast14) !important {% else %} var(--red) {% endif %};
}
1 Like
That’s amazing !
Is there a way to get your yaml code and use it ? It’s perfect
Because I’m not a good developper and I don’t understand how to get the Rounded template with all the colors ^^
thanks
Unfortunately without the Rounded Theme my code won’t work. 
can you share you tablet dashboard view? to be inspired?
I have the theme, but it doesn’t give the final result as we cna see on the screenshot ^^
So my question is where I put your code to add on the Rounded theme one ? 
Looks very nice! Still, was wondering about a layout for my desktop dashboard but something like this inspired me to finally make a choice, thanks!
And have my mobile one already done with the rounded theme, so continuing on that should be very simple.
One question, the scene buttons used on the left, are these opening a pop-up (bubble)? Or does the whole layout change except the top and the left?
And another, can you share your Spotify (media) tab? Still trying to design that one in proper way and can’t seem to find cards and layout that I really like.
Happy easter!
It changes to a new view. But sidebar and top stays the same. I used decluttering card to make them all the same on every page. So less work if you want to change something.
My Spotify view is not that great to be honest. I will see if I change it and I am happy with it I will share. But for not it’s not very good. 