just use a negative number, -10px for example.
It does not work for me unfortunately. I think to use “custom:mushroom-title-card”. Would it be possible there to reduce the spacing here somehow?
My code
type: vertical-stack
cards:
- type: custom:mushroom-title-card
title: Zeit & Wetter
title_tap_action:
action: navigate
navigation_path: /dashboard-test/sicherheit
- type: entity
entity: sensor.date_time
name: Zeit
- show_current: true
show_forecast: true
type: weather-forecast
entity: weather.forecast_home
forecast_type: daily
name: ' '
This should work. I’ll direct message you as well.
type: vertical-stack
cards:
- type: custom:mushroom-title-card
title: Zeit & Wetter
title_tap_action:
action: navigate
navigation_path: /dashboard-test/sicherheit
card_mod:
style: |
ha-card {
--title-padding: 10px 10px 1px;
--title-font-size: 15px;
--primary-text-color: red;
--title-font-weight: 400;
}
- type: entity
entity: sensor.date_time
name: Zeit
- show_current: true
show_forecast: true
type: weather-forecast
entity: weather.forecast_home
forecast_type: daily
name: ' '
2 Likes
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