I’ve installed Mushroom Cards from here, plus the “stack in card” extension that was required from here (which is no longer supported), but my new dashboard doesn’t look like the nice rounded version you have. The power buttons works as expected, clicking on the fan and temperature icons brings up the somewhat ugly standard controls, and long pressing does change from ITC / damper modes.
How do I make it look nicer like yours?! Once I work that out I’ll read the code a bit better and see if I can get the damper percentage showing in ITC mode.
views:
- title: Home
cards:
- type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
entity: fan.damper_living
hold_action: None
primary: Living
secondary: |
{% if state_attr("fan.damper_living", "preset_mode") == "ITC" %}
{% set state = state_attr("climate.itc_living", "hvac_action") | capitalize %}
{% set target = state_attr("climate.itc_living", "temperature") | round %}
{% set text = "to " + target | lower + "°C" if state != "Idle" and state != "Off" %}
{% else %}
{% set state = states("fan.damper_living") | capitalize %}
{% set target = state_attr("fan.damper_living", "percentage") %}
{% set text = "at " + target | lower + "%" if state != "Off" %}
{% endif %}
{{ state }} {{ text }}
icon: >
{%- set icons = {
"heating": "mdi:fire",
"cooling": "mdi:snowflake",
"drying": "mdi:water-percent",
"idle": "mdi:air-conditioner",
"off": "mdi:power"} -%}
{{ icons[state_attr("climate.itc_living", "hvac_action")|lower] |
default("mdi:autorenew") }}
icon_color: >
{%- set colors = {
"heating": "#ff8100",
"cooling": "#2b9af9",
"drying": "#efbd07",
"idle": "#8a8a8a",
"off": "disabled"} -%}
{{ colors[state_attr("climate.itc_living", "hvac_action")|lower] |
default("#8a8a8a") }}
card_mod:
style: |
:host {
height: 84px;
}
- type: custom:mushroom-chips-card
alignment: center
chips:
- type: template
entity: climate.itc_living
content: >-
{{ state_attr("climate.itc_living", "current_temperature")
}}°C
tap_action: None
hold_action: None
card_mod:
style: |-
ha-card {
top: -16px;
}
- type: template
entity: fan.damper_living
icon: mdi:air-filter
icon_color: >
{%- set colors = {
"heating": "#ff8100",
"cooling": "#2b9af9",
"drying": "#efbd07",
"idle": "#8a8a8a",
"off": "disabled"} -%}
{{ colors[state_attr("climate.itc_living",
"hvac_action")|lower] | default("#8a8a8a") if
state_attr("fan.damper_living", "preset_mode") != "ITC" }}
tap_action:
action: more-info
hold_action:
action: call-service
service: fan.set_preset_mode
data:
entity_id: fan.damper_living
preset_mode: Damper
card_mod:
style: >
{%- set colors = {
"heating": "255, 129, 0",
"cooling": "43, 154, 249",
"drying": "239, 189, 7",
"idle": "138, 138, 138",
"off": "138, 138, 138"} -%}
{% set color = colors[state_attr("climate.itc_living",
"hvac_action")|lower] | default("138, 138, 138") if
state_attr("fan.damper_living", "preset_mode") != "ITC" else
"var(--rgb-state-disabled)" %}
ha-card {
top: -16px;
--chip-background: rgba({{color}}, 0.2);
--text-color: rgb({{color}});
}
- type: template
entity: climate.itc_living
icon: mdi:thermometer
icon_color: >
{%- set colors = {
"heating": "#ff8100",
"cooling": "#2b9af9",
"drying": "#efbd07",
"idle": "#8a8a8a",
"off": "disabled"} -%}
{{ colors[state_attr("climate.itc_living",
"hvac_action")|lower] | default("#8a8a8a") if
state_attr("fan.damper_living", "preset_mode") == "ITC" }}
tap_action:
action: more-info
hold_action:
action: call-service
service: fan.set_preset_mode
data:
entity_id: fan.damper_living
preset_mode: ITC
card_mod:
style: >
{%- set colors = {
"heating": "255, 129, 0",
"cooling": "43, 154, 249",
"drying": "239, 189, 7",
"idle": "138, 138, 138",
"off": "138, 138, 138"} -%}
{% set color = colors[state_attr("climate.itc_living",
"hvac_action")|lower] | default("138, 138, 138") if
state_attr("fan.damper_living", "preset_mode") == "ITC" else
"var(--rgb-state-disabled)" %}
ha-card {
top: -16px;
--chip-background: rgba({{color}}, 0.2);
--text-color: rgb({{color}});
}