Hi,
to have more information on my climate and rollershutter cards and because that there is no template mechanism supported, I tweaked
them (based on all information I gathered from this forum and others) to get the following results, I would like to share with you. You might find it
useful for your own customization:
I am not an expert, so there might be more sophisticated solutions.
This is the yaml for the rollershutter card (incl. custom-expander-card)
type: custom:mod-card
style: |
ha-card {
border: 0px solid ;
padding: 0px 0px 0px !important;
color: grey !important;
background-color: ;
font-size: ;
background: none;
box-shadow: none;
--ha-card-box-shadow: none;
--ha-card-border-width: 0;
}
card:
type: custom:expander-card
gap: "-1em"
padding: 0em
clear: false
clear-children: false
title: Expander
overlay-margin: 2em
child-padding: 0em
button-background: transparent
expanded: false
title-card:
type: custom:mod-card
style: |
ha-card {
border: 0px dotted red !important;
padding: 0px 0px 0px !important;
color: red !important;
background-color: ;
font-size: ;
}
card:
type: custom:mushroom-cover-card
entity: cover.0_lr_grs
grid_options:
columns: 12
card_mod:
style:
mushroom-state-info$: |
span {
visibility: hidden;
}
.primary:before {
content: "{% if is_state('cover.0_lr_grs', 'open') %} {{state_translated('cover.0_lr_grs')}} - {{state_attr('cover.0_lr_grs', 'current_position')}} % - {{state_attr('cover.0_lr_grs', 'friendly_name')}} {% else %} {{state_translated('cover.0_lr_grs')}} - {{state_attr('cover.0_lr_grs', 'friendly_name')}} {%endif %}";
visibility: visible;
}
.secondary:before {
content: "{% from 'relative_time_plus.jinja' import relative_time_plus %} {{relative_time_plus(states.cover['0_lr_grs'].last_updated, parts=1, not_use=['week', 'millisecond'], time=true, abbr=true, language='de')}} ";
visibility: visible;
}
layout: null
show_position_control: true
show_buttons_control: true
icon: mdi:window-shutter
primary_info: state
secondary_info: last-updated
tap_action:
action: more-info
cards:
- type: custom:mod-card
style: |
ha-card {
border: 00px dotted red !important;
padding: 0px 0px 0px !important;
color: red !important;
background-color: ;
font-size: ;
}
card:
type: entities
entities:
- type: section
- type: custom:mushroom-cover-card
entity: cover.0_lr_rs_s_7
card_mod:
style:
mushroom-state-info$: |
span {
visibility: hidden;
}
.primary:before {
content: "{% if is_state('cover.0_lr_rs_s_7', 'open') %} {{state_translated('cover.0_lr_rs_s_7')}} - {{state_attr('cover.0_lr_rs_s_7', 'current_position')}} % - {{state_attr('cover.0_lr_rs_s_7', 'friendly_name')}} {% else %} {{state_translated('cover.0_lr_rs_s_7')}} - {{state_attr('cover.0_lr_rs_s_7', 'friendly_name')}} {%endif %}";
visibility: visible;
}
.secondary:before {
content: "{% from 'relative_time_plus.jinja' import relative_time_plus %} {{relative_time_plus(states.cover['0_lr_rs_s_7'].last_updated, parts=1, not_use=['week', 'millisecond'], time=true, abbr=true, language='de')}} - {{states('sensor.0_lr_rs_s_electric_consumption_w_7', with_unit=True)}} - {{states('sensor.0_lr_rs_s_electric_consumption_kwh_7', with_unit=True)}}";
visibility: visible;
}
show_position_control: true
show_buttons_control: true
icon: mdi:window-shutter
primary_info: state
secondary_info: last-updated
- type: custom:mushroom-cover-card
entity: cover.0_lr_rs_w_6
card_mod:
style:
mushroom-state-info$: |
span {
visibility: hidden;
}
.primary:before {
content: "{% if is_state('cover.0_lr_rs_w_6', 'open') %} {{state_translated('cover.0_lr_rs_w_6')}} - {{state_attr('cover.0_lr_rs_w_6', 'current_position')}} % - {{state_attr('cover.0_lr_rs_w_6', 'friendly_name')}} {% else %} {{state_translated('cover.0_lr_rs_w_6')}} - {{state_attr('cover.0_lr_rs_w_6', 'friendly_name')}} {%endif %}";
visibility: visible;
}
.secondary:before {
content: "{% from 'relative_time_plus.jinja' import relative_time_plus %} {{relative_time_plus(states.cover['0_lr_rs_w_6'].last_updated, parts=1, not_use=['week', 'millisecond'], time=true, abbr=true, language='de')}} - {{states('sensor.0_lr_rs_w_electric_consumption_w_6', with_unit=True)}} - {{states('sensor.0_lr_rs_w_electric_consumption_kwh_6', with_unit=True)}}";
visibility: visible;
}
show_position_control: true
show_buttons_control: true
icon: mdi:window-shutter
primary_info: state
secondary_info: last-updated
and this is for the climate card using the same principles
type: custom:mod-card
style: |
ha-card {
border: 0px solid ;
padding: 0px 0px 0px !important;
color: grey !important;
background-color: ;
font-size: ;
background: none;
box-shadow: none;
--ha-card-box-shadow: none;
--ha-card-border-width: 0;
}
card:
type: custom:expander-card
gap: "-1em"
padding: 0em
clear: false
clear-children: false
title: Expander
overlay-margin: 2em
child-padding: 0em
button-background: transparent
expanded: false
title-card:
type: custom:mod-card
style: |
ha-card {
border: 0px dotted red !important;
padding: 0px 0px 0px !important;
color: red !important;
background-color: ;
font-size: ;
}
card:
type: custom:mushroom-climate-card
entity: climate.0_lr_gth
card_mod:
style:
mushroom-state-info$: |
span {
visibility: hidden;
}
.primary:before {
content: "{{state_attr('climate.0_lr_gth', 'current_temperature' )}} °C";
visibility: visible;
}
.secondary:before {
content: "{% from 'relative_time_plus.jinja' import relative_time_plus %} {{relative_time_plus(states.climate['0_lr_gth'].last_updated, parts=1, not_use=['week', 'millisecond'], time=true, abbr=true, language='de')}} ";
visibility: visible;
}
icon: mdi:heating-coil
layout: horizontal
show_temperature_control: true
primary_info: state
secondary_info: last-updated
tap_action:
action: more-info
cards:
- type: custom:mod-card
style: |
ha-card {
border: 00px dotted red !important;
padding: 0px 0px 0px !important;
color: red !important;
background-color: ;
font-size: ;
}
card:
type: entities
entities:
- type: section
- type: custom:mushroom-climate-card
entity: climate.0_lr_th_s_2
card_mod:
style:
mushroom-state-info$: |
span {
visibility: hidden;
}
.primary:before {
content: "{{state_attr( 'climate.0_lr_th_s_2', 'current_temperature' )}} °C - {{state_attr( 'climate.0_lr_th_s_2', 'friendly_name' )}}";
visibility: visible;
}
.secondary:before {
content: "{% from 'relative_time_plus.jinja' import relative_time_plus %} {{relative_time_plus(states.climate['0_lr_th_s_2'].last_updated, parts=1, not_use=['week', 'millisecond'], time=true, abbr=true, language='de')}} - {{state_translated ('binary_sensor.0_lr_th_s_low_battery_level_2')}}";
visibility: visible;
}
layout: horizontal
icon: mdi:heating-coil
show_temperature_control: true
primary_info: state
secondary_info: last-updated
tap_action:
action: more-info
- type: custom:mushroom-climate-card
entity: climate.0_lr_th_w
card_mod:
style:
mushroom-state-info$: |
span {
visibility: hidden;
}
.primary:before {
content: "{{state_attr( 'climate.0_lr_th_w', 'current_temperature' )}} °C - {{state_attr( 'climate.0_lr_th_w', 'friendly_name' )}}";
visibility: visible;
}
.secondary:before {
content: "{% from 'relative_time_plus.jinja' import relative_time_plus %} {{relative_time_plus(states.climate['0_lr_th_w'].last_updated, parts=1, not_use=['week', 'millisecond'], time=true, abbr=true, language='de')}} - {{state_translated ('binary_sensor.0_lr_th_w_low_battery_level')}}";
visibility: visible;
}
layout: horizontal
icon: mdi:heating-coil
show_temperature_control: true
primary_info: state
secondary_info: last-updated
tap_action:
action: more-info
Let me know about your ideas / improvement / customizations
BR,
Ypo