It the way the device reports the state. It is different amongst different devices. With a tempalte card you can use something similar to this:
secondary: |
{{ 'On' if is_state(config.entity, 'on') else 'Off' }}
Legendary stuff
- type: horizontal-stack
cards:
- type: custom:mushroom-template-card
secondary: Oefenzaal
- type: custom:mushroom-chips-card
chips:
- type: template
tap_action:
action: perform-action
perform_action: script.climate_increase_decrease_temp_airco
target: {}
data:
entity_id: input_number.volume_oefenzaal
step: -0.2
icon: mdi:minus
- type: custom:mushroom-template-card
secondary: '{{ states(''input_number.volume_oefenzaal'')}}'
- type: custom:mushroom-chips-card
chips:
- type: template
tap_action:
action: perform-action
perform_action: script.climate_increase_decrease_temp_airco
target: {}
data:
entity_id: input_number.volume_oefenzaal
step: +0.2
icon: mdi:plus
I want the - temp and + closer to each other and more space for the first mushroom card, how do I achieve this ?
I’d suggest using the layout-card Swap your entities for mine.
type: custom:layout-card
layout_type: custom:grid-layout
layout:
grid-template-columns: 40% 20% 10% 10%
margin: 0px 0px 0px 0px
cards:
- type: custom:mushroom-template-card
secondary: Oefenzaal
- type: custom:mushroom-template-card
secondary: "{{ states('input_number.sprinkler_number')}}"
- type: custom:mushroom-chips-card
chips:
- type: template
tap_action:
action: perform-action
perform_action: script.sprinkler_timer_finish
target: {}
data:
entity_id: input_number.sprinkler_number
step: 0.2
icon: mdi:plus
- type: custom:mushroom-chips-card
chips:
- type: template
tap_action:
action: perform-action
perform_action: script.sprinkler_timer_finish
target: {}
data:
entity_id: input_number.sprinkler_number
step: -0.2
icon: mdi:minus
1 Like
I do similar, using a mushroom template card:
type: custom:mushroom-template-card
primary: Desk Plug
secondary: >-
{{states('switch.desk_plug') | title }} ·
{{states('sensor.desk_plug_power')}}W
icon: mdi:desk
entity: switch.desk_plug
icon_color: |-
{% if is_state('switch.desk_plug', 'on') %}
blue
{% else %}
grey
{% endif %}
Can you use this instead ?
{{ states(config.entity) | title }}
I was replying to a post above
Not sure I have seen that method before. If you want to display an attribute I use something like this:
secondary: |
{{ state_attr('light.toilet_1', 'max_mireds') }}
Not to display an attribute, to capitalise the state, instead of this:
secondary: |
{{ 'On' if is_state(config.entity, 'on') else 'Off' }}
This is one method I know about. Your method works well, apparently I missed your point. Appreciate the education, always learning! 
secondary: |
{{states(config.entity)}}
card_mod:
style:
mushroom-state-info$: |
.secondary {
text-transform: capitalize;
}
These can be used too
``
{{ states(‘sensor.devonport_fire_danger_0’) | upper }}
{{ states('sensor.devonport_fire_danger_0') | capitalize }}
2 Likes
Hello,
sorry for my bad paint skills 
How can i change reduze the padding on the left side.
type: custom:mushroom-template-card
entity: switch.ps5_tom_power
primary: PS5 Ben
secondary: |
{% if is_state('switch.ps5_726_power', 'on') %}
{% if is_state('sensor.ps5_726_activity', 'idle') %}
Ruhemodus
{% elif is_state('sensor.ps5_726_activity', 'playing') %}
{{ state_attr('sensor.ps5_726_activity', 'title_name') or states('sensor.ps5_726_activity') }}
{%- else -%}
{{ state_attr('sensor.ps5_726_activity', 'title_name') or states('sensor.ps5_726_activity') }}
{%- endif -%}
{%- elif is_state('switch.ps5_726_power', 'unavailable') -%}
Aus
{%- elif is_state('switch.ps5_726_power', 'off') -%}
Aus
{%- else -%}
{{ states('switch.ps5_726_power') }}
{%- endif -%}
picture: |
{% if is_state('sensor.ps5_726_activity', 'playing') %}
{{state_attr('sensor.ps5_726_activity', 'title_image')}}
{% else %}
/local/playstation.jpg
{% endif %}
card_mod:
style: |
ha-card {
height: 48px !important;
border-radius: 100px;
--icon-size: 40px;
}
:host {
--mush-icon-size: 40px;
}
Didn’t test it, but try
card_mod:
style:
mushroom-shape-avatar$: |
.container {
left: -5px !important;
}
.: |
ha-card {
height: 48px !important;
border-radius: 100px;
--icon-size: 40px;
}
:host {
--mush-icon-size: 40px;
}
1 Like
Danke / Thank you
If you need the text to move in conjuction use
card_mod:
style:
mushroom-shape-avatar$: |
.container {
left: -5px !important;
--icon-size: 40px;
}
.: |
ha-card {
height: 48px !important;
border-radius: 100px;
}
1 Like
Hello again
How can i move the icon to the left side? (now i use icon: mid:…)
type: custom:mushroom-template-card
entity: switch.ps5_tom_power
primary: Haustür
icon: mdi:door
icon_color: green
fill_container: false
badge_icon: |
{% if is_state('binary_sensor.nuki_home_locked', 'on') %}
mdi:check-bold
{% else %}
mdi:lock-off
{% endif %}
card_mod:
style: |
ha-card {
height: 48px !important;
border-radius: 100px;
padding-right: 10px !important;
margin: 15px 0px 15px 0px !important;
--icon-size: 40px;
filter: drop-shadow(0px 0px 12px green) contrast(1.0);
}
type: custom:mushroom-template-card
entity: switch.ps5_tom_power
primary: Haustür
icon: mdi:door
icon_color: green
fill_container: false
badge_icon: |
{% if is_state('binary_sensor.nuki_home_locked', 'on') %}
mdi:check-bold
{% else %}
mdi:lock-off
{% endif %}
card_mod:
style:
mushroom-shape-icon$: |
.shape {
left: -5px;
}
.: |
ha-card {
height: 48px !important;
border-radius: 100px;
padding-right: 10px !important;
margin: 15px 0px 15px 0px !important;
--icon-size: 40px;
filter: drop-shadow(0px 0px 12px green) contrast(1.0);
}
2 Likes
I now use
grid-template-columns: 50% 15% 20% 15%
and gives me
as you can see, the number is not in the center. what do I do wrong ?
Can you post the full card code?