type: custom:mushroom-title-card
title: Hello, {{ user }} !
subtitle: TEST
card_mod:
style: |
ha-card {
--title-color: red !important;
--title-font-size: 40px;
--subtitle-color: red !important;
--subtitle-font-size: 40px;
}
1 Like
Awesome! Thanks.
Pray for a lull in code changes 
2 Likes
I believe this is the right place to ask.
my mobile dashboard was like this:
however after the 2024.2.0 update, the UI started to be very unresponsive. All the things I click, even the pages are not shown. Popup more-info and browser-mod wonât come out. I can see from the address bar that changes the address correctly based on the page, but it become so stuck that I have to force close the page and reload.
I have no errors on logs but I have some errors in firefox console:
It was amazing but unfortunately is not possible to use it anymore.
I leave a code sample for a room:
type: custom:layout-card
layout_type: custom:grid-layout
layout:
grid-template-columns: auto
grid-template-rows: auto
column-gap: 0px
row-gap: 0px
grid-template-areas: |
"1"
"2"
"3"
"4"
"5"
"6"
"7"
"8"
"9"
"10"
"11"
"12"
cards:
- type: custom:stack-in-card
mode: vertical
cards:
- type: custom:stack-in-card
mode: horizontal
cards:
- type: custom:mushroom-template-card
primary: Sala da Pranzo
icon: mdi:silverware-fork-knife
icon_color: white
tap_action:
action: navigate
navigation_path: dinnerkitchen
- type: custom:mushroom-chips-card
chips:
- type: template
entity: sensor.hallway_temperature
content: '{{ states(''sensor.hallway_temperature'') }} ÂșC'
icon: >-
{% set state=states('sensor.hallway_temperature')|float(0) %}
{% if state<20 %} mdi:thermometer-low {% elif state<24 %}
mdi:thermometer {% else %} mdi:thermometer-high {% endif %}
icon_color: >-
{% set state=states('sensor.nest_temperature')|float(0) %} {%
if state<20 %} blue {% elif state<24 %} green {% elif state<27
%} amber {% else %} red {% endif %}
tap_action:
action: more-info
- type: template
entity: sensor.nest_humidity
content: '{{ states(''sensor.nest_humidity'') }} %'
icon: mdi:water-percent
icon_color: >-
{% set state=states('sensor.nest_humidity')|float(0) %} {% if
state<30 %} blue {% elif state<60 %} green {% elif state<80 %}
amber {% else %} red {% endif %}
tap_action:
action: more-info
alignment: end
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: 0;
--chip-height: 44px
}
card_mod:
style: |
ha-card {
border-radius: 10px 10px 0px 0px;
--mush-icon-size: 24px;
--card-primary-font-size: 14px;
}
- type: custom:stack-in-card
cards:
- type: custom:mushroom-chips-card
fill_container: true
chips:
- type: template
entity: input_select.lorenzo
icon: >-
{% if is_state('input_select.lorenzo', 'Cucina / Sala da Pranzo')
%} mdi:face-man {% endif %}
icon_color: amber
- type: template
entity: input_select.marika
icon: >-
{% if is_state('input_select.marika', 'Cucina / Sala da Pranzo')
%} mdi:face-woman {% endif %}
icon_color: amber
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: 0;
}
view_layout:
grid-column: 1
grid-row: 2
card_mod:
style: |
ha-card {
border-radius: 0px 0px 10px 10px;
height: 35px;
margin-top: -14px;
outline-color: red;
--chip-spacing: 0px;
--ha-card-background: #26596A;
}
- type: custom:stack-in-card
cards:
- type: custom:mushroom-chips-card
fill_container: true
chips:
- type: template
entity: light.sala_da_pranzo
icon: >-
{% if is_state('light.sala_da_pranzo', 'on') %} mdi:lightbulb-on
{% else %} mdi:lightbulb {% endif %}
icon_color: >-
{% if is_state('light.sala_da_pranzo', 'on') %} amber {% elif
is_state('light.sala_da_pranzo', 'unavailable') %} red {% else %}
grey {% endif %}
- type: template
entity: light.wled_lampada_lorenzo
icon: mdi:lamp
icon_color: >-
{% if is_state('light.wled_lampada_lorenzo', 'on') %} amber {%
elif is_state('light.wled_lampada_lorenzo', 'unavailable') %} red
{% else %} grey {% endif %}
- type: template
entity: light.wled_lampada_marika
icon: mdi:lamp
icon_color: >-
{% if is_state('light.wled_lampada_marika', 'on') %} amber {% elif
is_state('light.wled_lampada_marika', 'unavailable') %} red {%
else %} grey {% endif %}
- type: template
entity: binary_sensor.finestra_sala_da_pranzo_contact
icon_color: >-
{% set
state=states('binary_sensor.finestra_sala_da_pranzo_contact') %}
{% if state=='on'%} amber {% elif state=='unavailable' %} red {%
else %} grey {% endif %}
icon: >-
{% set
state=states('binary_sensor.finestra_sala_da_pranzo_contact') %}
{% if state=='on'%} mdi:window-open-variant {% else %}
mdi:window-closed-variant {% endif %}
tap_action:
action: more-info
- type: template
entity: binary_sensor.porta_principale_contact
icon_color: >-
{% set state=states('binary_sensor.porta_principale_contact') %}
{% if state=='on'%} amber {% elif state=='unavailable' %} red {%
else %} grey {% endif %}
icon: >-
{% set state=states('binary_sensor.porta_principale_contact') %}
{% if state=='on'%} mdi:door-open {% else %} mdi:door-closed {%
endif %}
tap_action:
action: more-info
- type: template
entity: switch.tapo_camera_8dbb_privacy
icon_color: >-
{% set state=states('switch.tapo_camera_8dbb_privacy') %} {% if
state=='on'%} grey {% else %} amber {% endif %}
icon: >-
{% set state=states('switch.tapo_camera_8dbb_privacy') %} {% if
state=='on'%} mdi:eye-off-outline {% else %} mdi:cctv {% endif %}
hold_action:
action: navigate
navigation_path: /lovelace-mobile/camera
tap_action:
action: toggle
confirmation:
text: Sei sicuro di voler cambiare la privacy mode?
alignment: end
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: 0;
}
view_layout:
grid-column: 1
grid-row: 2
card_mod:
style: |
ha-card {
height: 35px;
margin-top: -14px;
border-radius: 0px 0px 10px 10px;
--ha-card-background: none;
}
Should you find something wrong or whatever information that I missed (like incompatibility from the used HACS mods) please kindly let me know.
Thanks.
1 Like
I tested your code, which works, however the below code does not work. It worked before and adjusted to the current (supposedly) proper way.
type: custom:mushroom-title-card
title: '{{ states(''sensor.current_uv_level'') }}'
alignment: center
subtitle: Zonkracht
card_mod:
style: |
ha-card {
{% if is_state('sensor.current_uv_level', 'Low') %}
--title-color: #66BB6A;
{% elif is_state('sensor.current_uv_level', 'Moderate') %}
--title-color: #ff9933;
{% elif is_state('sensor.current_uv_level', 'High') %}
--title-color: #902909;
{% elif is_state('sensor.current_uv_level', 'Very high') %}
--title-color: #782208;
{% endif %};
}
Do you see anything wrong here?
What was my code that wasnât the proper way?
I didnât test it, but try double quotes on the state.
type: custom:mushroom-title-card
title: '{{ states(''sensor.current_uv_level'') }}'
alignment: center
subtitle: Zonkracht
card_mod:
style: |
ha-card {
{% if is_state('sensor.current_uv_level', "Low") %}
--title-color: #66BB6A;
{% elif is_state('sensor.current_uv_level', "Moderate") %}
--title-color: #ff9933;
{% elif is_state('sensor.current_uv_level', "High") %}
--title-color: #902909;
{% elif is_state('sensor.current_uv_level', "Very high") %}
--title-color: #782208;
{% endif %};
}
No, your sample code is working:
type: custom:mushroom-title-card
title: Hello, {{ user }} !
subtitle: hello
card_mod:
style: |
ha-card {
--title-color: red !important;
--subtitle-color: blue !important;
}
My code was not working anymore after recent updates, so I changed it to what it should be right now, but it is still not working. Double quotes I tried already, not working. I suspect it has to do something with the templating, do you agree?
Change the first part of your if statement to {% if states('sensor.current_uv_level', "Low") %} and it should work.
type: custom:mushroom-title-card
title: '{{ states(''sensor.current_uv_level'') }}'
alignment: center
subtitle: Zonkracht
card_mod:
style: |
ha-card {
{% if states('sensor.current_uv_level', "Low") %}
--title-color: #66BB6A !important;
{% elif is_state('sensor.current_uv_level', "Moderate") %}
--title-color: #ff9933 !important;
{% elif is_state('sensor.current_uv_level', "High") %}
--title-color: #902909 !important;
{% elif is_state('sensor.current_uv_level', "Very high") %}
--title-color: #782208 !important;
{% endif %};
}
1 Like
It could be related to this bug report. Iâve had to roll back to 2024.1 because of the UI performance issues, which were happening on every device I use (from Fire Tablets to iPads and iPhones to my Windows 11 desktop). Thereâs not really any indication of a potential root cause yet, unfortunately. I donât suspect itâs a Mushroom issue, because with the current version of Mushroom on HA 2024.1.4, the UI is as responsive as expected.
1 Like
Iâm trying to change the default icon shape colour through my themes using card-mod, but need some help as it is not applying:
card-mod-root-yaml: |
paper-tabs$: |
.not-visible {
display: none;
}
/*Uncomment this if you want the header on the bottom
#selectionBar {
bottom: unset !important;
}
*/
mushroom-shape-icon$: |
.shape {
--shape-color: blue !important;
}
Thanks
If you get it let me know. I tried hard in my theme as well, but failed. I can adjust everything else , but the shape color and the full stack in card border.
Hi,
I use a mushroom template card to create a simple clock and date card. Now I wanted to increase font-size which is working so far⊠the only thing is when I go above 26px text is being cut off⊠So there seems to be a limiting factor for this to workâŠ
Thought the icon size might effect space for the text but that doesnât seem the case eitherâŠ
What am I missing here?
card:
type: custom:mushroom-template-card
card_mod:
style:
mushroom-state-info$: |
.container {
--card-secondary-font-size: 16px;
--card-primary-font-size: 26px;
gap: 10px;
}
.: |
ha-card {
height: 90px !important;
}
mushroom-shape-icon {
--icon-size: 90px;
}
primary: '{{ states(''sensor.time'') }} Uhr'
secondary: >-
{% set germanWeekdays = ["Montag",
"Dienstag","Mittwoch","Donnerstag","Freitag","Samstag","Sonntag"] %}
{{ germanWeekdays[now().weekday()] }} {{ now().strftime('%d %b') }}
multiline_secondary: false
fill_container: true
Hi everyone,
is there a way how to set width (make it shorter) of the right area for the value entering?
I use custom:mushroom-number-card and the problem is - right area is too big (in terms of width) and I donât have enough space for text the left side.
Hello all,
In a
type: custom:mushroom-chips-card
chips:
- type: template
icon: ''
icon_color: ''
picture: /local/shutter.png
How can i increase the image size?
Its too small:
--chip-height: 64px; is what you want to use. Something like this
type: custom:mushroom-chips-card
chips:
- type: template
icon: ''
icon_color: ''
picture: /local/shutter.png
card_mod:
style: |
ha-card {
justify-content: center;
--chip-height: 64px;
background: none !important;
border: none !important;
}
Please post your code.
Add --card-primary-line-height: 26px !important;
Ensure the line height matches the font size
--card-primary-font-size: 46px !important;
--card-primary-line-height: 46px !important;
type: custom:mushroom-template-card
card_mod:
style:
mushroom-state-info$: |
.container {
--card-secondary-font-size: 16px;
--card-primary-font-size: 46px;
--card-primary-line-height: 46px !important;
gap: 10px;
}
.: |
ha-card {
height: 90px !important;
}
mushroom-shape-icon {
--icon-size: 90px;
}
primary: '{{ states(''sensor.time'') }} Uhr'
secondary: >-
{% set germanWeekdays = ["Montag",
"Dienstag","Mittwoch","Donnerstag","Freitag","Samstag","Sonntag"] %}
{{ germanWeekdays[now().weekday()] }} {{ now().strftime('%d %b') }}
multiline_secondary: false
fill_container: true
1 Like
Thanks! That worked 
1 Like
Here is the code:
type: custom:stack-in-card
cards:
- type: custom:mushroom-title-card
title: Room1
card_mod:
style: |
ha-card {
--title-font-size: 1.2rem;
--primary-text-color: gray;
--title-spacing: 0rem;
--title-padding: 0.5rem;
}
- type: custom:stack-in-card
mode: vertical
cards:
- type: custom:mushroom-number-card
entity: input_number.heating_u1_ch1_temperature
display_mode: buttons
layout: horizontal
card_mod:
style: |
ha-card {
border-width: 0px;
--control-width: 130px;
}
mushroom-state-info {
text-align: start;
width: fit-content;
}
card_mod:
style: |
ha-card {
border-width: 1px;
border-radius: 10px;
box-shadow: none;
height: 68px;
}
card_mod:
style: |
ha-card {
padding: 10px;
border-width: 1px;
background: rgba(var(--rgb-primary-text-color), 0.01);
}
now where is that Tile guide, I cant find it and I have a very pressing question 
suppose its safe to post here too, because Mushroom also uses more-info like anything in HA, especially this Tile.
it was not, sorry, moved over here