Sure enough, that fixed it, awesome!
@LiQuid_cOOled, I also made sure I was on 3.4.1.
Thanks!
Thanks a lot for the suggestion, it works. I’m confused by the unallocated space on the right, is it possible to put text there?
type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
entity: update.home_assistant_core_update
icon: mdi:package
icon_color: |
{% if is_state('update.home_assistant_core_update', 'on') %}
orange
{% else %}
green
{% endif %}
primary: HA Core
secondary: |
{% if is_state('update.home_assistant_core_update', 'on') %}
Есть обновления
{% else %}
Нет обновлений
{% endif %}
tap_action:
action: more-info
card_mod:
style: |
ha-card {
padding-bottom: 0px !important;
border: none !important;
}
- type: custom:mushroom-update-card
entity: update.home_assistant_core_update
show_buttons_control: true
card_mod:
style: |
mushroom-state-item {
display: none;
}
ha-card {
border: none !important;
}
Something like this
You can easily put anything in that empty space with a grid card or multiple stack in cards using the horizontal mode. This code uses the stack in card method and will produce
type: custom:stack-in-card
cards:
- type: custom:stack-in-card
mode: horizontal
cards:
- type: custom:mushroom-template-card
entity: update.home_assistant_core_update
icon: mdi:package
icon_color: |
{% if is_state('update.home_assistant_core_update', 'on') %}
orange
{% else %}
green
{% endif %}
primary: HA Core
secondary: |
{% if is_state('update.home_assistant_core_update', 'on') %}
Есть обновления
{% else %}
Нет обновлений
{% endif %}
tap_action:
action: more-info
card_mod:
style: |
ha-card {
padding-bottom: 0px !important;
border: none !important;
}
- type: custom:mushroom-template-card
entity: update.home_assistant_core_update
icon: mdi:package
icon_color: |
{% if is_state('update.home_assistant_core_update', 'on') %}
orange
{% else %}
green
{% endif %}
primary: HA Core
secondary: |
{% if is_state('update.home_assistant_core_update', 'on') %}
Есть обновления
{% else %}
Нет обновлений
{% endif %}
tap_action:
action: more-info
card_mod:
style: |
ha-card {
padding-bottom: 0px !important;
border: none !important;
}
- type: custom:mushroom-update-card
entity: update.home_assistant_core_update
show_buttons_control: true
card_mod:
style: |
mushroom-state-item {
display: none;
}
ha-card {
border: none !important;
}
Nothing to do with mushroom.
Look into the layout card and post your question there once you have tried to solve it yourself using the utility.
1 Like
Thank you very much, this is how I managed to do it.
1 Like
Hi,
For your information, there is a discussion that describes the use of card_mod with Mushroom cards.
sorry for beeing offtopic, but what card is that on the left side?
custom-button cards arranged from top to bottom within a vertical-stack card
Hi.
How did you do the little TV icon on the top ight corner of the Salon card?
Looks great
Merci!
I’m trying to bring mushrooms into my old toilet card and immediately run into a rake.
Is it possible to somehow remove borders, everywhere, as in the screenshot?
- type: vertical-stack
cards:
- type: markdown
content: >
**WC**
- type: custom:stack-in-card
margin: true
mode: horizontal
cards:
- type: light
entity: light.yeelight_toilet_ceiling
name: Celing
icon: phu:ceiling-round
- type: light
entity: light.toilet_ceiling_slowtemp
name: Dynamic
icon: mdi:theme-light-dark
- type: light
entity: light.yeelight_toilet_ceiling_nightlight
icon: mdi:weather-night
name: Nightlight
- type: conditional
conditions:
- entity: timer.toilet
state: "active"
card:
type: entities
entities:
- type: custom:timer-bar-card
entity: timer.toilet
mushroom:
primary_info: none
- type: conditional
conditions:
- entity: input_boolean.toilet_occupancy
state: "on"
card:
type: entities
entities:
- entity: sensor.toilet_occupied
icon: phu:rooms-toilet
name: WC is busy
- Use a theme that doesnt have borders (for example minimalist)
- remove borders from each card with card mod.
type: vertical-stack
cards:
- type: markdown
content: |
**WC**
card_mod:
style: |
ha-card {
border: none !important;
}
- type: custom:stack-in-card
margin: true
mode: horizontal
cards:
- type: light
entity: light.yeelight_toilet_ceiling
name: Celing
icon: phu:ceiling-round
card_mod:
style: |
ha-card {
border: none !important;
}
- type: light
entity: light.toilet_ceiling_slowtemp
name: Dynamic
icon: mdi:theme-light-dark
card_mod:
style: |
ha-card {
border: none !important;
}
- type: light
entity: light.yeelight_toilet_ceiling_nightlight
icon: mdi:weather-night
name: Nightlight
card_mod:
style: |
ha-card {
border: none !important;
}
card_mod:
style: |
ha-card {
border: none !important;
}
- type: conditional
conditions:
- entity: timer.toilet
state: active
card:
type: entities
entities:
- type: custom:timer-bar-card
entity: timer.toilet
mushroom:
primary_info: none
card_mod:
style: |
ha-card {
border: none !important;
}
- type: conditional
conditions:
- entity: input_boolean.toilet_occupancy
state: 'on'
card:
type: entities
entities:
- entity: sensor.toilet_occupied
icon: phu:rooms-toilet
name: WC is busy
card_mod:
style: |
ha-card {
border: none !important;
}
1 Like
I hope this one’s an easy fix, because that I’ve got really good ideas for it; is there a way for me to implement a Mushroom spinner without affecting the icon in the card (i.e. implementing a combination of the washer animation and the comet spinner)? Every time I’ve tried to implement a spinner alongside my current card configuration, it takes the icon along for the ride too.
Hello
I can’t change the line spacing since the update.
I added the lines in my theme, it doesn’t change anything
–card-primary-line-height: 1.5
–card-secondary-line-height: 1.5
THX
Hi all - is anyone else having issues with icons not rendering properly on some mushroom cards using the iPhone HA app. Everything is fine on PC/browser. This started happening with the latest HA version (2024.2.0)
on iphone - some icons missing in chip card and not displaying properly on entity cards
for comparison - here is what it looks like on a PC/browser
You at least need px; or em; after each 1.5
Guys, is it possible to move the second chip to the left closer to the first?
Like this:
- type: horizontal-stack
cards:
- type: custom:vertical-stack-in-card
cards:
- type: custom:mushroom-cover-card
name: Балкон - слева
entity: cover.balcony_left
show_buttons_control: true
show_position_control: true
- type: horizontal-stack
cards:
- type: custom:mushroom-chips-card
chips:
- type: entity
entity: counter.balcony_left_cover
icon: mdi:arrow-down
card_mod:
style: |
ha-card {
border: none
}
alignment: center
- type: custom:mushroom-chips-card
chips:
- type: entity
entity: counter.balcony_left_cover
icon: mdi:arrow-down
card_mod:
style: |
ha-card {
border: none
}
alignment: center
- type: custom:mushroom-chips-card
chips:
- type: entity
entity: input_text.balcony_left_rolls_last_recorded_event_time
card_mod:
style: |
ha-card {
border: none
}
alignment: center
Hi, i copy the code in my home assistant and i have car-mod well installed but the animation is not working , do you have any idea why
Hey, mine looks like yours.
sorry…here is my code:
type: custom:stack-in-card
cards:
- type: custom:layout-card
layout_type: custom:grid-layout
layout:
grid-template-columns: 65px auto 15px
margin: '-4px -4px -8px -4px;'
cards:
- type: custom:mushroom-template-card
entity: sensor.air_filter_days_remaining
icon: mdi:air-filter
icon_color: |
{% set filter_days = states(entity) | int %}
{% if filter_days < 11 %}
red
{% elif filter_days < 41 %}
orange
{% else %}
green
{% endif %}
- type: custom:bar-card
entity: sensor.air_filter_days_remaining
height: 42px
min: '0'
max: '120'
entity_row: true
severity:
- color: green
from: 40
to: 90
- color: orange
from: 10
to: 39
- color: red
from: 0
to: 9
positions:
icon: 'off'
indicator: 'off'
card_mod:
style: |
ha-card {
padding: 12px;
margin-left: 12px;
--bar-card-border-radius: 12px;
}
bar-card-value {
margin: 12px;
font-size: 12px;
font-weight: bolder;
}
bar-card-name {
margin: 12px;
font-size: 12px;
font-weight: bolder;
}
bar-card-backgroundbar {
opacity: 0.2;
filter: brightness(1);
}
- type: custom:mushroom-template-card
entity: input_boolean.furnace_filter_dropdown
icon: mdi:chevron-down
icon_color: disabled
hold_action:
action: none
card_mod:
style:
mushroom-shape-icon:
$: |
.shape ha-icon {
transition: transform 0.14s !important;
{{ 'transform: rotate(-180deg);' if is_state(config.entity, 'on') }}
}
.: |
ha-card {
align-items: flex-end;
box-shadow: none;
}
mushroom-shape-icon {
--shape-color: none !important;
}
- type: custom:stack-in-card
mode: horizontal
cards:
- type: custom:mushroom-entity-card
entity: input_datetime.air_filter_last_replaced
icon: mdi:calendar
name: Last Replaced
layout: vertical
primary_info: state
secondary_info: name
card_mod:
style: |
ha-card {
width: 130px;
margin-left: auto;
margin-right: auto;
}
- type: custom:mushroom-entity-card
entity: sensor.air_filter_days_remaining
name: Since Replaced
layout: vertical
primary_info: state
secondary_info: name
card_mod:
style: |
ha-card {
width: 130px;
margin-left: auto;
margin-right: auto;
}
- type: custom:mushroom-entity-card
entity: input_number.air_filter_threshold
icon: mdi:calendar-edit
name: Replacement Interval
layout: vertical
primary_info: state
secondary_info: name
card_mod:
style: |
ha-card {
width: 130px;
margin-left: auto;
margin-right: auto;
}
- type: custom:mushroom-template-card
primary: Reset
secondary: ''
icon: mdi:refresh
layout: vertical
tap_action:
action: call-service
service: script.reset_air_filter_date_to_today
data: {}
target: {}
hold_action:
action: none
double_tap_action:
action: none
card_mod:
style: |
ha-card {
margin-top: -14px;
}
card_mod:
style: |
ha-card {
{{ 'height: 66px;' if is_state('input_boolean.furnace_filter_dropdown', 'off') }}
}
