Love this project! But I do have a few questions how can I merge a mushroom card and a power gauge, specifically by adding a toggle button below the power gauge? Secondly, is it possible to have multiple toggle buttons within a mushroom entity card?
Thanks for the help, but doesnât work
Curious it should work. Have you tried adding the !important syntax? Clear the cache? I used the same for some mushroom-title cards today with no problems.
--title-font-size: 10px !important;
- type: custom:mushroom-title-card
title: Quarto
card_mod:
style: |
ha-card {
--title-font-size: 10px !important;
}
I put like that, didnât work
Ok but in your example some spaces are missing before style. Maybe only a fault of your copy & paste but it must exactly look like this with the spaces before the words, otherwise it doesnât work.
- type: custom:mushroom-title-card
title: Quarto
card_mod:
style: |
ha-card {
--title-font-size: 10px !important;
}
2 Likes
Hello there, how to adapt this card to new HACS 2.0 ?
Can we mix auto-entities card and mushroom card ?
I donât have HACS 2.0 so canât help with that.
Sure, you can mix any type of card if you use the custom stack-in-card.
you sure can, like this ?
type: custom:auto-entities
card:
type: grid
columns: 2
square: false
card_param: cards
filter:
include:
- domain: light
state: 'on'
options:
type: custom:mushroom-light-card
use_light_color: true
show_brightness_control: true
show_color_control: true
collapsible_controls: true
show_color_temp_control: true
layout: vertical
exclude: []
show_empty: true
1 Like
Thank you! Got it now and it works smooth 
Actually Iâm wondering how to make the left tile look like the right one:
The area around the left icon glows less green then in the right tile.
Can the text âTĂźrschlossâ and âTĂźrâ centered in any way?
Can someone help or have any suggestions for me?
Thank you.
type: horizontal-stack
cards:
- type: tile
entity: binary_sensor.turschloss_wohnung
card_mod:
style: |
:host {
justify-content: center;
text-align: center;
align-items: center;
{% set state = states('binary_sensor.turschloss_wohnung') | float(0) %}
{% if states('binary_sensor.turschloss_wohnung', 'on') %}
--card-mod-icon-color: green;
--icon: mdi:door-open;
{% elif states('binary_sensor.turschloss_wohnung', 'off') %}
--card-mod-icon-color: red;
--icon: mdi:door;
{% endif %}
}
name: WohnungstĂźr
- type: tile
entity: lock.turschloss_wohnung
card_mod: null
style: |
:host {
justify-content: center;
text-align: center;
align-items: center;
{% set state = states('lock.turschloss_wohnung') %}
{% if state == 'unlocked' %}
--card-mod-icon-color: red;
--card-mod-icon: mdi:lock-closed;
{% elif state == 'locked' %}
--card-mod-icon-color: green;
--card-mod-icon: mdi:lock;
{% endif %}
}
name: TĂźrschloss
show_name: true
show_icon: true
And sometimes, thatâs strange, the left icon is grey and I donât know how, it went back to green when I switch between tabs. And sometimes not.
how looks the right card_mod string to modify this "width:?
i tried this one, but is not working, maybe someone can help
i try to move the selection field 4px to the right
mushroom-select-option-control$:
mushroom-select$:
naturalmenuwidth$: |
fixedmenuposition {
width: 104% !important;
}
Guys, I am having troubles making animation with mushroom cards. I have installed card_mod3 and it works with (no mushroom) cards. But with mushroom no luck.
Anyone had same issue?
hi everyone,
since mushroom version 4.x the card-mods that i was using are no longer working on my phone.
Iâm using card_mod with âpadding: 0px !importantâ to reduce the padding around the cards, but after updating the mushroom integration, this variable is ignored when opening a dashboard on my phone. Does anyone have a solution for this (see example of a card below):
type: custom:stack-in-card
cards:
- type: custom:layout-card
layout_type: custom:grid-layout
cards:
- type: custom:mushroom-number-card
view_layout:
grid-column: 1 / 5
grid-row: 1 / 2
entity: input_number.fan_setting_input
display_mode: slider
icon_color: green
layout: horizontal
primary_info: none
secondary_info: none
card_mod:
style: |
ha-card {
border: none;
--icon-size: 30px;
--control-height: 30px;
padding: 0px !important;
}
- type: custom:mushroom-entity-card
view_layout:
grid-column: 1 / 2
grid-row: 2 / 3
entity: input_boolean.fan_timer_1
icon_color: green
name: 10 min
secondary_info: none
layout: horizontal
tap_action:
action: toggle
card_mod:
style: |
ha-card {
border: none;
--card-primary-font-size: 12px;
--card-secondary-font-size: 12px;
--icon-size: 30px;
padding: 0px !important;
}
- type: custom:mushroom-entity-card
view_layout:
grid-column: 2 / 3
grid-row: 2 / 3
entity: input_boolean.fan_timer_2
icon_color: green
name: 20 min
secondary_info: none
layout: horizontal
tap_action:
action: toggle
card_mod:
style: |
ha-card {
border: none;
--card-primary-font-size: 12px;
--card-secondary-font-size: 12px;
--icon-size: 30px;
padding: 0px !important;
}
- type: custom:mushroom-entity-card
view_layout:
grid-column: 3 / 4
grid-row: 2 / 3
entity: input_boolean.fan_timer_3
icon_color: green
name: 30 min
secondary_info: none
layout: horizontal
tap_action:
action: toggle
card_mod:
style: |
ha-card {
border: none;
--card-primary-font-size: 12px;
--card-secondary-font-size: 12px;
--icon-size: 30px;
padding: 0px !important;
}
- type: custom:mushroom-entity-card
view_layout:
grid-column: 4 / 5
grid-row: 2 / 3
entity: sensor.fan_timer_numerical
icon_color: green
name: 30 min
primary_info: state
secondary_info: none
layout: horizontal
card_mod:
style: |
ha-card {
border: none;
--card-primary-font-size: 12px;
--card-secondary-font-size: 12px;
--icon-size: 30px;
padding: 0px !important;
}
Hi,
Only me who now gets the wonderful âcustom element does not existâ for mushroom after the latest mushroom update?
Could of course be something else but earlier today I updated to the latest mushroom release. Did I miss something?
I had the same problem. Someone commented somewhere that clearing the cache helps. It does not matter if itâs in a browser or the companion apps.
1 Like
Thanks, it solved it! Rather obvious now when I think a little bit more but never had to do that manually before. The âreloadâ pop-up that you get when updating or download any frontend package from hacs always worked before (using the companion app)
EDIT: For anyone else having this issue. You just need to use position: relative; on your main cardâs css to fix this.
Hi,
After a recent update I am facing the following issue. I use conditional chip cards on my already existing cards in order to display some elements. After one of the latest updates, the chip cards produce a container that sits on top of the actual card, disregarding the z-index and preventing from using the tap actions. Here is a screeenshot of the element as seen on the inspector. And also the code.
type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
primary: Kitchen
secondary: >-
{{ states('sensor.living_room_remote_temperature') | round(1) }}°C - {{
states('sensor.living_room_remote_humidity') | round(1) }}%
icon: >-
{% if is_state('automation.auto_kitchen_light_toggle', 'off') or
is_state('input_boolean.kt_off_blocker', 'on') %}
mdi:pause
{% else %}
phu:rooms-kitchen
{% endif %}
tap_action:
action: navigate
navigation_path: /lovelace-mushroom/kitchen
icon_color: >-
{% if is_state('light.kitchen_light', 'on') or
is_state('light.kitchen_lights_led_strip', 'on') or
is_state('light.kitchen_lights_spots', 'on') %}
orange
{% elif is_state('automation.auto_kitchen_light_toggle', 'off') or
is_state('input_boolean.kt_off_blocker', 'on') %}
red
{% endif %}
hold_action:
action: call-service
service: script.kt_auto_light
target: {}
double_tap_action:
action: call-service
service: light.toggle
target:
entity_id:
- light.kitchen_lights
data: {}
badge_color: >-
{% if is_state('automation.auto_kitchen_light_toggle', 'on') and
is_state('input_boolean.kt_off_blocker', 'off') and
is_state('input_boolean.kt_movement', 'on') %}
orange
{% endif %}
badge_icon: >-
{% if is_state('automation.auto_kitchen_light_toggle', 'on') and
is_state('input_boolean.kt_off_blocker', 'off') and
is_state('input_boolean.kt_movement', 'on') %}
mdi:walk
{% endif %}
card_mod:
style: |
:host {
--ha-card-border-width: 0px;
z-index: 1;
}
- type: custom:mushroom-chips-card
chips:
- type: conditional
conditions:
- entity: input_boolean.dishwasher
state: 'on'
chip:
type: template
icon_color: green
icon: mdi:dishwasher
card_mod:
style: |
ha-card {
{% if states('binary_sensor.refridgerator_door_contact') == 'on' %}
right: -44px;
top: -26px;
z-index: 0;
{%else%}
right: 0px;
z-index: 0;
{% endif %}
}
- type: conditional
conditions:
- entity: binary_sensor.refridgerator_door_contact
state: 'on'
chip:
type: template
icon_color: red
icon: mdi:fridge-alert
alignment: end
card_mod:
style: |
ha-card {
z-index: 0;
top: -42px;
}
:host {
--ha-card-border-width: 0px;
}
card_mod:
style: |
ha-card {
height: 58px;
}
Any ideas?
Hi all,
Iâm trying to realize a mushroom template card to cast on a nest hub to show a timer. So Iâve made a specific dashboard and inserted the card with specific height to have a nice look on the nest hub. Iâve used the following code:
type: custom:mushroom-template-card
primary: '{{ states(entity) }}'
entity: sensor.timer_aiuto_cucina_tempo_rimanente
layout: horizontal
fill_container: true
icon: mdi:timer
card_mod:
style:
mushroom-state-info$: |
.container {
--card-primary-color: var(--primary-color);
--card-primary-font-size: 50px;
}
.primary {
height: fit-content;
}
mushroom-shape-icon$: |
.shape {
--icon-symbol-size: 40px;
--icon-size: 60px;
border: 5px outset var(--primary-color);
--shape-animation: ping 1s infinite;
}
@keyframes ping {
0% {box-shadow: 0 0 0 0 rgba(var(--rgb-blue), 0.7);}
70% {box-shadow: 0 0 0 10px transparent;}
100% {box-shadow: 0 0 0 0 transparent;}
}
.: |
ha-card {
align-items: center;
height: 250px !important;
--card-primary-color: var(--primary-color);
}
ha-state-icon {
animation: wobbling 0.5s linear infinite alternate;
}
@keyframes wobbling {
0% {transform: rotate(-15deg);}
100% {transform: rotate(15deg);}
}
As you can see if I set a font size over 28px the text is cut off.
I tried also to edit the height in the container section but nothings happen.
.container {
--card-primary-color: var(--primary-color);
--card-primary-font-size: 50px;
height: fit-content !important;
}
Do you have any suggestion? Thanks in advace
Hello everyone, there is a menu button in the chips, but is it possible to make a page edit button? A pencil icon, I would just make it available only to administrators.
Solved with the help of ChatGPT, he suggested me to change the line-height in the container section but even then it didnât work.
Found that it had to be done in the primary text section.
- type: custom:mushroom-template-card
primary: '{{ states(entity) }}'
entity: sensor.timer_aiuto_cucina_tempo_rimanente
layout: horizontal
fill_container: true
icon: mdi:timer
card_mod:
style:
mushroom-state-info$: |
.container {
--card-primary-color: var(--primary-color);
--card-primary-font-size: 140px;
}
.primary {
line-height: 200% !important;
}
Here is the result:
1 Like
Hi,
The new badges has the possibilities to add a title/name in each badge. Is it possible to add something similar for the chips card? I would really love it to have a title/name in it.