Not to belittle your clues that you had lately but weāre doing this card-mod magic for individual cards for a couple of hundreds of posts in this thread.
Youāre late to the party but of course still welcome. 
Beerās in the fridge!
1 Like
Oh shit!
Why didnāt I find them when I was searching some weeks ago?
Thanks for the heads up and sorry for being boring. 
Weāll laughing about this when weāre old.
Now buckle up and killerspeed to the where-the-heck-should-insert-this-code-snippet-this-time-hell-of-a-ride!
2 Likes
What is the source for your background images?
Found matching pictures for all my rooms there.
Not fully ready but pretty satisfied with the overall look between comic, color and freshness.
7 Likes
The part where you put the icons into the template cards, like below:
Here you go!
type: custom:stack-in-card
mode: vertical
cards:
- type: custom:mushroom-template-card
primary: Foyer
secondary: Landing
icon: mdi:door
layout: horizontal
multiline_secondary: false
tap_action:
action: navigate
navigation_path: foyer
icon_color: deep-purple
hold_action:
action: none
double_tap_action:
action: none
style: |
:host([dark-mode]) {
background: rgba(var(--rgb-primary-background-color), 0.2);
}
:host {
background: rgba(var(--rgb-primary-text-color), 0.025);
}
- type: custom:mushroom-chips-card
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: 0;
}
alignment: end
chips:
- type: conditional
conditions:
- entity: light.foyer_lights
state: 'on'
chip:
type: entity
entity: light.foyer_lights
icon_color: amber
tap_action:
action: call-service
service: light.turn_off
service_data: {}
target:
entity_id: light.foyer_lights
content_info: none
icon: mdi:lightbulb
- type: template
entity: lock.door_lock_2
icon: |-
{% set state=states(entity) %}
{% if state=='locked' %}
mdi:lock
{% elif state=='unlocked' %}
mdi:lock-open-variant
{% else %}
grey
{% endif %}
tap_action:
action: more-info
icon_color: |-
{% set state=states(entity) %}
{% if state=='locked' %}
green
{% elif state=='unlocked' %}
red
{% else %}
grey
{% endif %}
- type: template
entity: sensor.front_door_open
icon: |-
{% set state=states(entity) %}
{% if state=='Open' %}
mdi:door-open
{% elif state=='Closed' %}
mdi:door-closed
{% else %}
mdi:door
{% endif %}
tap_action:
action: more-info
icon_color: |-
{% set state=states(entity) %}
{% if state=='Open' %}
red
{% elif state=='Closed' %}
green
{% else %}
grey
{% endif %}
style: |
ha-card {
height: 102px;
{% if is_state('light.foyer_lights', 'on') %}
background: rgba(255, 152, 0, 0.1);
{% endif %}
}
5 Likes
Thank you so muchā¦ I gonna try!
Iām getting this circle around the icons. Do u know how to remove it?
1 Like
it workedā¦
now Iām struggling to aling the boxesā¦ even I put fill container ātrueā they are not aligned.
My chips card has a bunch of (conditional) chips and itās just the icon for the 7th conditional chip that Iām trying to rotate. Any ideas how to do that? I tried using mushroom-conditional-chip:nth-child(7): syntax but I donāt think it likes the double colonsā¦
Add an empty placeholder ' ' for the secondary information line of the middle container.
2 Likes
Is there a way to make the background of the chips transparent and the icon always black when the switch/light is off, regardless of theme or mode? I am also attempting to get the background image to fade if no lights are on per this post.
type: custom:stack-in-card
mode: vertical
card_mod: null
style: |
ha-card {
background: var(--card-background-color) url('/local/rooms/3249.jpg' )
no-repeat center 0px;
background-size: cover;
background-blend-mode: overlay;
background-color: rgba(var(--rgb-card-background-color),
{% if is_state('light.living_room_lights', 'on') %}
0.2
{% elif is_state('light.living_room_lights', 'off') %}
0.7
{% endif %});
position: relative;
background-position: center;
background-repeat: no-repeat;
}
cards:
- type: custom:mushroom-chips-card
alignment: center
style: |
ha-card {
'--chip-box-shadow': none;
'--chip-background': none;
'--chip-spacing': 0; }
chips:
- type: light
entity: light.porch_light
content_info: none
icon: mdi:outdoor-lamp
tap_action:
action: toggle
hold_action:
action: more-info
double_tap_action:
action: none
use_light_color: false
- type: light
entity: light.entryway
content_info: none
icon: bha:dome-light
use_light_color: false
card_mod: null
style: |
ha-card {
box-shadow: 0px 0px;
}
tap_action:
action: toggle
hold_action:
action: more-info
double_tap_action:
action: none
- type: light
entity: light.livingroom_dimmer
content_info: none
icon: mdi:ceiling-fan-light
use_light_color: false
card_mod: null
style: |
ha-card {
box-shadow: 0px 0px;
}
tap_action:
action: toggle
hold_action:
action: more-info
double_tap_action:
action: none
- type: light
entity: light.hanging_lamp
content_info: none
icon: bha:ceiling-lamp
card_mod: null
style: |
ha-card {
box-shadow: 0px 0px;
}
tap_action:
action: toggle
hold_action:
action: more-info
double_tap_action:
action: none
use_light_color: false
- type: custom:mushroom-template-card
primary: Living Room
secondary: null
icon: null
layout: vertical
tap_action:
action: navigate
navigation_path: /phone-livingroom
hold_action:
action: fire-dom-event
browser_mod:
command: popup
deviceID: this
title: Lights
hide_header: true
card:
square: false
columns: 2
type: grid
cards:
- type: custom:mushroom-light-card
entity: light.porch_light
icon: mdi:outdoor-lamp
show_color_control: true
show_brightness_control: true
- type: custom:mushroom-light-card
entity: light.entryway
name: Entryway
icon: bha:dome-lamp
show_brightness_control: true
- type: custom:mushroom-light-card
entity: light.livingroom_dimmer
name: Fan Light
icon: mdi:ceiling-fan-light
show_brightness_control: true
- type: custom:mushroom-light-card
entity: light.hanging_lamp
icon: bha:ceiling-lamp
show_color_temp_control: true
show_brightness_control: true
double_tap_action:
action: none
card_mod: null
style: |
ha-card {
box-shadow: 0px 0px;
}
- type: custom:mushroom-chips-card
chips:
- type: template
entity: climate.thermostat
icon: mdi:thermometer
icon_color: >-
{% if is_state_attr('climate.thermostat', 'hvac_action', 'cooling') %}
blue
{% elif is_state_attr('climate.thermostat', 'hvac_action', 'heating')
%}
red
{% endif %}
content: |-
{{ state_attr('climate.thermostat', 'current_temperature') }} Ā°F
{% if is_state_attr('climate.thermostat', 'hvac_action', 'cooling') %}
| {{ state_attr('climate.thermostat', 'temperature') }} Ā°F
{% endif %}
| {{states.sensor.living_room_multi_sensor_humidity.state}} %
card_mod: null
style: |
ha-card {
box-shadow: 0px 0px;
}
alignment: center
1 Like
The work everyone doing here is amazing and, honestly, beyond my skills at the moment. That said, Iām trying to learn. Iāve read (browsed) through this thread and Iām missing something fundamental, I think.
Iām building a dashboard built off of āEverything Smart Homeā on YouTube. Iāve noticed many putting icons on their mushroom template cards and I canāt figure out how. (see red circle) In my case, Iām going to join āupstairsā and ādownstairsā hallway but I want to have both temperatures. I was thinking of using an up-arrow and down-arrow to differentiate the two temps.
Current code for my template card is below. Thanks for the patience! 
type: custom:mushroom-template-card
primary: Downstairs Hallway
secondary: '{{ states(''sensor.dwnstrs_hall_temp_280'')| round(1) }}Ā°F'
icon: mdi:light-recessed
entity: light.downstairs_hallway_296
icon_color: |-
{% if is_state('light.downstairs_hallway_296', 'on') %}
orange
{% endif %}
hold_action:
action: toggle
tap_action:
action: navigate
navigation_path: downstairshall
See 4 posts aboveā¦thatās what --chip-background: none; does. Set the icon color within each chip with icon_color: to force it if necessary.
Thatās what I thought and I tried that to no avail. Forced refresh of the page too.
Itās unclear to me what youāre trying to accomplish. What do you want in the red circle?
Sorry. An icon. e.g. an arrow.
Thanks Goody.
NP. I just want to be sure Iām answering the right question. I donāt think that area between the template icon and the secondary information field is configurable, but you may be able to insert an ASCII arrow in the template value itself that could be close enough. Otherwise, maybe youāre trying to use an icon that has an arrow modifier (i.e. tiny icon overlaid on a larger icon), but mdi:light-recessed does not have a variant like that. Here is the list of mdi icons I reference.
If Iām still missing what youāre trying to do, please post a screenshot of where you saw it.