I don’t recommend the copy and paste method.
Please review this first for Mushroom card editing and the second link for almost all additional mod info…
Your posted card was all over the place. I cut a portion of the unnecessary code out so you can play around with the settings.
type: horizontal-stack
cards:
- type: vertical-stack
cards:
- type: custom:mushroom-template-card
primary: Bagno Ale
icon: mdi:face-woman-shimmer
entity: light.bagno_ale
icon_color: '{% if is_state(''light.bagno_ale'',''on'') %} orange {% endif %}'
tap_action:
action: toggle
double_tap_action:
action: call-service
service: light.turn_off
target:
area_id: bagno_piccolo
data: {}
card_mod:
style: |
ha-card {
padding-top: 5px !important;
padding-bottom: 0px !important;
box-shadow: none;
--ha-card-background: none;
border: none;
}
- type: custom:mushroom-chips-card
chips:
- type: template
entity: sensor.bagno_piccolo_temperature
content: '{{ states(''sensor.bagno_piccolo_temperature'') | round(1) }} ºC'
icon: >-
{% set state=states('sensor.bagno_piccolo_temperature')|float(0)
%} {% if state<20 %} mdi:thermometer-low {% elif state<24 %}
mdi:thermometer {% else %} mdi:thermometer-high {% endif %}
icon_color: >-
{% set state=states('sensor.bagno_piccolo_temperature')|float(0)
%} {% if state<20 %} blue {% elif state<24 %} green {% elif
state<27 %} amber {% else %} red {% endif %}
tap_action:
action: navigate
navigation_path: bagno_piccolo
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: 0px;
margin-top: -10px;
padding-top: 0px;
--chip-height: 55px;
border: none;
- type: template
entity: sensor.bagno_piccolo_humidity
content: '{{ states(''sensor.bagno_piccolo_humidity'') | round(1) }} %'
icon: mdi:water-percent
icon_color: >-
{% set state=states('sensor.bagno_piccolo_humidity')|float(0) %}
{% if state<30 %} blue {% elif state<60 %} green {% elif state<80
%} amber {% else %} red {% endif %}
tap_action:
action: navigate
navigation_path: bagno_piccolo
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: 0px;
margin-top: -10px;
padding-top: 0px;
--chip-height: 55px;
border: none;
- type: horizontal-stack
cards:
- type: custom:mushroom-template-card
icon: mdi:lightbulb
entity: light.bagno_ale
icon_color: '{% if is_state(''light.bagno_ale'',''on'') %} orange {% endif %}'
tap_action:
action: toggle
card_mod:
style: |
ha-card {
padding-top: 5px !important;
padding-bottom: 0px !important;
box-shadow: none;
margin-right: 50px !important;
padding-right: 50px !important;
background: none;
border: none;
}
- type: vertical-stack
cards:
- type: custom:mushroom-template-card
icon: mdi:fire
entity: climate.bagno_piccolo
icon_color: >-
{% set state=states('climate.bagno_piccolo') %} {% if state=='heat'%}
amber {% else %} grey {% endif %}
tap_action:
action: navigate
navigation_path: '#bagno_ale-hvac'
card_mod:
style: |
ha-card {
padding-top: 5px !important;
padding-bottom: 0px !important;
box-shadow: none;
margin-left: 100px;
padding-right: 50px !important;
background: none;
border: none;
}
- type: custom:mushroom-template-card
primary: null
icon: mdi:robot-vacuum
entity: vacuum.gregorio
icon_color: >-
{% set state=states('vacuum.gregorio') %} {% set
stanza=states('input_text.gregorio_stanza_pulizia') %} {% if state
== "cleaning" and stanza=='4'%} green {% elif state == "returning"
and stanza=='4' %} yellow {% else %} grey {% endif %}
tap_action:
action: call-service
service: script.DO_Gregorio_pulisci_stanza
service_data:
rooms: 4
card_mod:
style: |
ha-card {
padding-top: 5px !important;
padding-bottom: 0px !important;
box-shadow: none;
margin-left: 100px;
padding-right: 50px !important;
background: none;
border: none;
}
{% if is_state('vacuum.gregorio','cleaning') and
is_state('input_text.gregorio_stanza_pulizia','4') %}
ha-card { animation: blink 2s linear infinite; }
@keyframes blink { 50% {opacity: 0;} }
{%- endif %}