try this:
type: custom:button-card
template: title_card
entity: sensor.greeting_time
show_icon: false
label: #test
show_label: false
name: >
[[[
const emojis = ["!", ".", ". 😉", "! 👍", ". 🤩"];
const randomEmoji = emojis[Math.floor(Math.random() * emojis.length)];
return (entity.state) + ', ' + hass.user.name + randomEmoji
]]]
Nice setup! I’m looking for a nice persons card. Could you share your code for that one?
So the person card is done in 2 parts. You have the cards themselves, and then the template.
The person cards themselves are using the following code;
type: custom:decluttering-card
template: person_card_new
variables:
- entity: person.jacob
- name: Jacob
- battery: device_tracker.jacobs_iphone_3
- battery_state: sensor.jacobs_iphone_battery_state
- battery_level: sensor.jacobs_iphone_battery_level
- work_sensor: sensor.jake_to_work
- home_sensor: sensor.jake_work_to_home
- work_icon: mdi:car
- show_entity_picture: true
- tap_action: null
action: none
haptic: light
Then you’ll need to add a template to the dashboard directly. To do this, click on the 3 dots in the top right-hand corner, and then edit dashboard, and then click on the 3 dots again and choose Raw Configuration File to edit the dashboard template.
Then you’ll want to add the following;
decluttering_templates:
person_card_new:
default:
- size: 60%
- color: auto
- background_color: var(--primary-background-color)
- variable: spin
- spin: false
- show_name: false
- show_state: true
- show_label: false
- show_icon: true
- show_last_changed: false
- show_entity_picture: true
- aspect_ratio: 2/1
- margin-right: 20px
- label: ' '
- off_icon_color: gray
- off_name_color: gray
- off_state_color: gray
card:
type: custom:button-card
battery: '[[battery]]'
battery_android: '[[battery_android]]'
home_sensor: '[[home_sensor]]'
work_sensor: '[[work_sensor]]'
work_icon: '[[work_icon]]'
name: '[[name]]'
icon: mdi:[[icon]]
size: '[[size]]'
color: '[[color]]'
aspect_ratio: '[[aspect_ratio]]'
entity: '[[entity]]'
label: '[[label]]'
show_name: '[[show_name]]'
show_icon: '[[show_icon]]'
show_state: '[[show_state]]'
show_label: '[[show_label]]'
show_last_changed: '[[show_last_changed]]'
show_entity_picture: '[[show_entity_picture]]'
styles:
card:
- border-radius: 22px
- '--card-background-color': '[[background_color]]'
icon:
- grid-column: 1
- grid-row: 1 / 4
label:
- color: gray
- font-size: 11px
- padding: 0px 10px
- justify-self: start
state:
- font-size: 12px
- padding: 0px 10px
- justify-self: start
- text-transform: capitalize
- font-weight: bold
- padding-left: 10px
- color: var(--primary-text-color)
grid:
- grid-template-areas: '"i s" "i battery" "i home" "i work"'
- grid-template-columns: 50% 50%
- grid-template-rows: 25% 25% 25% 25%
img_cell:
- align-self: start
- text-align: start
name:
- justify-self: start
- padding-left: 10px
- font-weight: bold
- font-size: 13px
entity_picture:
- height: 60px
- width: 60px
- border-radius: 100%
custom_fields:
battery:
- align-self: start
- justify-self: start
- font-size: 12px
- color: var(--secondary-text-color)
battery_android:
- align-self: start
- justify-self: start
- font-size: 12px
- color: var(--secondary-text-color)
home:
- align-self: start
- justify-self: start
- font-size: 12px
- color: var(--secondary-text-color)
work:
- align-self: start
- justify-self: start
- font-size: 12px
- color: var(--secondary-text-color)
custom_fields:
battery: |
[[[
var state = states['[[battery_state]]'].state;
if(state == "Charging")
return `<ha-icon
icon="mdi:battery-charging"
style="; --mdc-icon-size: 14px; padding-left: 6px; padding-right: 5px; color: var(--primary-color);">
</ha-icon><span>${states['[[battery_level]]'].state}%</span>`
else return `<ha-icon
icon="mdi:battery"
style="; --mdc-icon-size: 14px; padding-left: 5px; padding-right: 5px; color: var(--primary-color);">
</ha-icon><span>${states['[[battery_level]]'].state}%</span>`
]]]
battery_android: |
[[[
var state = states['[[battery_state]]'].state;
if(state == "charging")
return `<ha-icon
icon="mdi:battery-charging"
style="; --mdc-icon-size: 14px; padding-left: 6px; padding-right: 5px; color: var(--primary-color);">
</ha-icon><span>${states['[[battery_level]]'].state}%</span>`
else return `<ha-icon
icon="mdi:battery"
style="; --mdc-icon-size: 14px; padding-left: 5px; padding-right: 5px; color: var(--primary-color);">
</ha-icon><span>${states['[[battery_level]]'].state}%</span>`
]]]
home: |
[[[
return `<ha-icon
icon="mdi:office-building-marker"
style="; --mdc-icon-size: 14px; padding-left: 6px; padding-right: 5px; color: var(--primary-color);">
</ha-icon><span>${states['[[home_sensor]]'].state}mins</span>`
]]]
work: |
[[[
return `<ha-icon
icon="mdi:home"
style="; --mdc-icon-size: 14px; padding-left: 6px; padding-right: 5px; color: var(--primary-color);">
</ha-icon><span>${states['[[work_sensor]]'].state}mins</span>`
]]]
state:
- value: not_home
styles:
card:
- opacity: 0.6
entity_picture:
- border: 2px solid var(--severity-1)
- value: home
styles:
entity_picture:
- border: 2px solid var(--severity-5)
- value: Jake Work
styles:
entity_picture:
- border: 2px solid var(--severity-4)
- value: Emma Work
styles:
entity_picture:
- border: 2px solid var(--severity-4)
- value: Emma Home
styles:
entity_picture:
- border: 2px solid var(--severity-3)
- value: Jake Home
styles:
entity_picture:
- border: 2px solid var(--severity-3)
Hopefully this will help.
Hi! I am really happy with how my Rounded dashboar is coming together! REally happy with this project!
I have the following ‘heating’ card, but would like to change something and I don’t know how.
My code is:
type: custom:button-card
entity: climate.living_room
name: |-
[[[ return " State: " + states['climate.living_room'].attributes.hvac_action
]]]
icon: phu:rooms-living
label: >-
[[[ return states['climate.living_room'].attributes.current_temperature + "
°C";
]]]
show_label: true
tap_action:
action: more-info
entity: climate.living_room
double_tap_action:
action: call-service
service: input_boolean.toggle
data: {}
target:
entity_id: input_boolean.heating_boost_living_room
custom_fields:
slider:
card:
type: custom:my-slider-v2
entity: input_number.temperature_setting_living_room
styles:
container:
- background: none
- border-radius: 100px
- overflow: visible
card:
- height: 34px
- padding: 0 8px
- background: >-
linear-gradient(90deg, rgba(177,197,255, 0.5) 0%,
rgba(255,175,131, 1) 100%
track:
- overflow: visible
- background: none
progress:
- background: none
thumb:
- background: var(--black)
- top: 5px
- right: '-6px'
- height: 24px
- width: 24px
- border-radius: 100px
setting:
card:
type: custom:mushroom-climate-card
entity: climate.living_room
show_temperature_control: true
primary_info: none
secondary_info: none
tap_action:
action: none
hold_action:
action: none
double_tap_action:
action: none
fill_container: false
icon_type: none
card_mod:
style:
mushroom-climate-temperature-control$:
mushroom-input-number$: |
.value {
color: var(--contrast10) !important;}
#container .button:nth-child(1) {
--card-mod-icon-color: var(--contrast10);
}
#container .button:nth-child(3) {
--card-mod-icon-color: var(--contrast10);
}
.: |
ha-card {
background-color: transparent;
border: 0px
}
styles:
grid:
- grid-template-areas: '"i l" "n setting" "slider slider"'
- grid-template-columns: 1fr 1fr
- grid-template-rows: 1fr min-content min-content
card:
- background: rgba(144, 191, 255,var(--color-tint))
- padding: 16px
- '--mdc-ripple-press-opacity': 0
img_cell:
- justify-self: start
- width: 60px
- margin: 1% 0 -10% 0
icon:
- width: 60px
- height: 60px
- color: var(--contrast20)
name:
- justify-self: start
- font-size: 26px
- margin: 4px 0 12px 0
- color: var(--contrast20)
label:
- justify-self: end
- font-weight: bold
- font-size: 26px
- margin: 1% 11% -10% 0
- color: var(--contrast20)
custom_fields:
setting:
- justify-self: end
- margin: 4px 0 12px 0
- font-size: 16px
- width: 130px
Thanks a lot in advance!
Kind regards, Patrick
Guys,
I need your help. How can I customize the grid so that the left light card takes up 2/3 of the space and the right light card 1/3. With Grid I can only select half, by 2 colums. Same in the horizontal stack. But I would like to have it like in picture 2
It should look more like this:
But I’m having a hard time with everything, whether with the layout card or the grid card. I need your help. I’ve been reading for almost 3 days and can’t get any further.
my goal is to create a “bento-style” grid layout like the one in the next picture.
I took screenshots of each of my cards and then used an image editor to create the layout I liked best. Good tip, by the way, to test many variations quickly and easily
Here ist the code so far, for the 2 light cards:
square: false
type: grid
cards:
- type: custom:button-card
name: Hue
icon: '[[[ return entity.attributes.icon ]]]'
entity: light.hue
tap_action:
action: toggle
haptic: medium
hold_action:
action: more-info
haptic: medium
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(--contrast20)";
else return "var(--contrast8)";
]]]
- top: 2px
- right: '-8px'
- height: 12px
- width: 12px
- border-radius: 10px
styles:
grid:
- grid-template-areas: '"i" "n" "slider"'
- grid-template-columns: 1fr
- grid-template-rows: 1fr min-content min-content
card:
- font-family: In case of a custom font, otherwise you can remove this line
- 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:
- 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)
- value: 'off'
styles:
icon:
- color: var(--contrast20)
name:
- color: var(--contrast20)
- type: custom:button-card
name: Hue Küche
icon: '[[[ return entity.attributes.icon ]]]'
entity: light.kuche
tap_action:
action: toggle
haptic: medium
hold_action:
action: more-info
haptic: medium
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(--contrast20)";
else return "var(--contrast8)";
]]]
- top: 2px
- right: '-8px'
- height: 12px
- width: 12px
- border-radius: 10px
styles:
grid:
- grid-template-areas: '"i" "n" "slider"'
- grid-template-columns: 1fr
- grid-template-rows: 1fr min-content min-content
card:
- font-family: In case of a custom font, otherwise you can remove this line
- 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:
- 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)
- value: 'off'
styles:
icon:
- color: var(--contrast20)
name:
- color: var(--contrast20)
columns: 2
here is a detailed view of the layout as it should be. Maybe do everything with the layout card in CSS?
Here would be the perfect grid-template-area:
grid-template-areas:
"a b c d e f h h"
". i i i j j h h"
"k k l l l . h h"
"m m n n o o h h"
"p q r s t t h h"
"u u v w t t h h"
But when I use it, the dashboard goes much further out to the right and down than the tablet is big.
I love and hate you for this post =) Bento style dashboards just look so incredibly good. That was one of the best tips I’ve seen so far. Thanks for that!
Now I’ve got it in my head that I’ve been working on how to design such a dashboard for days. After 3 days of troubleshooting I’m going crazy because the layout is incredibly difficult to design. But when one day the moment comes when it’s finished and I get a big smile on my face, I’ll kiss your cheek in thanks
PS: If I may be so bold as to ask and you have a few minutes to spare, feel free to take a look here and here. It says what it’s all about. If anyone can solve it, it’s the knight of the community round, aka you 
I would definitely try and use the layout card for at least 90% of the layout.
If possible what i would do is use a layout card with all my cards for each row of cards to have it control the widths of each, but let HA control individually the order of the rows.
So not 1 huge card, but 1 card for each row.
Here is an example of what i think you are looking for with the layout card:
type: custom:layout-card
layout_type: custom:grid-layout
cards:
- type: custom:mushroom-light-card
entity: light.bedroom_chest_lamp
use_light_color: true
fill_container: false
- type: custom:mushroom-template-card
icon: mdi:test-tube
primary: Test
secondary: Test
layout:
grid-template-columns: auto 33%
grid-template-rows: auto
max_cols: 2
margin: '-4px'
Hi Leon,
I am really impressed by the rounded dashboard setup. Finally a dashboard which less techie and user friendly for others. I am trying to implement it. However, am getting an error when pasting the code for the ‘graph’-part into the rounded.yaml (not pasting the full code here)
card-mod-theme: Rounded
card-mod-view-yaml: |
hui-masonry-view: $: | /* Swipe-card full width on mobile */
The error I get is:
bad indentation of a mapping entry (223:21)
Which is rather strange because the indentation seems ok. I fiddled a bit around, but nothing seems to resolve it. Any thoughts?
regards,
Jeroen
Hi @jeells102,
First off, best wished for 2024!
Your person cards indeed look great and thanks for sharing!
Have added the decluttering card via HACS and added the template to the raw config of the dashboard but constantly getting an error - custom decluttering card doesn’t exist.
Maybe you have had similar issues when you started and was hoping for a pointer. Already have the button_card_templates: with all the standard template of the rounded dashboard in the config file.
Thanks!
Great, that worked.
Any way to have a subtitle with this info:
subtitle: >-
The weather is {{ states('weather.buienradar') }} and it's {{
states('sensor.outdoor_temperature') }}°C outside. ☁🌡
🚗{% if states('sensor.ev6_ev_battery_level') == 'unavailable' %} {%
elif states('sensor.ev6_ev_battery_level')|float < 50 %} EV6 battery is
almost empty, battery level is {{ states('sensor.ev6_ev_battery_level')
}}%
({{ states('sensor.ev6_ev_range') }} KM range){% else %} {% endif %}
♻️ {{state_attr('calendar.bins', 'message')}} on {{
as_timestamp(state_attr("calendar.bins","start_time") |
default(now(),true) )| timestamp_custom('%-d %b') }}
Heya!
Happy New year! In your normal home assistant configuration file, did you add the decluttering card js file at all? Mine looks like this;
frontend:
themes: !include_dir_merge_named themes/
extra_module_url:
- /local/community/custom-brand-icons/custom-brand-icons.js
- /hacsfiles/lovelace-card-mod/card-mod.js
- /local/decluttering-card.js
I think that’s the cause of your issue there.
That did the trick! Do you have a way to customize the colors? Trying to match the original colours of the person card - orange when home - grey when away/work.
But whatever I change, nothing happens. Not so used to the declutter card yet 
Hi @LE0N ,
could you (or anybody else) share your code for the template sensor for the television card with me, to display the correct source from the media_player source list? Thanks a lot.
Try this - I don’t have a suitable bin calendar to test but the rest should work.
type: custom:button-card
template: title_card
entity: sensor.greeting_time
show_icon: false
show_label: true
name: >
[[[
const emojis = ["!", ".", ". 😉", "! 👍", ". 🤩"];
const randomEmoji = emojis[Math.floor(Math.random() * emojis.length)];
return (entity.state) + ', ' + hass.user.name + randomEmoji
]]]
label: >
[[[
const weather = states['weather.buienrader'].state;
const outdoorTemperature = states['sensor.outdoor_temperature'].state;
const evBatteryLevel = states['sensor.ev6_ev_battery_level'].state;
const evRange = states['sensor.ev6_ev_range'].state;
const binsMessage = states['calendar.bins'].attributes.message;
const binsStartTime = states['calendar.bins'].attributes.start_time;
const weatherString = `☁🌡 The weather is ${weather} and it's ${outdoorTemperature}°C outside.`;
let evStatusString = `<br> 🚗`;
if (evBatteryLevel === 'unavailable') {
`<br> 🚗`
} else if (parseFloat(evBatteryLevel) > 50) {
evStatusString += ` EV6 battery is almost empty, battery level is ${evBatteryLevel}% (${evRange} KM range)`;
} else {
`<br> 🚗`;
}
const binsDateString = `<br>♻️ ${binsMessage} on ${new
Date(binsStartTime).toLocaleDateString('en-US', {
day: 'numeric',
month: 'short'
})}`;
return weatherString + evStatusString + binsDateString
]]]
Heya,
This is a really simple change. Under the state section and style, just add “background” and then the colour you want. So for example;
- value: home
styles:
card:
- background: '#CEF595'
entity_picture:
- border: 2px solid var(--severity-5)
Hope this helps 
Very much! Thanks a lot 
Focused to much on the “background_color”
Hello,
I like very much this theme 
. I’ll try to implement it
Thank you very much! This has definitely helped me with my “2 card layout”. This will help me a lot with the dashboard in the mobile version.
In the meantime I have also realized that it is easier for me to work with rectangular button-cards only. For one thing, it looks better and more uniform, and for another, it makes the layout easier for me.
Unfortunately, I still can’t manage to write the layout in such a way that the height adapts to the tablet… But since I don’t want to annoy you with my constant questions, I’ve created a thread here in the hope that the community will know what to do. If you still don’t mind, I would of course, as always, be very happy about your help =)
Hey @jeells102, could you please share your code from one of your plug cards? I’d really appreciate it!