mr_aleks
February 7, 2024, 8:09am
10052
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
cetgin
February 7, 2024, 11:36am
10053
Hello please help me i want to do this
but its
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
mr_aleks
February 7, 2024, 1:41pm
10056
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.
mase
February 7, 2024, 4:44pm
10058
sorry for beeing offtopic, but what card is that on the left side?
cetgin
February 7, 2024, 9:12pm
10059
custom-button cards arranged from top to bottom within a vertical-stack card
Hi.
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.
msaphoto06
February 8, 2024, 5:45pm
10064
Hello
I can’t change the line spacing since the update.
I added the lines in my theme, it doesn’t change anything
THX
jata
February 8, 2024, 11:48pm
10065
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
simo241
February 9, 2024, 1:03pm
10069
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') }}
}
Guys, as far as I understand, it’s impossible to make only the icon rotate without the main text?
- type: custom:mushroom-template-card
primary: Fan
icon: mdi:fan
icon_color: teal
layout: vertical
entity: light.bathroom_dimmer_fan
card_mod:
style: |
ha-card {
border: none !important;
box-shadow: 0px 0px;
animation: rotation linear infinite;
{% if states('light.bathroom_dimmer_fan') == 'on' %}
animation-duration: 2s;
{%- else -%}
{%- endif %}
}
@keyframes rotation {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
