Many thanks!!
How to add battery info in the secondary_info of mushroom-cover-card?
type: custom:mushroom-cover-card
entity: cover.cover_first_floor
name: Cover First Floor
show_position_control: true
show_buttons_control: true
primary_info: name
tap_action:
action: none
hold_action:
action: more-info
double_tap_action:
action: none
secondary_info: state
I want the secondary_info shows “Open 50% | battery 97%”.
Anyone can help?
Please use the back tick to post your code. #11
Yes, what you’re looking for is possible if you have card-mod installed.
You could also adjust the % color based on the battery level.
type: custom:stack-in-card
cards:
- type: custom:mushroom-title-card
title: Bedroom Curtains
- type: custom:layout-card
layout_type: custom:grid-layout
layout:
grid-template-columns: 1fr
margin: 0px 0px 0px 0px
cards:
- type: custom:mushroom-cover-card
entity: cover.pc_curtains
show_position_control: true
show_tilt_position_control: false
show_buttons_control: true
layout: horizontal
card_mod:
style: |
ha-state-icon:after {
content: " {{ states('sensor.pc_curtains_battery') }}%";
background: none;
font-size: 10px;
font-weight: 500;
border-width: 2px;
border-radius: 50%;
margin-top: 29px;
margin-left: 125px;
position: absolute;
color: yellow;
}
card_mod:
style: |
ha-card {
border:none !important;
}
2 Likes
If you want to change the color based on the battery level add this code to color:
color: {% if states('sensor.pc_curtains_battery') | int < 15 %}
red
{% elif states('sensor.pc_curtains_battery') | int < 50 %}
yellow
{% else %}
lime
{% endif %}
Entire card code
type: custom:stack-in-card
cards:
- type: custom:mushroom-title-card
title: Bedroom Curtains
- type: custom:layout-card
layout_type: custom:grid-layout
layout:
grid-template-columns: 1fr
margin: 0px 0px 0px 0px
cards:
- type: custom:mushroom-cover-card
entity: cover.pc_curtains
show_position_control: true
show_tilt_position_control: false
show_buttons_control: true
layout: horizontal
card_mod:
style: |
ha-state-icon:after {
content: " {{ states('sensor.pc_curtains_battery') }}%";
background: none;
font-size: 10px;
font-weight: 500;
border-width: 2px;
border-radius: 50%;
margin-top: 29px;
margin-left: 130px;
position: absolute;
color: {% if states('sensor.pc_curtains_battery') | int < 15 %}
red
{% elif states('sensor.pc_curtains_battery') | int < 50 %}
yellow
{% else %}
lime
{% endif %}
}
- type: custom:mushroom-cover-card
entity: cover.bed_curtains
show_position_control: true
show_tilt_position_control: false
show_buttons_control: true
layout: horizontal
card_mod:
style: |
ha-state-icon:after {
content: " {{ states('sensor.bed_curtains_battery') }}%";
background: none;
font-size: 10px;
font-weight: 500;
border-width: 2px;
border-radius: 50%;
margin-top: 29px;
margin-left: 130px;
position: absolute;
color: {% if states('sensor.bed_curtains_battery') | int < 15 %}
red
{% elif states('sensor.bed_curtains_battery') | int < 50 %}
yellow
{% else %}
lime
{% endif %}
}
- type: custom:mushroom-cover-card
entity: cover.tv_curtains
show_position_control: true
show_tilt_position_control: false
show_buttons_control: true
layout: horizontal
card_mod:
style: |
ha-state-icon:after {
content: " {{ states('sensor.tv_curtains_battery') }}%";
background: none;
font-size: 10px;
font-weight: 500;
border-width: 2px;
border-radius: 50%;
margin-top: 29px;
margin-left: 130px;
position: absolute;
color: {% if states('sensor.tv_curtains_battery') | int < 15 %}
red
{% elif states('sensor.tv_curtains_battery') | int < 50 %}
yellow
{% else %}
lime
{% endif %}
}
card_mod:
style: |
ha-card {
border:none !important;
}
1 Like
did you found a solution for the conditial card with numeric condition
edit: solution here
it is done like this. the syntax is wrong for what he posted.
type: custom:mushroom-chips-card
chips:
- type: conditional
conditions:
- condition: numeric_state
entity: sensor.all_standby_energy
above: 0
below: 1000
chip:
type: template
icon: mdi:test-tube
Yes. Thanks. i already found it and posted the solution in the other post
“The other post” ? did you cross post the same question somewhere else? your initial question is not edited with the solution.
sorry. Changed the post …
Hi,
I need some advise. I have this webrtc cards without grids, but how can I make 2 columns only in mobile? So I can see more cameras?
Thank you
Hello,
There is a way to size up the circle/shadow behind the icon ?
type: custom:mushroom-light-card
entity: light.light_livingroom
use_light_color: true
show_brightness_control: true
name: Entrée
show_color_temp_control: true
layout: horizontal
show_color_control: true
collapsible_controls: false
icon: mdi:coat-rack
fill_container: false
secondary_info: none
card_mod:
style: |
:host {
--mush-icon-symbol-size: 65px;
}
ha-card {
border: none !important;
box-shadow: none !important;
box-shadow: none !important;
}
I can’t use the mush-icon-size because the light control bar don’t align the middle of the logo compared to mush-icon-symbol-size
Thanks
Take a look at the guide linked in my profile 
I watched your profile and the only way I found to scale up the shadow is icon-size but this method create a problem with the control bar :
Is there a way to decrease this distance?
type: horizontal-stack
cards:
- type: custom:vertical-stack-in-card
cards:
- type: custom:mushroom-cover-card
fill_container: false
secondary_info: state
show_position_control: false
show_tilt_position_control: false
show_buttons_control: false
tap_action:
action: more-info
layout: horizontal
name: 'Όλα'
icon: mdi:roller-shade
entity: cover.blinds_all
icon_type: icon
card_mod:
style:
mushroom-shape-icon$: |
.shape {
--shape-color: none;
--icon-size: 60px;
--icon-symbol-size: 50px;
--icon-color: green
}
- type: custom:mushroom-cover-card
fill_container: false
secondary_info: none
show_position_control: false
show_tilt_position_control: false
show_buttons_control: true
tap_action:
action: more-info
layout: vertical
icon: ''
entity: cover.blinds_all
icon_type: none
primary_info: none
card_mod:
style:
mushroom-shape-icon$: |
.shape {
--shape-color: none;
--icon-size: 60px;
--icon-symbol-size: 50px;
--icon-color: green
}
- type: custom:vertical-stack-in-card
cards:
- type: custom:mushroom-cover-card
entity: cover.blinds_living_room
fill_container: false
secondary_info: state
show_position_control: false
show_tilt_position_control: false
show_buttons_control: false
layout: horizontal
name: Σαλόνι
icon: mdi:roller-shade
icon_type: icon
tap_action:
action: more-info
card_mod:
style:
mushroom-shape-icon$: |
.shape {
--shape-color: none;
--icon-size: 60px;
--icon-symbol-size: 50px;
--icon-color: MediumVioletRed
}
- type: custom:mushroom-cover-card
entity: cover.blinds_living_room
fill_container: false
secondary_info: none
show_position_control: false
show_tilt_position_control: false
show_buttons_control: true
layout: vertical
icon: mdi:roller-shade
icon_type: none
primary_info: none
tap_action:
action: more-info
card_mod:
style:
mushroom-shape-icon$: |
.shape {
--shape-color: none;
--icon-size: 60px;
--icon-symbol-size: 50px;
--icon-color: MediumVioletRed
}
Im looking to make the light icon chip change color to grey when its off instead of white.
But i just cant seem to get it right. Anyone who can guide me in the right direction?
type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
primary: Toalett
secondary: |-
{{ states('sensor.hue_motion_do_temp') }}°C |
{{ states('sensor.aqara_multisensor_gangen_fukt') }} %
icon: mdi:toilet
entity: light.dolys_dz
icon_color: |-
{% if is_state('light.dolys_1', 'on') %}
orange
{% elif is_state('light.dolys_2', 'on') %}
orange
{% endif %}
tap_action:
action: toggle
hold_action:
action: navigate
navigation_path: /lovelace-panel/toalett
multiline_secondary: false
layout: horizontal
fill_container: false
card_mod:
style: |
ha-state-icon::after {
content: '{{ expand(states.light) |selectattr('state', 'eq', 'on') |selectattr('entity_id', 'in', area_entities('Do')) |rejectattr('entity_id', 'search', 'dz') |map(attribute='entity_id') |list | count }}';
position: absolute;
top: -11%;
right: -11%;
display: flex;
justify-content: center;
align-items: center;
width: 15px;
height: 15px;
font-size: 9px;
font-weight: 700;
{% if expand(states.light)
|selectattr('state', 'eq', 'on')
|selectattr('entity_id', 'in', area_entities('Do'))
|rejectattr('entity_id', 'search', 'dz')
|map(attribute='entity_id')
|list | count > 0
%}
background-color: rgba(var(--rgb-disabled), 0.5);
{% else %}
background-color: rgba(var(--rgb-disabled), 0.5);
{% endif %}
border-radius: 50%;
}
{% if states('binary_sensor.hue_motion_do_motion') == 'on' %}
ha-state-icon::before {
content: 'directions_walk';
position: absolute;
font-family: 'Material Icons';
top: -11%;
left: -11%;
display: flex;
justify-content: center;
align-items: center;
width: 15px;
height: 15px;
font-size: 11px;
background: rgba(var(--rgb-disabled), 0.5);
color: rgba(var(--rgb-red), 1);
border-radius: 50%;
animation: blink 1s linear infinite;
}
{% endif %}
@keyframes blink {
50% {opacity: 0;}
}
- type: custom:mushroom-chips-card
chips:
- type: light
entity: light.dolys_dz
use_light_color: true
content_info: none
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-icon-size: 0.8em;
background: radial-gradient( var(--card-background-color) 60%, none calc(60% + 1px)), conic-gradient(var(--icon-color) {{state_attr(config.entity,'brightness') | float / 2.55}}% 0%, var(--card-background-color) 0% 100%) !important;
}
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: 0;
margin-top: 10px;
alignment: end
Hi all,
It is possible to load page when all items are definitely loaded to avoid “transition” like title position in my gif below?
Thx you 
make an if else structure in your chips card ?
icon_color: >
{% if is_state("light.dolys_dz", 'off') %}
[84, 84, 84]
{% else %}
[245,245,245]
{% endif %}
That didnt work.