Thanks a bunch! It’s 8:30AM where I live so off to work. I’m going to try this out in a few hours.
Thanks for the guidance - You’ve been awesome!
No problem! Happy to assist and have a good day…
I’m back only because for some reason the text color change code works for everyone but me!
Below is what was suggested by Dimitri and many others online:
card_mod:
style: |
ha-card {
--primary-text-color: blue;
}
This is me:
type: custom:mushroom-chips-card
chips:
- type: template
entity: light.den
icon: |-
{% if is_state(entity, 'on') %}
mdi:sofa-single
{% else %}
mdi:sofa-single
{% endif %}
icon_color: |-
{% if is_state(entity, 'on') %}
#F97B22
{% else %}
#D8AE7E
{% endif %}
content: >-
Den: {{ expand(state_attr(entity, 'entity_id'))|
selectattr('state','eq','on')|map(attribute='entity_id')|list|count}} / {{
expand(state_attr(entity,
'entity_id'))|map(attribute='entity_id')|list|count }}
card_mod:
style: |
ha-card {
--chip-background: {{ 'lime' if is_state('light.den', 'on') else '#FFF2D7' }};
box-shadow: none !important;
justify-content: right;
--chip-height: 35px;
--chip-border-radius: 10px;
--chip-icon-size: 18px;
--chip-font-size: 12px;
--primary-text-color: blue;
font-style: bold;
font-variant: small-caps;
padding-right: 0px;
padding-left: 0px;
font-family: "Roboto";
font-weight: bolder;
min-width: 70px !important;
}
card_mod:
style:
mushroom-template-chip:nth-child(1)$: >
ha-state-icon { animation: {{ 'blink 2s linear infinite;' if
is_state('light.den','on') else 'blink 0s linear infinite;' }}
}
@keyframes blink { 50% {opacity: 0;} }
Also, if I apply you background color conditional formatting to this, will it work? Something like the below?
--primary-text-color: {{ 'lime' if is_state('light.den', 'on') else '#FFF2D7' }};
try --text-color: blue; It should resolve your issue.
THANK YOU - AGAIN! Works like a charm - even with the conditional
How do I go about figuring this on my own without going crazy?
It can be frustrating at first, but it was actually in Dimitri’s guide 
This is also a good source for a better understanding of custom card modding
1 Like
Thanks again,
I have multiple lights and realized I need to change the specific entity name in like 3-4 places for each light (see below)
--chip-background: {{ 'FFF2D7' if is_state('light.yeelight_bslamp1_0x31b3710', 'on') else '#F6F5F2' }};
--text-color: {{ 'lime' if is_state('light.yeelight_bslamp1_0x31b3710', 'on') else '#D8AE7E' }};
card_mod:
style:
mushroom-template-chip:nth-child(2)$: >
ha-state-icon { animation: {{ 'blink 2s linear infinite;' if
is_state('light.yeelight_bslamp1_0x31b3710','on') else 'blink 0s linear infinite;' }}
}
@keyframes blink { 50% {opacity: 0;} }
Without creating a template in the config.yaml file, is there a way to replace all references to the entity with just an ‘entity’ or ‘enitity_id’?
Similar to the way they use for icon and icon_color:
- type: template
entity: light.yeelight_bslamp1_0x31b3710
icon: |-
{% if is_state(entity, 'on') %}
mdi:lamp
{% else %}
mdi:lamp-outline
{% endif %}
icon_color: |-
{% if is_state(entity, 'on') %}
#F97300
{% else %}
#B4B4B8
{% endif %}
config.entity or entity works most of the time unless the mod is using the nth-child
This works and will reduce the number of changes.
card_mod:
style: |
ha-card {
--chip-background: {{ 'lime' if is_state(config.entity, 'on') else 'yellow' }};
--text-color: {{ 'lime' if is_state(config.entity, 'on') else '#D8AE7E' }};
1 Like
I spent ages trying to get that to work on a chip template before I realised it just didn’t work, I thought it was me lol
Hi,
Currently I have this template card:
But I want to change the word “Temperature” and “Humidity” to an MDI icon. Is this possible?
Example:
secondary: >-
mdi:thermometer: {{ states('sensor.living_room_temperature') }}° | mdi:water-percent: {{
states('sensor.living_room_humidity')}}%
This is my full code:
type: custom:mushroom-template-card
primary: 'Inside Feels Like: {{ states(''sensor.living_room_feels_like_temperature'') }}°'
secondary: >-
Temperature: {{ states('sensor.living_room_temperature') }}° | Humidity: {{
states('sensor.living_room_humidity')}}%
icon: mdi:home-import-outline
multiline_secondary: true
entity: sensor.living_room_feels_like_temperature
tap_action:
action: more-info
fill_container: false
I don’t think it’s possible with mushroom template card… I maybe wrong.
only way I know would be to use markdown card, stack-in-card and card_mod
type: custom:stack-in-card
cards:
- type: vertical-stack
cards:
- type: custom:mushroom-template-card
card_mod:
style:
mushroom-shape-icon$: |
.shape {
margin-top: 20px;
}
.: |
ha-card {
margin-top: -20px;
border: none;
box-shadow: none;
}
primary: >-
Inside Feels Like: {{
states('sensor.living_room_feels_like_temperature') }}°
icon: mdi:home-import-outline
multiline_secondary: true
entity: sensor.living_room_feels_like_temperature
tap_action:
action: more-info
fill_container: false
- type: markdown
card_mod:
style: |
ha-card {
border: none;
box-shadow: none;
margin-left: 40px;
margin-top: -50px;
}
content: >
<ha-icon icon="mdi:thermometer"></ha-icon>{{
states('sensor.living_room_temperature') }}° | <ha-icon
icon="mdi:water-percent"></ha-icon> {{
states('sensor.living_room_humidity')}}%
I’m back with another query - and happy if you can point me at a source to learn the syntax.
I’m trying to get my mushroom ‘template’ chip card to show the state (on/off) of the entity within the card. Is there a way to combine multiple attributes in a card, say state + brightness level? Something like “ON | 95%”
My failed code below:
type: custom:mushroom-chips-card
chips:
- type: template
entity: light.pine
icon: |-
{% if is_state(entity, 'on') %}
mdi:lamp
{% else %}
mdi:lamp-outline
{% endif %}
icon_color: |-
{% if is_state(entity, 'on') %}
#FF9130
{% else %}
#B4B4B8
{% endif %}
content: {{state_attr(config.entity, 'state')
card_mod:
style: |
ha-card {
--chip-background: {{ '#FFF2D7' if is_state(config.entity, 'on') else '#F6F5F2' }};
box-shadow: none !important;
justify-content: center;
--chip-height: 35px;
--chip-border-radius: 10px;
--chip-icon-size: 20px;
--chip-font-size: 12px;
--text-color: {{ 'lime' if is_state(config.entity, 'on') else '#D8AE7E' }};
font-style: bold;
font-variant: small-caps;
padding-right: 0px;
padding-left: 0px;
font-family: "Roboto";
font-weight: bolder;
width: 0px !important;
min-width: 88px !important;
}
I’m being ambitious with a chip card, but can we by any chance have the content/attributes across lines? To look something like this?
type: custom:mushroom-chips-card
chips:
- type: template
entity: light.couch
icon: |-
{% if is_state(entity, 'on') %}
mdi:lamp
{% else %}
mdi:lamp-outline
{% endif %}
icon_color: |-
{% if is_state(entity, 'on') %}
#FF9130
{% else %}
#B4B4B8
{% endif %}
content: |
{{ state_attr(config.entity, 'friendly_name')}}
{{'ON' if states(config.entity, 'on') else 'OFF' }}
{{ state_attr(config.entity, 'brightness') | multiply(1/2.55) |round(0)}}%
card_mod:
style: |
ha-card {
--chip-background: {{ '#FFF2D7' if is_state(config.entity, 'on') else '#F6F5F2' }};
box-shadow: none !important;
justify-content: center;
--chip-height: 35px;
--chip-border-radius: 10px;
--chip-icon-size: 20px;
--chip-font-size: 12px;
--text-color: {{ 'lime' if is_state(config.entity, 'on') else '#D8AE7E' }};
font-style: bold;
font-variant: small-caps;
padding-right: 0px;
padding-left: 0px;
font-family: "Roboto";
font-weight: bolder;
width: 0px !important;
min-width: 88px !important;
}
It may require additional formatting to adjust for the content.
1 Like
Wow! Thank you!
- How do we have Couch, On and 100% to center align? I know you mentioned formatting. I see
justify-content: center;but doesn’t seem to do the trick!
Also, I tried playing around with the size and it pushed the attributes up to one line
Worst part is that Dimitri hasn’t found a way to get this working if I understand him correctly
- Also, just noticed that when I turn the light on and then off the attributes stay shown - like this - which is good:
however, when I refresh HA, all the ‘content’ is just blank and the icon is back in the center , like this:
Any idea how to fix this?
-
Can I have the brightness percentage show only when we have the light on, else maybe “-” or disappear? Basically need to conditional format
{{ state_attr(config.entity, 'brightness') | multiply(1/2.55) |round(0)}}%with the help of{{'ON' if states(config.entity, 'state') else 'OFF' }}- just don’t know how! -
Also, How do I understand this? It looks like whatever result comes out of the brightness attribute, needs to be divided by ‘2.55’ to make sense out of it and then you are rounding the result to 0 decimals
| multiply(1/2.55) |round(0)}}% -
Reason I ask is:
- I want to add temperature on another card with 1 decimal place and a °C symbol at the end
- On another card, which is a sensor, I want to add '‘last changed’ but instead ‘10 seconds ago’ I’d like ‘10s’ or ‘1m’ or ‘2h’
Thank you for all your help of this!
Thank you for this! I’ve played around with it and got it to how I want it 
type: custom:stack-in-card
cards:
- type: vertical-stack
cards:
- type: custom:mushroom-template-card
card_mod:
style:
mushroom-shape-icon$: |
.shape {
margin-top: 5px;
}
.: |
ha-card {
border: none;
box-shadow: none;
height: 10px !important;
margin-top: 10px;
}
primary: >-
Inside Feels Like: {{
states('sensor.living_room_feels_like_temperature') }}°
secondary: .
icon: mdi:home-import-outline
icon_color: |2-
{% set temp = states('sensor.climate_outside') %}
{% if states('sensor.outside_home_feels_like_temperature') | float <= 11 %}
white
{% elif temp == 'Cold' %}
blue
{% elif temp == 'Warm' %}
orange
{% elif temp == 'Hot' %}
red
{% endif %}
multiline_secondary: true
entity: sensor.living_room_feels_like_temperature
tap_action:
action: more-info
fill_container: false
- type: markdown
card_mod:
style: |
ha-card {
border: none;
box-shadow: none;
margin-left: 40px;
margin-top: -35px;
height: 43px !important;
--mdc-icon-size: 15px;
}
content: >
<ha-icon icon="mdi:thermometer"> </ha-icon>{{
states('sensor.living_room_temperature') | int }}° <ha-icon
icon="mdi:water-percent"> </ha-icon>{{
states('sensor.living_room_humidity') | int }}% <ha-icon
icon="mdi:air-filter"> </ha-icon> {{
states('sensor.inside_air_quality_index')}} -
{{states('sensor.inside_air_quality_index_level')}}
1 Like
Any reason why the media info (use_media_info) shows as primary title instead of secondary when enabled in the mushroom media card?
I’m guessing it’s not possible, and the alternative is to use a template card?
Can someone help Here?
The Lines are to low and I want to have them higher.
Also the number I Like to have higher, Neer to the Icon…
Hope I am correct here😊
type: custom:mini-graph-card
entities:
- sensor.pool_ph_wert
icon: mdi:ph
height: 300
name: ' '
line_width: 8
font_size: 100
show:
labels: false
color_thresholds:
- value: 6,8
color: red
- value: 7,0
color: blue
- value: 7,2
style: |
ha-card {
{% set state = states('sensor.pool_ph_wert') | int %}
{% if state <= 7.2 %}
--text-color: green;
{% elif state <= 7.1 %}
--text-color: greenyellow;
{% elif state <= 7.4 %}
--text-color: yellow;
{% elif state <= 7.5 %}
--text-color: orange;
{% elif state <= 8.0 %}
--text-color: red;
{% endif %}
}
may i know how you get the feel like temperature?
[quote=“sid1907, post:603, topic:693055”]
3. Can I have the brightness percentage show only when we have the light on, else maybe “-” or disappear? Basically need to conditional format {{ state_attr(config.entity, 'brightness') | multiply(1/2.55) |round(0)}}% with the help of {{'ON' if states(config.entity, 'state') else 'OFF' }} - just don’t know how!
Lets start with 3. This is a simpler way to achieve what you are looking for.
content: |
{% if states (config.entity) == 'on' %}
Table {{ state_attr(config.entity, 'brightness') | multiply(1/2.55) |round(0)}}%
{% endif %}