An easy fix could be to add a margin that fits your dashboard
- margin-bottom: 5px
You mean me? If so, here you go 
homeassistant/rounded.yaml at main · CM000n/homeassistant · GitHub
1 Like
Really great thank you!
In my setup I just have individual scripts for each zone, then I trigger them with buttons. But its really handy to be able to do two or more zones in one go.
Yes thank you!
You are using yaml mode only? TO edit youre dashboard?
Yes, I use .yaml mode only. This is easier for me than fiddling around with the GUI and I can use standard .yaml anchors relatively easily.
@Diggs Hey, ye you can use the ‘height: 100%’ statement and remove any aspect ratio statement. Here’s an example:
square: false
columns: 2
type: grid
cards:
- type: custom:button-card
tap_action:
action: call-service
haptic: medium
service: media_player.volume_down
service_data:
entity_id: media_player.sonos
styles:
icon:
- width: 24px
- color: var(--contrast20)
img_cell:
- justify-content: flex-start
- margin-top: 0px
name:
- justify-self: start
- font-size: 14px
- margin-top: 0px
- color: var(--contrast20)
card:
- height: 84px
- border-radius: 24px
- padding: 8px 0px 16px 20px
- background-color: var(--contrast2)
grid:
- grid-template-areas: '"i" "n"'
icon: mdi:volume-minus
name: Volume omlaag
- type: custom:button-card
tap_action:
action: call-service
haptic: medium
service: media_player.volume_up
service_data:
entity_id: media_player.sonos
styles:
icon:
- width: 24px
- color: var(--contrast20)
img_cell:
- justify-content: flex-start
- margin-top: 0px
name:
- justify-self: start
- font-size: 14px
- margin-top: 0px
- color: var(--contrast20)
card:
- height: 84px
- border-radius: 24px
- padding: 8px 0px 16px 20px
- background-color: var(--contrast2)
grid:
- grid-template-areas: '"i" "n"'
icon: mdi:volume-plus
name: Volume omhoog
- type: custom:button-card
icon: mdi:sofa-single
tap_action:
action: call-service
service: scene.turn_on
haptic: medium
service_data:
entity_id: scene.gezellig
styles:
card:
- border-radius: 24px
- background-color: var(--blue)
- height: 100%
icon:
- color: var(--black)
- height: 40px
- type: vertical-stack
cards:
- type: custom:button-card
tap_action:
action: call-service
haptic: medium
service: script.sonos_rewind
styles:
icon:
- width: 24px
- color: var(--contrast20)
img_cell:
- justify-content: flex-start
- margin-top: 0px
name:
- justify-self: start
- font-size: 14px
- margin-top: 0px
- color: var(--contrast20)
card:
- height: 84px
- border-radius: 24px
- padding: 8px 0px 16px 20px
- background-color: var(--contrast2)
grid:
- grid-template-areas: '"i" "n"'
icon: mdi:rewind-10
name: Sec achteruit
- type: custom:button-card
tap_action:
action: call-service
haptic: medium
service: script.sonos_forward
styles:
icon:
- width: 24px
- color: var(--contrast20)
img_cell:
- justify-content: flex-start
- margin-top: 0px
name:
- justify-self: start
- font-size: 14px
- margin-top: 0px
- color: var(--contrast20)
card:
- height: 84px
- border-radius: 24px
- padding: 8px 0px 16px 20px
- background-color: var(--contrast2)
grid:
- grid-template-areas: '"i" "n"'
icon: mdi:fast-forward-10
name: Sec vooruit
- type: custom:button-card
tap_action:
action: call-service
haptic: medium
service: script.sonos_prev
styles:
icon:
- width: 24px
- color: var(--contrast20)
img_cell:
- justify-content: flex-start
- margin-top: 0px
name:
- justify-self: start
- font-size: 14px
- margin-top: 0px
- color: var(--contrast20)
card:
- height: 84px
- border-radius: 24px
- padding: 8px 0px 16px 20px
- background-color: var(--contrast2)
grid:
- grid-template-areas: '"i" "n"'
icon: mdi:skip-previous
name: Vorige
- type: custom:button-card
tap_action:
action: call-service
haptic: medium
service: script.sonos_next
styles:
icon:
- width: 24px
- color: var(--contrast20)
img_cell:
- justify-content: flex-start
- margin-top: 0px
name:
- justify-self: start
- font-size: 14px
- margin-top: 0px
- color: var(--contrast20)
card:
- height: 84px
- border-radius: 24px
- padding: 8px 0px 16px 20px
- background-color: var(--contrast2)
grid:
- grid-template-areas: '"i" "n"'
icon: mdi:skip-next
name: Volgende
@CM000n Haha no worries, it’s looking great. And if it suits your needs it’s perfect!
@eterpstra Certainly! It was something I had been searching for a long time, and I’m really happy with how it’s currently working.
To get started, create a regular group that includes all the lights you want to combine. This should be a standard group, not a light group.
woonkamer_lampen:
group:
name: Woonkamer lampen
entities:
- light.plafondlamp_groep
- light.tafellamp_groep
- light.ikea_lamp
- light.tv_lamp
Next, create a light template using the following code (which I found in this forum post):
light:
- platform: template
lights:
actieve_woonkamer_lampen:
friendly_name: "Actieve Woonkamer Lampen"
level_template: >
{% set data = namespace(numbers=[]) %}
{% for s in state_attr('group.woonkamer_lampen', 'entity_id') %}
{% if is_state(s, 'on') %}
{% set data.numbers = [state_attr(s, "brightness")] + data.numbers %}
{% endif %}
{% endfor %}
{{data.numbers|average|round(0)}}
value_template: >
{%- set data = namespace(res="off") -%}
{% for s in state_attr('group.woonkamer_lampen', 'entity_id') %}
{% if is_state(s, 'on') %}
{%- set data.res = "on" -%}
{% endif %}
{%- endfor -%}
{{data.res}}
temperature_template: >
{% set data = namespace(numbers=[]) %}
{% for s in state_attr('group.woonkamer_lampen', 'entity_id') %}
{% if state_attr(s, "color_temp") %}
{% set data.numbers = [state_attr(s, "color_temp")] + data.numbers %}
{% endif %}
{% endfor %}
{{data.numbers|average|round(0)}}
turn_on:
- service: light.turn_on
data:
entity_id: group.woonkamer_lampen
turn_off:
- service: light.turn_off
data:
entity_id: group.woonkamer_lampen
set_level:
- service: light.turn_on
target:
# wat te doen als alles uit staat? If statement om alles aan te zetten
entity_id: "{{ expand('group.woonkamer_lampen') | selectattr('state','eq','on') | map(attribute='entity_id') | join(',') }}"
data:
brightness: "{{ brightness }}"
set_temperature:
- service: light.turn_on
target:
entity_id: "{{ expand('group.woonkamer_lampen') | selectattr('state','eq','on') | map(attribute='entity_id') | join(',') }}"
data:
color_temp: "{{ color_temp }}"
And use that group for for the slider entity.
3 Likes
Thanks it worked!
Last question: You have 4 groups of Lights in the home screen. But when i add the cards each by each, they are placed below each other. How can I fix this?
Use a grid card first and set the columns to ‘2’. Now place the light cards inside the grid card
Thanks that worked
But as far as i can see, the spacing between the 4 grids, there is a bigger gap with my own grids?
Worked, great job !
Thanks.
Works perfectly for brightness and color temperature, is there also a solution to change the color uniformly?
Has anyone managed to do this?
Greetings
Moss
Hi,
I have created a button and want to toggle it to turn on a switch. however, the toggle is not working:
type: custom:button-card
icon: mdi:water-boiler
aspect_ratio: 1/1
tap_action:
action: toggle
haptic: medium
service: siwtch.turn_off
entity_id: switch.sonoff
What am i doing wrong?
siwtch dont work 
Try switch.toggle
omg haha thanks!
Thanks for this. Looks good. I’ll definitely be ‘stealing’ parts of this.
Just a heads up for you in Rounded.yaml
app-header-selection-bar-color: transparant → app-header-selection-bar-color: transparent
Anyone knows why on stack-in-a-card, the borders does not work?
type: custom:vertical-stack-in-card
cards:
- square: false
columns: 5
type: grid
cards:
- type: custom:button-card
icontype: custom:button-card
icon: mdi:power
entity: media_player.ytube_music_player
show_name: false
aspect_ratio: 1/1
tap_action:
action: call-service
haptic: success
service: media_player.toggle
service_data:
entity_id: media_player.ytube_music_player
styles:
card:
- border-radius: 24px
- background: var(--green)
icon:
- width: 32px
- color: var(--black)
state:
- value: playing
styles:
card:
- background: var(--red)
- type: custom:button-card
icon: mdi:play
entity: media_player.ytube_music_player
show_name: false
tap_action:
action: call-service
haptic: medium
service: script.youtubemusic_play_pause
aspect_ratio: 1/1
styles:
icon:
- width: 32px
- color: var(--green)
card:
- border-radius: 24px
- background-color: var(--contrast4)
state:
- value: playing
name: Pausar
icon: mdi:pause
styles:
card:
- background-color: var(--yellow)
- type: custom:decluttering-card
template: card_players
variables:
- entity: media_player.ytube_music_player
What’s that?
I have just noticed that the temperature slider goes in the other direction than it is usual in the more-info dialogues of Homeassistant. There it goes from left (warm) to right (cold) colour temperature.
I have therefore set the temperature slider template to inverse: true under the my-slider-v2 options and have also inverted the colour gradients for temperature and temperature-tint in the theme .yaml file. Just in case anyone else notices this. So it’s quite easy to change 
Unfortunately, the current solution with the dynamic template light groups, for switched-on lights, in combination with the sliders is somewhat unreliable for me. For the brightness it works wonderfully, but for the colour temperature the slider jumps back and forth, and usually does not manage to apply the desired colour temperature. Does anyone else have this problem?
nvmd. it was because of my inverse: true setting under the my-slider-v2 options. Instead I had to use flipped: true.
BTW: @LE0N: Which custom font are you using?
Thank you! Kinda works, but I guess it’s a tad too much 
Works better if you just leave the brightness section as it is. At least as long as you don’t switch the light to White:
1 Like
No Idea haha, I removed and nothing changed, maybe a misswriting.