Awesome theme and instructions. Love this material design. Combined with bubble card, this is incredible. Created a custom HVAC Button-Card for my Aquara E1 as well.
How does it look like?
Hello guys, I just started with the cool theme today and I’m thrilled.
But I have a small problem that I can’t get any further at the moment.
I can no longer click the edit button because it disappears under the “bottom bar”.
And is it possible to use Bubble Card without this offset to the right (I hope you can see it in this bright picture). It’s no longer in the middle.
Thanks for your help 
How do I have to adapt the code so that I have the edit button higher up?
I dont know how to fix that:
I think i’ve tried everything in this thread to minimize the margin between cards but i can’t seem to fix it.Whats the easiest way of setting the top and bottom margin for all cards?
In the generated html i see this for example:
<hui-horizontal-stack-card style="margin-bottom: 40px;margin-top: 5px;">
I’ve done nothing fancy. Just copied the examples from Leon…
1 Like
Ok, found it: masonry-view-card-margin: 10px 20px
I’ll show you another dashboard that I created by collecting ideas from the community and revisiting them a bit, thanks to all the people who shared their creations!
9 Likes
Hi @Arroma. That looks great! Simple but professional
Is there any way you could share the code for your dashboard/theme with us. GitHub or something similar?
It would be great to be able to try that out for myself
1 Like
Proud to see that you are interested!
I added the link to github
1 Like
Thanks you so much 
I will definitely take a look at it and try it out
1 Like
You might also want to create a separate thread for this in the forum @Arroma .
I think that more people will be interested in the design and may have questions and further ideas 
1 Like
Then I’ll open a thread, thanks for the suggestion and above all for your interest!
2 Likes
Hi,
Trying to implement this wonderful theme to my setup and got stuck when adding the lights cards. I got this error message:
Can anyone help ?
did you set entity in your card?
Put the whole card code here please
That was the mistake, I changed the entity on one place but not on the other one 
My attempt on a HVAC card for my Aquaras, which doesn’t break the whole design.
Though I can not decide which version I will use
Here a different variant, which has the swipe card feature included and matches the rounded version.
1 Like
Super nice! Can you share you code? Would go for both, as it wouldn’t bother me to have the temperature curve and the state shown below in the button card.
Sure. Here you go. Its my decluttering-card template for the first variant. Its using mini-graph-card and custom-button-card.
Be aware,that the color variables are related to leon rounded theme.
You need to make a button, which just turns on and off your climate entity.
material_hvac:
default:
- entity: climate.your_climate
- sensor_temp: here temperature sensor
- sensor_hum: here humidity sensor
- bg_color_control: var(--primary-background-color)
- bg_color_graph: var(--primary-background-color)
- bg_color_off_graph_value: var(--primary-text-color)
- bg_color_on_graph_value: var(--red)
card:
type: custom:button-card
entity: '[[entity]]'
icon: mdi:thermostat
tap_action:
action: toggle
haptic: medium
show_icon: false
show_name: false
custom_fields:
graph:
card:
type: custom:mini-graph-card
entities:
- entity: '[[sensor_temp]]'
color: red
index: 0
name: Temperatur
align_state: left
- color: var(--blue)
entity: '[[sensor_hum]]'
index: 0
name: Feucht
show_state: true
y_axis: secondary
align_state: right
show:
icon: false
name: false
labels: false
legend: true
card_mod:
style: |
ha-card {
background-color:
{%- set hvac = states('[[entity]]') %}
{%- if hvac == 'heat' %}[[bg_color_on_graph_value]]
{%- else %}[[bg_color_off_graph_value]]
{%- endif %};
border-radius: 24px;
font-size: 28px !important;
}
.graph {
background: [[bg_color_graph]];
display: flex;
overflow: hidden; /* Temporary fix for graph overflow bug */
}
.graph__legend {
margin-top: 0px !important;
justify-content: center !important;
}
.graph__legend__item {
font-size: 10px !important;
line-height: 16px !important;
padding: 6px 10px !important;
margin-top: 0px !important;
border-radius: 100px !important;
z-index: 1 !important;
}
.states{
height: 1.5rem;
font-size: 12px;
font-weight: 500 !important;
color:
{%- set hvac = states('[[entity]]') %}
{%- if hvac == 'heat' %}var(--white) !important
{%- else %}var(--primary-background-color) !important
{%- endif %};
}
.state__value {
font-family: 'Montserrat'!important;
}
.state__uom {
font-size: 12px !important;
color: var(contrast2);
align-self: flex-end !important;
}
.states--secondary {
font-size: 12px !important;
color: {%- set hvac = states('[[entity]]') %}
{%- if hvac == 'heat' %}var(--black) !important
{%- else %}var(--contrast10) !important
{%- endif %};
align-self: flex-start !important;
}
button_up:
card:
type: custom:button-card
icon: mdi:chevron-up
name: Increase Temp
show_name: false
tap_action:
action: call-service
service: climate.set_temperature
service_data:
entity_id: '[[entity]]'
temperature: |
[[[
var temp = ((states['[[entity]]'].attributes.temperature) + 0.5);
return temp;
]]]
styles:
icon:
- width: 28px
- color: |
[[[
if (states['[[entity]]'].state === 'heat') {
return 'var(--contrast20)';
} else {
return 'var(--contrast8)';
}
]]]
card:
- background: |
[[[
if (states['[[entity]]'].state === 'heat') {
return 'var(--contrast2)';
} else {
return 'none';
}
]]]
- animation: |
[[[
if (states['[[entity]]'].state === 'heat') {
return 'blink 3s';
}
]]]
button_target_temp:
card:
type: custom:button-card
entity: '[[entity]]'
show_name: true
show_state: false
show_icon: false
name: |
[[[
var temp = (states['[[entity]]'].attributes.temperature);
return temp;
]]]
styles:
name:
- font-size: 21px
- background: none
- color: |
[[[
if (states['[[entity]]'].state === 'heat') {
return 'var(--contrast20)';
} else {
return 'var(--contrast8)';
}
]]]
- border-radius: 50px
- padding: 8px
card:
- background: none
- animation: |
[[[
if (states['[[entity]]'].state === 'heat') {
return 'blink 3s';
}
]]]
button_down:
card:
type: custom:button-card
icon: mdi:chevron-down
name: Decrease Temp
show_name: false
tap_action:
action: call-service
service: climate.set_temperature
service_data:
entity_id: '[[entity]]'
temperature: |
[[[
var temp = ((states['[[entity]]'].attributes.temperature) - 0.5);
return temp;
]]]
styles:
icon:
- width: 28px
- color: |
[[[
if (states['[[entity]]'].state === 'heat') {
return 'var(--contrast20)';
} else {
return 'var(--contrast8)';
}
]]]
card:
- background: |
[[[
if (states['[[entity]]'].state === 'heat') {
return 'var(--contrast2)';
} else {
return 'none';
}
]]]
- animation: |
[[[
if (states['[[entity]]'].state === 'heat') {
return 'blink 3s';
}
]]]
styles:
grid:
- grid-template-columns: 80% 20%
- grid-template-areas: '"graph button_up" "graph button_target_temp" "graph button_down"'
- grid-template-rows: 1fr 1fr 1fr
card:
- height: 100%
- padding: 0px 0px 0px 0px
- margin: 0px 0px 0px 0px
- background: '[[bg_color_control]]'
custom_fields:
button_up:
- width: 80%
- padding: 0
- margin: 0
- justify-self: center
- align-self: center
button_target_temp:
- width: 100%
- padding: 0
- justify-self: center
button_down:
- width: 80%
- padding: 0
- margin: 0
- justify-self: center
- align-self: center
graph:
- heigth: 100%
- width: 100%
- padding: 0
- margin: 0
- overflow: visible
1 Like
Thanks will have a look!
can someone help me. I don get it
type: custom:button-card
name: Schlafzimmer
icon: mdi:bed-king-outline
entity: sensor.rt_schlafzimmer_aktuelle_temperatur
show_state: true
tap_action:
action: navigate
navigation_path: '#pop-up-schlafzimmer'
custom_fields:
btn:
card:
type: custom:mushroom-chips-card
chips:
- type: template
tap_action:
action: toggle
icon: mdi:ceiling-light
entity: light.00169be9a0f15a_2
card_mod:
style: |
ha-card {
--chip-background: {{ 'var(--red)' if is_state('light.00169be9a0f15a_2', 'on') else 'var(--contrast2)' }};
padding: 0px!important;
border-radius: 100px!impportant;
--primary-text-color: var(--contrast20);
- type: template
tap_action:
action: toggle
icon: mdi:led-strip-variant
entity: light.00169be9a0f15a_2
card_mod:
style: |
ha-card {
--chip-background: {{ 'var(--red)' if is_state('light.00169be9a0f15a_2', 'on') else 'var(--contrast2)' }};
padding: 0px!important;
border-radius: 100px!impportant;
--primary-text-color: var(--contrast20);
- type: template
tap_action:
action: toggle
icon: mdi:weather-windy
entity: light.00169be9a0f15a_2
card_mod:
style: |
ha-card {
--chip-background: {{ 'var(--red)' if is_state('light.00169be9a0f15a_2', 'on') else 'var(--contrast2)' }};
padding: 0px!important;
border-radius: 100px!impportant;
--primary-text-color: var(--contrast20);
btn1:
card:
type: custom:mushroom-chips-card
chips:
- type: template
tap_action:
action: toggle
icon: mdi:fan
entity: light.00169be9a0f15a_2
card_mod:
style: |
ha-card {
--chip-background: {{ 'var(--green)' if is_state('light.00169be9a0f15a_2', 'on') else 'var(--green-tint)' }};
padding: 0px!important;
border-radius: 100px!impportant;
styles:
grid:
- grid-template-areas: '"n btn1 btn" "s btn1 btn" "i btn1 btn"'
- grid-template-columns: 1fr min-content min-content
- grid-template-rows: min-content min-content 1fr
img_cell:
- justify-content: start
- position: absolute
- width: 100px
- height: 100px
- left: 0
- bottom: 0
- margin: 0 0 -20px -20px
- background: var(--contrast10)
- border-radius: 500px
icon:
- width: 45px
- color: var(--contrast1)
- opacity: '0.6'
card:
- padding: 10px 0px 10px 10px
- background-color: var(--contrast4)
custom:fields:
btn:
- justify-self: end
- align-self: start
btn1:
- justify-self: end
- align-self: start
name:
- justify-self: start
- align-self: start
- font-size: 13px
- font-weight: 500
- color: var(--contrast20)
state:
- min-height: 80px
- justify-self: start
- align-self: start
- font-size: 11px
- opacity: '0.7'