Beautiful dashboard.
Can you share code for speedtest ? Your graphs are amazing
Hey everyone. @dimitri.landerloos has been flat out helping everyone with customising their cards and dashboards and is spending a lot of his time doing this. Why donāt we all buy him a coffee to show some appreciation and thank him for his help.
2 Likes
Appreciate it, but there is no need for that. I wouldnt do it if i didnt enjoy it. Keep your money for your own loved ones. Only ever donate if you are a secret millionaire 
3 Likes
@dimitri.landerloos
How i can put a little a left the buttons, i thought with margin-left: -10px but doesnāt work
.button {
margin-left: -15px
}
Should be able to just do:
mushroom-button {
position: relative;
left: -10px;
}
And for the other individual buttons:
mushroom-cover-buttons-control$:
mushroom-button:nth-child(1)$: |
.button {
position: relative;
left: -10px;
}
.: |
mushroom-button {
position: relative;
left: -10px;
}
It works, but appear like that, but I want a little left, but donāt like that
hello together,
perhaps anybody of you can give me a hint, how i can more than 1 badge icon for a mushroom-tempalte card
at best, i want to have a badge-icon in each corner
one bage icon is possible with the ānormalā options of mushroom card
but i want to show 2-3 status (motion, music, and so on)
is this possible?
Take a look at this post:
An example with 1 in each corner:
type: custom:mushroom-template-card
primary: Hello, {{user}}
secondary: How are you?
icon: mdi:home
badge_icon: mdi:test-tube
badge_color: green
card_mod:
style: |
mushroom-badge-icon:after {
content: "bug_report";
font-size: 0.9em;
font-family: 'Material Icons';
position: absolute;
display: flex;
justify-content: center;
align-items: center;
top: 32px;
color: var(--icon-color);
background: var(--main-color);
width: var(--mush-badge-size, 16px);
height: var(--mush-badge-size, 16px);
border-radius: var(--mush-badge-border-radius, 50%);
}
mushroom-badge-icon:before {
content: "bug_report";
font-size: 0.9em;
font-family: 'Material Icons';
position: absolute;
display: flex;
justify-content: center;
align-items: center;
right: 32px;
color: var(--icon-color);
background: var(--main-color);
width: var(--mush-badge-size, 16px);
height: var(--mush-badge-size, 16px);
border-radius: var(--mush-badge-border-radius, 50%);
}
mushroom-shape-icon:before {
content: "bug_report";
font-size: 0.9em;
font-family: 'Material Icons';
position: absolute;
display: flex;
justify-content: center;
align-items: center;
top: 29px;
right: 29px;
color: white;
background: rgba(var(--rgb-green),1);
width: var(--mush-badge-size, 16px);
height: var(--mush-badge-size, 16px);
border-radius: var(--mush-badge-border-radius, 50%);
}
1 Like
Bit more of a complex solution than i would have liked, but overflow: visible; does not work for this it seems.
mushroom-cover-buttons-control$:
mushroom-button:nth-child(1)$: |
.button {
position: relative;
left: -10px;
z-index: 1;
}
.: |
mushroom-button {
position: relative;
left: -10px;
}
ha-card {
padding: 12px 12px 12px 0px !important;
}
mushroom-state-item {
padding: 0px 0px 0px 12px !important;
}
Again perfect help and exactly what was needed. Thank you!!
This is a working heat pump animation:
type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
icon: mdi:heat-pump-outline
icon_color: orange
primary: Heat Pump
card_mod:
style: |
ha-state-icon {
clip-path: polygon(0% 0%, 0% 100%, 23% 100%, 23% 23%, 78% 22%, 77% 78%, 23% 78%, 22% 100%, 100% 100%, 100% 0%);
}
- type: custom:mushroom-template-card
icon: mdi:heat-pump-outline
icon_color: red
card_mod:
style:
mushroom-shape-icon$: |
.shape {
--shape-color: none;
}
.: |
ha-card {
width: 66px;
top: -66px;
}
ha-state-icon {
position: absolute;
animation: spin 2s linear infinite;
clip-path: circle(27.3% at 50% 50%);
}
card_mod:
style: |
ha-card {
height: 66px;
}
But I donāt know how to get it working with a āpumping heaterā.
Because this contains 2 template-cards, I also canāt help you with an animation based on āx Watt usageā or something, like it works with the microwave:
type: custom:mushroom-template-card
icon: mdi:microwave
entity: switch.combi_oven_smartplug
icon_color: |-
{% if states("sensor.combi_oven_smartplug_power") | float(0) > 5 %}
red
{% endif %}
secondary: |
{{ states("sensor.combi_oven_smartplug_power") }} watt |
{{ states("sensor.combi_oven_smartplug_energy") }} kwh
layout: vertical
primary: Magnetron
tap_action:
action: more-info
card_mod:
style: |
ha-state-icon:before {
content: "";
position: absolute;
width: 25%;
height: 25%;
margin: 10%;
{{'animation: cook 1s linear infinite;' if states('sensor.combi_oven_smartplug_power') | float > 4 }}
}
@keyframes cook {
0%, 100% { background: linear-gradient(90deg, white 0%, transparent 50%, transparent 100%); }
33% { background: linear-gradient(90deg, transparent 0%, white 50%, transparent 100%); }
66% { background: linear-gradient(90deg, transparent 0%, transparent 50%, white 100%); }
}
Hopefully someone else can make it work.
I am working on a room climate card, but somehow I canāt seem to be getting rid of the dropshadow of both items at the top. I have tried multiple card-mods but they simply donāt appear to have any effect. Can someone please take a quick look at it? Thanks
type: custom:stack-in-card
keep:
margin: false
box_shadow: false
background: false
card_mod:
style: |
ha-card {
--ha-card-header-font-size: 18px;
}
.card-header {
padding-top: 1px;
padding-bottom: 1px;
color: var(--secondary-text-color);
font-weight: bold !important;
}
cards:
- type: custom:layout-card
layout_type: custom:grid-layout
layout:
grid-template-columns: auto 76px
cards:
- type: custom:stack-in-card
mode: horizontal
cards:
- type: custom:mushroom-template-card
entity: climate.zolder_speelhoek
primary: Speelhoek Zolder
secondary: '{{ state_attr(entity, "current_temperature") }}Ā°C'
icon: mdi:thermometer
icon_color: '{{ states("sensor.zolder_speelhoek_color") }}'
badge_icon: >-
{% if state_attr(entity, 'status').active_faults %}
{% if state_attr(entity, 'status').active_faults[0].faultType == 'TempZoneActuatorLowBattery' %}
mdi:battery-alert
{% elif state_attr(entity, 'status').active_faults[0].faultType == 'TempZoneSensorLowBattery' %}
mdi:battery-alert
{% else %}
mdi:alert
{% endif %}
{% elif state_attr(entity, "temperature") < 15 %}
mdi:snowflake
{% elif state_attr(entity, "temperature") > state_attr(entity,
"current_temperature") %}
mdi:fire
{% else %}
{% endif %}
badge_color: |-
{% if state_attr(entity, 'status').active_faults %}
red
{% elif state_attr(entity, "temperature") < 15 %}
cyan
{% else %}
orange
{% endif %}
tap_action:
action: none
- type: custom:mushroom-climate-card
entity: climate.zolder_speelhoek
fill_container: false
icon_type: none
primary_info: none
secondary_info: none
show_temperature_control: true
collapsible_controls: false
layout: vertical
- type: custom:mushroom-template-card
icon: mdi:backup-restore
tap_action:
action: call-service
service: climate.set_temperature
target:
entity_id: climate.zolder_speelhoek
data:
temperature: 15
- type: grid
square: false
columns: 1
cards:
- type: custom:mushroom-chips-card
alignment: center
card_mod:
style: |
.chip-container {
--chip-spacing: 4px;
--chip-background: none;
--chip-box-shadow: none;
transition: all 0s;
}
chips:
- type: template
entity: sensor.zolder_speelhoek_current_temperatuur
icon: mdi:thermometer
icon_color: '#00bb33'
content: '{{ states(entity) }}Ā°C'
tap_action:
action: none
- type: template
entity: sensor.zolder_speelhoek_wanted_temperatuur
icon: mdi:thermometer-auto
icon_color: '#3399ff'
content: '{{ states(entity) }}Ā°C'
tap_action:
action: none
- type: template
entity: sensor.zolder_speelhoek_verwarmen
icon: |
{% if states(entity) == '0' %}
mdi:fire-off
{% else %}
mdi:fire
{% endif %}
icon_color: yellow
content: |
{% if states(entity) == '0' %}
Uit
{% else %}
Aan
{% endif %}
tap_action:
action: none
- type: custom:mini-graph-card
entities:
- entity: sensor.zolder_speelhoek_current_temperatuur
name: Huidige Temperatuur
color: '#00bb33'
- entity: sensor.zolder_speelhoek_wanted_temperatuur
name: Gevraagde Temperatuur
color: '#3399ff'
- entity: sensor.zolder_speelhoek_verwarmen
name: Status Verwarming
color: yellow
y_axis: secondary
show_line: false
smoothing: false
show_points: false
- entity: sensor.nightstate
color: grey
y_axis: secondary
show_state: true
show_line: false
show_points: false
show_legend: false
- entity: input_number.twenty
color: rgba(77, 77, 77, 0.3)
show_fill: false
show_points: false
fixed_value: true
show_legend: false
- entity: input_number.fifteen
color: rgba(77, 77, 77, 0.3)
show_fill: false
show_points: false
fixed_value: true
show_legend: false
lower_bound_secondary: ~0
upper_bound_secondary: ~1
hours_to_show: 24
points_per_hour: 2
line_width: 2
font_size: 50
animate: true
hour24: true
show:
name: false
icon: false
state: false
legend: false
fill: fade
Likely little overkill but since i dont use light theme cant actually see the shadows so just eliminated wherever j thought neccesaey
type: custom:stack-in-card
keep:
margin: false
box_shadow: false
background: false
card_mod:
style: |
ha-card {
--ha-card-header-font-size: 18px;
border: none !important;
box-shadow: none !important;
}
.card-header {
padding-top: 1px;
padding-bottom: 1px;
color: var(--secondary-text-color);
font-weight: bold !important;
}
cards:
- type: custom:layout-card
layout_type: custom:grid-layout
layout:
grid-template-columns: auto 76px
cards:
- type: custom:stack-in-card
mode: horizontal
card_mod:
style: |
ha-card {
border: none !important;
box-shadow: none !important;
}
cards:
- type: custom:mushroom-template-card
entity: climate.zolder_speelhoek
primary: Speelhoek Zolder
secondary: '{{ state_attr(entity, "current_temperature") }}Ā°C'
icon: mdi:thermometer
icon_color: '{{ states("sensor.zolder_speelhoek_color") }}'
badge_icon: >-
{% if state_attr(entity, 'status').active_faults %}
{% if state_attr(entity, 'status').active_faults[0].faultType == 'TempZoneActuatorLowBattery' %}
mdi:battery-alert
{% elif state_attr(entity, 'status').active_faults[0].faultType == 'TempZoneSensorLowBattery' %}
mdi:battery-alert
{% else %}
mdi:alert
{% endif %}
{% elif state_attr(entity, "temperature") < 15 %}
mdi:snowflake
{% elif state_attr(entity, "temperature") > state_attr(entity,
"current_temperature") %}
mdi:fire
{% else %}
{% endif %}
badge_color: |-
{% if state_attr(entity, 'status').active_faults %}
red
{% elif state_attr(entity, "temperature") < 15 %}
cyan
{% else %}
orange
{% endif %}
tap_action:
action: none
card_mod:
style: |
ha-card {
border: none !important;
box-shadow: none !important;
}
- type: custom:mushroom-climate-card
entity: climate.zolder_speelhoek
fill_container: false
icon_type: none
primary_info: none
secondary_info: none
show_temperature_control: true
collapsible_controls: false
layout: vertical
card_mod:
style: |
ha-card {
border: none !important;
box-shadow: none !important;
}
- type: custom:mushroom-template-card
icon: mdi:backup-restore
tap_action:
action: call-service
service: climate.set_temperature
target:
entity_id: climate.zolder_speelhoek
data:
temperature: 15
card_mod:
style: |
ha-card {
border: none !important;
box-shadow: none !important;
}
card_mod:
style: |
ha-card {
border: none !important;
box-shadow: none !important;
}
- type: grid
square: false
columns: 1
cards:
- type: custom:mushroom-chips-card
alignment: center
card_mod:
style: |
.chip-container {
--chip-spacing: 4px;
--chip-background: none;
--chip-box-shadow: none;
transition: all 0s;
}
chips:
- type: template
entity: sensor.zolder_speelhoek_current_temperatuur
icon: mdi:thermometer
icon_color: '#00bb33'
content: '{{ states(entity) }}Ā°C'
tap_action:
action: none
- type: template
entity: sensor.zolder_speelhoek_wanted_temperatuur
icon: mdi:thermometer-auto
icon_color: '#3399ff'
content: '{{ states(entity) }}Ā°C'
tap_action:
action: none
- type: template
entity: sensor.zolder_speelhoek_verwarmen
icon: |
{% if states(entity) == '0' %}
mdi:fire-off
{% else %}
mdi:fire
{% endif %}
icon_color: yellow
content: |
{% if states(entity) == '0' %}
Uit
{% else %}
Aan
{% endif %}
tap_action:
action: none
- type: custom:mini-graph-card
entities:
- entity: sensor.zolder_speelhoek_current_temperatuur
name: Huidige Temperatuur
color: '#00bb33'
- entity: sensor.zolder_speelhoek_wanted_temperatuur
name: Gevraagde Temperatuur
color: '#3399ff'
- entity: sensor.zolder_speelhoek_verwarmen
name: Status Verwarming
color: yellow
y_axis: secondary
show_line: false
smoothing: false
show_points: false
- entity: sensor.nightstate
color: grey
y_axis: secondary
show_state: true
show_line: false
show_points: false
show_legend: false
- entity: input_number.twenty
color: rgba(77, 77, 77, 0.3)
show_fill: false
show_points: false
fixed_value: true
show_legend: false
- entity: input_number.fifteen
color: rgba(77, 77, 77, 0.3)
show_fill: false
show_points: false
fixed_value: true
show_legend: false
lower_bound_secondary: ~0
upper_bound_secondary: ~1
hours_to_show: 24
points_per_hour: 2
line_width: 2
font_size: 50
animate: true
hour24: true
show:
name: false
icon: false
state: false
legend: false
fill: fade
card_mod:
style: |
ha-card {
border: none !important;
box-shadow: none !important;
}
1 Like
Not sure if it is overkill, but it did the trick. Thank you so much!
Hello all,
I have a question. Can you combine multiple entities on a chip card?
I have a chip card that shows if the car seat heating is on.
type: custom:mushroom-chips-card
chips:
- type: template
entity: binary_sensor.vw_ev_zone_front_left_enabled
use_entity_picture: true
icon: mdi:car-seat-heater
icon_color: '{{ ''red'' if states(entity) == ''on'' else ''grey'' }}'
As you can see this is for the left seat. I have an entity for the right seat and i would like to have both combined.
2 icons in the same chip? Not really. (Certainly not without some card mod).
2 entity states in a template chip? Absolutely.
An example:
type: custom:mushroom-chips-card
chips:
- type: template
icon: mdi:test-tube
icon_color: red
content: >-
{{states(entity) | capitalize}} {{states('light.bedroom_lights') |
capitalize}}
entity: light.lounge_lights
2 Likes
@dimitri.landerloos thanks, but you have one entity in your example and i have 2.
binary_sensor.vw_ev_zone_front_left_enabled
binary_sensor.vw_ev_zone_front_right_enabled
How do i combine those?
If you look in the content section 2 states are being referred to. You cant have 2 entities directly in the chip, but you can refer to multiple in your templates. So in your example something like this:
type: custom:mushroom-chips-card
chips:
- type: template
icon: mdi:test-tube
icon_color: red
content: >-
{{states('binary_sensor.vw_ev_zone_front_left_enabled'}} {{states('binary_sensor.vw_ev_zone_front_right_enabled')}}
entity: binary_sensor.vw_ev_zone_front_right_enabled
Here is one that makes the icon red if both are on and then tells you in the chip that both are on. If only one is on it will make the icon orange and say which is on (left or right). If none are on it will make the icon grey and say none are on.
type: custom:mushroom-chips-card
chips:
- type: template
icon: mdi:test-tube
icon_color: >-
{% if states('binary_sensor.vw_ev_zone_front_left_enabled') == 'on' and states('binary_sensor.vw_ev_zone_front_right_enabled') == 'on' %}
red
{% elif states('binary_sensor.vw_ev_zone_front_left_enabled') == 'on' %}
orange
{% elif states('binary_sensor.vw_ev_zone_front_right_enabled') == 'on' %}
orange
{% else %}
grey
{% endif %}
content: >-
{% if states('binary_sensor.vw_ev_zone_front_left_enabled') == 'on' and states('binary_sensor.vw_ev_zone_front_right_enabled') == 'on' %}
Both
{% elif states('binary_sensor.vw_ev_zone_front_left_enabled') == 'on' %}
Left
{% elif states('binary_sensor.vw_ev_zone_front_right_enabled') == 'on' %}
Right
{% else %}
None
{% endif %}
entity: binary_sensor.vw_ev_zone_front_right_enabled
1 Like