Hi everyone,
I just start using the mushroom cards and i think its great, the only that borders me is the the GUI does not show as it should be (see pic) is there a way to fix this or do i miss something simple
thanks
I canāt see anything that stands out. Whatās bothering you?
Thatās because you chose a template card and there you can do what the title promises: template
To start you probably might choose the mushroom-entity-card or something to have the more visual editor :
Soooooooo apparently you canāt show an image with a mushroom chip card?
Thanks, I thought i saw some tutorials where they look different even when the information is the same.
You can with some simple CSS. This puts an image in the background of the template Chip. the image needs to be 36px square.
type: custom:mushroom-chips-card
chips:
- type: template
card_mod:
style: |
ha-card {
--chip-background: url( '/local/ls50.jpg' ) no-repeat center center;
}
- type: template
icon: mdi:speaker
5 Likes
My take on a simple Mushroom Climate card.
Collapsed:
Expanded:
type: custom:stack-in-card
cards:
- square: false
columns: 2
type: grid
cards:
- type: custom:mushroom-template-card
primary: Bedroom A/C
secondary: >-
{% if is_state(entity, 'heat_cool') %}
Heat/Cool
{% elif is_state(entity, 'heat') %}
Heat
{% elif is_state(entity, 'cool') %}
Cool
{% elif is_state(entity, 'dry') %}
Dry
{% elif is_state(entity, 'fan_only') %}
Fan
{% else %}
Off
{% endif %} / {{
states('sensor.bedroom_air_conditioner_measured_value_of_room_temperature')
| round(1) }} Ā°C
icon: |-
{% if is_state(entity, 'heat_cool') %}
mdi:autorenew
{% elif is_state(entity, 'heat') %}
mdi:fire
{% elif is_state(entity, 'cool') %}
mdi:snowflake
{% elif is_state(entity, 'dry') %}
mdi:water-percent
{% elif is_state(entity, 'fan_only') %}
mdi:fan
{% else %}
mdi:air-conditioner
{% endif %}
entity: climate.bedroom_air_conditioner
icon_color: |-
{% if is_state(entity, 'heat_cool') %}
green
{% elif is_state(entity, 'heat') %}
orange
{% elif is_state(entity, 'cool') %}
blue
{% elif is_state(entity, 'dry') %}
amber
{% elif is_state(entity, 'fan_only') %}
blue-grey
{% else %}
disabled
{% endif %}
multiline_secondary: false
layout: horizontal
fill_container: true
tap_action:
action: toggle
hold_action:
action: more-info
- type: custom:mushroom-chips-card
chips:
- type: template
icon: |-
{% if is_state(entity, 'off') %}
mdi:chevron-down
{% elif is_state(entity, 'on') %}
mdi:chevron-up
{% endif %}
tap_action:
action: toggle
entity: input_boolean.bedroom_ac_dropdown
icon_color: disabled
card_mod:
style: |
ha-card {
--chip-height: 45px;
}
alignment: end
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
padding: 10px 10px;
}
- type: conditional
conditions:
- entity: input_boolean.bedroom_ac_dropdown
state: 'on'
card:
type: thermostat
entity: climate.bedroom_air_conditioner
name: ' '
31 Likes
Thatās great!! But what I think Iām doing I cannot with a chips cardā¦hereās a screen shot of the image Iām trying to showā¦
Iāve tried this and so far I have the big black circle but not the actual phaseā¦
- type: custom:mushroom-chips-card
chips:
- type: template
style: |
ha-card {
--chip-background: url( {% set state = states('sensor.moon') %} /local/images/moonphases/{{state}}.png ) no-repeat center center;
}
1 Like
What dimensions are the .png files? They would need to be 36px square.
They are 36 x 36ā¦
This is what Iām getting backā¦ when you click on it, it says
No entity provided to toggle
This works for me.
type: custom:mushroom-chips-card
chips:
- type: template
card_mod:
style: |
ha-card {
{% set phase = states('sensor.moon') %}
--chip-background: url( '/local/moon_phases/{{ phase }}.png' ) no-repeat center center;
}
3 Likes
Yeah Iām confused honestlyā¦ I used the exact code youāre using and itās still not workingā¦just that black circle is all.
- type: template
style: |
ha-card {
{% set phase = states('sensor.moon') %}
--chip-background: url( '/local/images/moonphases/{{ phase }}.png' ) no-repeat center center;
}
Thatās NOT working but your code is ā¦ I moved the images from
local/images/moonphases/
to
loca/moon_phases
and now it works great!!
Thank you!
1 Like
It sounds like lovelace was caching your images. You can add a ā?v=1ā to the image URL to get it to reload the images.
1 Like
Thank you againā¦ that fixed the original url I was usingā¦
My pleasure 
1 Like
Just started playing with Mushroom cards yesterday LOL I must admit they are fun and interesting!! PLUS I can use templates directly in them and it makes sense to me!!!
Whereād you get the pics? Those look good.
While you wait for the new feature, you can achieve what you want with a little CSS.
Vertical:
type: custom:mushroom-template-card
icon: mdi
primary: LS50
secondary: '{{ ''On'' if is_state(entity, ''on'') else ''Off'' }} '
entity: switch.ls50-1
fill_container: false
multiline_secondary: false
layout: vertical
card_mod:
style: |
mushroom-card {
background: var(--card-background-color) url( '/local/LS50.png' ) no-repeat center 0px;
background-size: 42px 42px;
{% if is_state(config.entity, 'on') %}
{% else %}
filter: grayscale(100%);
{% endif %}
}
Horizontal:
type: custom:mushroom-template-card
icon: mdi
primary: LS50
secondary: '{{ ''On'' if is_state(entity, ''on'') else ''Off'' }} '
entity: switch.ls50-2
fill_container: false
multiline_secondary: false
card_mod:
style: |
mushroom-card {
background: var(--card-background-color) url( '/local/LS50.png' ) no-repeat 0px center;
background-size: 42px 42px;
{% if is_state(config.entity, 'on') %}
{% else %}
filter: grayscale(100%);
{% endif %}
}
Rounded:
type: custom:mushroom-template-card
icon: mdi
primary: LS50
secondary: '{{ ''On'' if is_state(entity, ''on'') else ''Off'' }} '
entity: switch.ls50-3
fill_container: false
multiline_secondary: false
layout: vertical
card_mod:
style: |
mushroom-card {
background: var(--card-background-color) url( '/local/LS50.png' ) no-repeat center 0px;
background-size: 42px 42px;
{% if is_state(config.entity, 'on') %}
{% else %}
filter: grayscale(100%);
{% endif %}
}
ha-card {
width: 66px;
border-radius: 30px;
margin-left: auto;
margin-right: auto;
}
Edit: Update to stop icon floating in
13 Likes
Yes those are the ones I have 