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 %}
This is 100% true. The text and the state are all one line and using display:block which negates the use of justify-content:
The brightness value ranges from 0-255 so a conversion is necessary to represent the data as a percentage. Simply dividing by 2.55 scales it properly and round(), int() and float() control the decimals shown. They also ensure the number is represented as an integer.
Post your card code for the sensor chip and I’ll take a stab at.
1 Like
@sid1907 would this work for your purposes?
You need to break its current display property first.
type: custom:mushroom-chips-card
chips:
- type: template
icon: mdi:test-tube
icon_color: green
content: Test
card_mod:
style:
mushroom-template-chip:nth-child(1)$: |
span {
display: flex !important;
align-items: center;
flex-direction: column;
}
span:after {
content: 'Testing';
color: grey;
}
I have gained some experience since writing the guide so thought i would give it another go
5 Likes
Sweet…I can use this info for some of my applications. Really appreciate the update!
@sid1907 This is how you would us the IF statement with Dimitri’s method.
type: custom:mushroom-chips-card
chips:
- type: template
entity: light.pine
icon: |-
{{ 'mdi:lamp' if is_state(entity, 'on') else 'mdi:lamp-outline' }}
icon_color: |-
{{ '#FF9130' if is_state(entity, 'on') else '#B4B4B8' }}
content: >
Table
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: {{ 'Black' 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;
}
card_mod:
style:
mushroom-template-chip:nth-child(1)$: |
span {
display: flex !important;
align-items: center;
flex-direction: column;
}
span:after {
{% if states ('light.pine') == 'on' %}
content: '{{ state_attr('light.pine', 'brightness') | multiply(1/2.55) |round(0)}}%';
{% endif %}
}
EDIT… I simplified the icon and icon_color code.
3 Likes
The legend himself! Thank you @dimitri.landerloos - this absolutely works for my purpose. Appreciate all your time on the detailed guide as well.
Huge shout out to @LiQuid_cOOled for all the efforts in making my dashboard come to life!
Did a quick test of the new code and it works just as I wanted.
For the temp and sensor chips:
type: custom:mushroom-chips-card
chips:
- type: entity
entity: sensor.temperaturesensor_temperature
card_mod:
style: |
ha-card {
--chip-background: #E8EFCF;
justify-content: center;
--chip-height: 30px;
--chip-border-radius: 10px;
--chip-icon-size: 18px;
--chip-font-size: 10px;
font-style: bold;
font-variant: small-caps;
padding-right: 0px;
padding-left: 0px;
font-family: "Roboto";
font-weight: bolder;
min-width: 30px !important;
}
- type: entity
entity: binary_sensor.office_sensor_motion
content_info: last-changed
icon: mdi:bed-single-outline
card_mod:
style: |
ha-card {
--chip-background: #E8EFCF;
justify-content: center;
--chip-height: 30px;
--chip-border-radius: 10px;
--chip-icon-size: 18px;
--chip-font-size: 10px;
font-style: bold;
font-variant: small-caps;
padding-right: 0px;
padding-left: 0px;
font-family: "Roboto";
font-weight: bolder;
min-width: 110px !important;
}
alignment: center
I want to shorten in to squeeze more data in on row - so the ‘10 minutes ago’ to ‘10m’ and similarly 10s and 10h for seconds and minutes respectively.
The temp is showing up fine - but if I want to kill the °C or bring it down to 0 decimals?
Also, in case I want to restrict all my chips to one row and make it scrollable on smaller devices instead of wrapping to two rows, is this possible? I read the below code elsewhere for this purpose but don’t understand a word or how I would incorporate this.
card_mod:
style: |
ha-card > .chip-container {
flex-wrap: nowrap;
overflow-x: auto;
}
ha-card > .chip-container > * {
flex-shrink: 0;
}