Probably… but I don’t have the choice to use interface
And in my code I have wrote the icon… I don’t understand icon not diefined
EDIT: SOLVED thanks for your advice
You do have a choice.
Move code that you are applying to all chips to the main chip card instead like this:
type: custom:mushroom-chips-card
chips:
- type: template
entity: binary_sensor.portiere_t_crock
icon: mdi:car-door
icon_color: |-
{% if is_state('binary_sensor.portiere_t_crock', 'on') %}
green
{% else %}
red
{% endif %}
tap_action:
action: toggle
- type: template
entity: binary_sensor.t_crock_windows_closed
icon_color: |-
{% if is_state('binary_sensor.t_crock_windows_closed', 'on') %}
green
{% else %}
red
{% endif %}
alignment: end
card_mod:
style: |
ha-card {
--chip-background: rgba(var(--rgb-card-background-color),0.);
background: rgba(var(--rgb-card-background-color), 0.);
}
You can now use the visual editor.
Sure. 
type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
primary: Stua
secondary: |-
{{ states('sensor.verisure_rv_stua_temp') }}°C |
{{ states('sensor.verisure_rv_stua_fukt') }} %
icon: mdi:television
entity: light.stua_uten_stuebordlys_dz
icon_color: |-
{% if is_state('light.under_trappa', 'on') %}
orange
{% elif is_state('light.ved_vitrineskapet', 'on') %}
orange
{% elif is_state('light.taklyset_i_spisestua', 'on') %}
orange
{% endif %}
tap_action:
action: toggle
hold_action:
action: navigate
navigation_path: /lovelace-panel/stua
multiline_secondary: false
layout: horizontal
fill_container: false
card_mod:
style: |
ha-state-icon::after {
content: '{{ expand(states.light) |selectattr('state', 'eq', 'on') |selectattr('entity_id', 'in', area_entities('Stua')) |rejectattr('entity_id', 'search', 'dz') |map(attribute='entity_id') |list | count }}';
position: absolute;
top: -11%;
right: -11%;
display: flex;
justify-content: center;
align-items: center;
width: 15px;
height: 15px;
font-size: 9px;
font-weight: 700;
{% if expand(states.light)
|selectattr('state', 'eq', 'on')
|selectattr('entity_id', 'in', area_entities('Stua'))
|rejectattr('entity_id', 'search', 'dz')
|map(attribute='entity_id')
|list | count > 0
%}
background-color: rgba(var(--rgb-disabled), 0.5);
{% else %}
background-color: rgba(var(--rgb-disabled), 0.5);
{% endif %}
border-radius: 50%;
}
{% if states('binary_sensor.aqara_motion_stua_motion_1') == 'on' %}
ha-state-icon::before {
content: 'directions_walk';
position: absolute;
font-family: 'Material Icons';
top: -11%;
left: -11%;
display: flex;
justify-content: center;
align-items: center;
width: 15px;
height: 15px;
font-size: 11px;
background: rgba(var(--rgb-disabled), 0.5);
color: rgba(var(--rgb-red), 1);
border-radius: 50%;
animation: blink 1s linear infinite;
}
{% endif %}
@keyframes blink {
50% {opacity: 0;}
}
- type: custom:mushroom-chips-card
chips:
- type: template
icon: |-
{% if is_state(config.entity, 'on') %}
mdi:radiator
{% else %}
mdi:radiator-off
{% endif %}
entity: switch.hue_kontakt_stua_1
icon_color: |-
{% if is_state(config.entity, 'on') %}
red
{% else %}
blue
{% endif %}
tap_action:
action: toggle
hold_action:
action: more-info
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-icon-size: 0.8em
- type: template
entity: light.over_stuebordet
icon: |-
{% if is_state(config.entity, 'on') %}
mdi:ceiling-light
{% else %}
mdi:ceiling-light-outline
{% endif %}
icon_color: |-
{% if is_state(config.entity, 'on') %}
orange
{% else %}
grey
{% endif %}
content_info: none
tap_action:
action: toggle
hold_action:
action: more-info
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-icon-size: 0.8em
- type: template
entity: light.stua_uten_stuebordlys_dz
content_info: none
icon: |-
{% if is_state(config.entity, 'on') %}
mdi:lamp
{% else %}
mdi:lamp-outline
{% endif %}
icon_color: |-
{% if is_state(config.entity, 'on') %}
orange
{% else %}
grey
{% endif %}
tap_action:
action: toggle
hold_action:
action: more-info
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-icon-size: 0.8em
- type: template
entity: remote.philips_tv_stue_tv_remote
icon_color: green
icon: mdi:remote
hold_action:
action: false
tap_action:
action: call-service
service: script.popup_fjernkontroll_philips
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-icon-size: 0.8em
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: 0;
margin-top: 10px;
alignment: end
And here is one with a slider, because when on mobile you can only see 4 chips, but with the slider you can have more alligned next to eachother.
type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
primary: Benjamin
secondary: |-
{{ states('sensor.verisure_rv_benjamin_temp') }}°C |
{{ states('sensor.verisure_rv_benjamin_fukt') }} %
icon: mdi:face-man
entity: light.rommet_til_benjamin_dz
icon_color: |-
{% if is_state('light.benjamin_lampe', 'on') %}
blue
{% elif is_state('light.taklyset_til_benjamin_1', 'on') %}
blue
{% endif %}
tap_action:
action: toggle
hold_action:
action: navigate
navigation_path: /lovelace-panel/ungene
multiline_secondary: false
card_mod:
style: |
ha-state-icon::after {
content: '{{ expand(states.light) |selectattr('state', 'eq', 'on') |selectattr('entity_id', 'in', area_entities('Benjamin')) |rejectattr('entity_id', 'search', 'dz') |map(attribute='entity_id') |list | count }}';
position: absolute;
top: -11%;
right: -11%;
display: flex;
justify-content: center;
align-items: center;
width: 15px;
height: 15px;
font-size: 9px;
font-weight: 700;
{% if expand(states.light)
|selectattr('state', 'eq', 'on')
|selectattr('entity_id', 'in', area_entities('Benjamin'))
|rejectattr('entity_id', 'search', 'dz')
|map(attribute='entity_id')
|list | count > 0
%}
background-color: rgba(var(--rgb-disabled), 0.5);
{% else %}
background-color: rgba(var(--rgb-disabled), 0.5);
{% endif %}
border-radius: 50%;
}
{% if states('input_boolean.benjamin_motion') == 'on' %}
ha-state-icon::before {
content: 'directions_walk';
position: absolute;
font-family: 'Material Icons';
top: -11%;
left: -11%;
display: flex;
justify-content: center;
align-items: center;
width: 15px;
height: 15px;
font-size: 11px;
background: rgba(var(--rgb-disabled), 0.5);
color: rgba(var(--rgb-red), 1);
border-radius: 50%;
animation: blink 1s linear infinite;
}
{% endif %}
@keyframes blink {
50% {opacity: 0;}
}
layout: horizontal
fill_container: false
- type: custom:mushroom-chips-card
chips:
- type: template
icon: |-
{% if is_state(config.entity, 'heat') %}
mdi:radiator
{% else %}
mdi:radiator-off
{% endif %}
entity: climate.benjamin
icon_color: |-
{% if is_state(config.entity, 'heat') %}
red
{% else %}
blue
{% endif %}
tap_action:
action: toggle
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-icon-size: 0.8em
- type: template
entity: light.taklyset_til_benjamin_dz
icon: |-
{% if is_state(config.entity, 'on') %}
mdi:ceiling-light
{% else %}
mdi:ceiling-light-outline
{% endif %}
icon_color: |-
{% if is_state(config.entity, 'on') %}
orange
{% else %}
grey
{% endif %}
content_info: none
tap_action:
action: toggle
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-icon-size: 0.8em
- type: template
entity: input_boolean.benjamin_nattlys_10
icon: |-
{% if is_state(config.entity, 'on') %}
mdi:weather-night
{% else %}
mdi:weather-night
{% endif %}
icon_color: |-
{% if is_state(config.entity, 'on') %}
purple
{% else %}
grey
{% endif %}
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: 0;
--chip-icon-size: 0.8em
- type: template
entity: input_boolean.benjamin_auto
icon: |-
{% if is_state(config.entity, 'on') %}
mdi:lightbulb-auto
{% else %}
mdi:lightbulb-auto-outline
{% endif %}
icon_color: |-
{% if is_state(config.entity, 'on') %}
green
{% else %}
grey
{% endif %}
hold_action:
action: false
tap_action:
action: toggle
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-icon-size: 0.8em
- type: template
entity: input_boolean.boolean_benjamin_tv_auto
icon: |-
{% if is_state(config.entity, 'on') %}
mdi:television
{% else %}
mdi:television-off
{% endif %}
icon_color: |-
{% if is_state(config.entity, 'on') %}
green
{% else %}
grey
{% endif %}
hold_action:
action: false
tap_action:
action: toggle
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-icon-size: 0.8em
- type: template
entity: media_player.lg_tv_benjamin_tv
icon_color: blue
icon: mdi:remote-tv
hold_action:
action: false
tap_action:
action: call-service
service: script.popup_fjernkontroll_lg_benjamin
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-icon-size: 0.8em
card_mod:
style: |
ha-card {
background: none !important;
height: 40px;
flex-wrap: nowrap;
width: max-content;
align-items: center;
display: flex;
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: 0;
margin-top: 10px;
padding-bottom: 0px;
}
:host {
overflow-x: scroll;
overflow-y: hidden;
direction: ltr;
margin: 0px !important;
padding-left: 12px;
padding-bottom: 0px;
margin-top: 10px;
}
alignment: end
3 Likes
can you share the complete code of the card pleas ?
I’m sure this is probably basic and answered somewhere, but with popular add-ons like Mushroom cards, it’s difficult to wade through thousands of posts to find anything…
I have a Tuya-controlled LED bulb, the color temps of which are only warm-to-bright white. The HA Tuya add-on works fine and displays controls properly in the stock Mushroom light card. But I wanted to dispense with the cloud, and installed TuyaLocal, as well. After a bit, I got those controls working, too. But I now have a couple of questions regarding the styling of the Mushroom card itself:
Using Card-mod (is this even needed for this?) the following work great individually, but I’m having a terrible time figuring out the syntax to use them all together:
#change size of temp/brightness button
card_mod:
style:
mushroom-button:nth-child(2):
$: |
ha-icon {
--control-icon-size: 50px;
}
#change icon
card_mod:
style: |
ha-state-icon {
--card-mod-icon: mdi:mushroom;
--icon-symbol-size: 40px;
}
#change card size
card_mod:
style: |
ha-card {
height: 200px !important;
width: 200px;
}
#change font sizes and color
card_mod:
style:
mushroom-state-info$: |
.container {
--card-secondary-font-size: 20px;
--card-primary-font-size: 20px;
--primary-text-color: blue;
--secondary-text-color: orange;
}
The last thing I’m trying to do is to customize the color temp selections for the ‘more info’ section. The default Tuya integration shows up fine, but the card for the Tuyalocal integration adds additional colors (which the bulb cannot display), scenes, and attributes:
I’d like to remove scenes and attributes, and the second row of invalid colors.
Sorry for something so basic, but I’ve tried all kinds of things based on what I’ve found elsewhere, with no luck.
In the battery section I have only 3 items. So i want to remove right one on the bottom. But I want it aligned left and just the same size as the others. How do I do that ?
I have it now in a horizontal stack with 2 custom mushroom template cards…
Show your code, but you can probably just put all 3 in a grid with 2 columns instead. You will then just end up with and empty space on the bottom right. Like this:
type: grid
square: false
columns: 2
cards:
- type: custom:mushroom-template-card
primary: Hello, {{user}}
secondary: How are you?
icon: mdi:home
- type: custom:mushroom-template-card
primary: Hello, {{user}}
secondary: How are you?
icon: mdi:home
- type: custom:mushroom-template-card
primary: Hello, {{user}}
secondary: How are you?
icon: mdi:home
1 Like
For styling the more info screen try posting in the card mod thread instead.
Is the card meant to look something like this when combined?
If so this should do it:
type: custom:mushroom-light-card
entity: light.bedroom_chest_lamp
show_color_temp_control: true
show_brightness_control: true
card_mod:
style:
mushroom-button:nth-child(2):
$: |
ha-icon {
--control-icon-size: 50px;
}
mushroom-state-info$: |
.container {
--card-secondary-font-size: 20px;
--card-primary-font-size: 20px;
--primary-text-color: blue;
--secondary-text-color: orange;
}
.: |
ha-state-icon {
--card-mod-icon: mdi:mushroom;
--icon-symbol-size: 40px;
}
ha-card {
height: 200px !important;
width: 200px;
}
I am thrilled to present my customised rendition of Mushroom Cards, ingeniously adapted to the Tile card format. A heartfelt thank you 
is owed to the talented individuals who contributed to this project, namely @piitaya, @rhysb, @dimitri.landerloos, and the entire supportive community that has been instrumental in guiding me throughout this creative journey. Your collaboration and assistance have truly elevated this endeavor, and I am grateful for the collective effort that has brought this vision to life.
Note: To view images in their full size, kindly right-click on the image and choose ‘Open link in new tab.’
Home
Switches
Sensors
Devices
Media
Computers
Cameras
11 Likes
Wow, this looks great! 
Is the customisation on a theme/backend level, or on a card per card bassis?
I’ve tried this, but the rest of the background is completely white making everything less visible. Any ideas? thanks
Поделитесь кодом? выглядит потрясающе
Trying to get this to switch images based on state of my helper. I have it working when its on, but not in the off state.
type: custom:mushroom-template-card
primary: null
entity: input_boolean.crucial_velocity_helper
icon: null
icon_color: grey
layout: vertical
picture: null
fill_container: false
multiline_secondary: false
tap_action:
action: call-service
service: input_boolean.toggle
target:
entity_id: input_boolean.crucial_velocity_helper
double_tap_action:
action: call-service
service: input_boolean.toggle
target:
entity_id: input_boolean.crucial_velocity_helper
card_mod:
style:
.: |
mushroom-state-info {
text-align:;
}
ha-card {
{{ ‘background: center / cover no-repeat url(“/local/images/Christmas5.gif”);’ if is_state(config.entity, ‘on’) }}
width: 100px;
height: 100px;
margin: auto;
}
mushroom-state-item {
height: 96px;
}
mushroom-state-info$: |
.primary {
white-space: normal !important;
overflow: hidden;
}
Srry forgot how to put this seperate.
nice card & can you share this code or this card
type: custom:stack-in-card
cards:
- type: tile
entity: media_player.plex_plex_for_android_tv_chromecast_google_tv
name: Plex
icon: mdi:plex
color: indigo
card_mod:
style:
ha-tile-info$: >
{% set content_type = state_attr(config.entity,
'media_content_type') %}
{% if content_type in ['tvshow', 'movie'] %}
.primary {
visibility: hidden;
}
.secondary {
visibility: hidden;
}
{% if content_type == 'tvshow' %}
.primary:before {
visibility: visible;
content: "{{ state_attr(config.entity, 'media_series_title') }} S{{ state_attr(config.entity, 'media_season') }} ⸱ E{{ state_attr(config.entity, 'media_episode') }}";
}
.secondary:before {
visibility: visible;
content: "{{ state_attr(config.entity, 'media_title') }}";
}
{% elif content_type == 'movie' %}
.primary:before {
visibility: visible;
content: "{{ state_attr(config.entity, 'media_title') }}";
}
.secondary:before {
visibility: visible;
content: "{{ states(config.entity) | title }}";
}
{% endif %}
{% endif %}
- type: custom:mushroom-media-player-card
entity: media_player.living_universal_remote
primary_info: none
secondary_info: none
icon_type: none
media_controls:
- on_off
- play_pause_stop
- previous
- next
volume_controls:
- volume_buttons
- volume_set
card_mod:
style:
mushroom-media-player-media-control$: |
mushroom-button {
--bg-color: rgba(var(--rgb-indigo),0.1) !important;
}
mushroom-media-player-volume-control$: |
mushroom-button {
--bg-color: rgba(var(--rgb-indigo),0.1) !important;
}
.: |
mushroom-button {
--bg-color: rgba(var(--rgb-indigo),0.1) !important;
}
card_mod:
style: |
ha-card::before {
transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);
{% if not is_state('media_player.plex_plex_for_android_tv_chromecast_google_tv', 'idle') %}
content: "";
position: absolute;
height: 100%;
width: 100%;
background: url( '{{ state_attr('media_player.plex_plex_for_android_tv_chromecast_google_tv', "entity_picture") }}' ) center no-repeat;
filter: blur(150px) saturate(400%);
background-size: 100% 100%;
{% endif %}
}
ha-card {
transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);
--ha-card-border-width: 0;
{% if not is_state('media_player.plex_plex_for_android_tv_chromecast_google_tv', 'idle') %}
background: url( '{{ state_attr('media_player.plex_plex_for_android_tv_chromecast_google_tv', 'entity_picture') }}' ), linear-gradient(to left, transparent, rgb(0, 0, 0) 50%);
{% if state_attr('media_player.plex_plex_for_android_tv_chromecast_google_tv', 'media_content_type') == 'tvshow' %}
background-size: 50% auto, cover;
{% else %}
background-size: 50% auto, cover;
{% endif %}
background-position: right;
background-repeat: no-repeat;
background-blend-mode: saturation;
{% endif %}
}
1 Like
Nice this card’s & can you share code pleas ?
When using the brightness slider on the mushroom lights card, is there a way to change the minimum selectable to 1% instead of 0%?
Sliding to minimum brightness without turning the light off is kind of fiddly.
Then I want to ask, you have a lot of cards that shows an entity with two statuses.
Example: Front Door - Shows “locked” and battery percentage “36”.
Could you share the code? I was not able to figure out myself 
Let me know which in particular you want as my master yaml is a bit of a mess.