Thanks for sharing. I think it’s would be better to just stick with template card at this point (less hacky).
Would you know how I can align the Template card so the icon is at the top and the primary and secondary text is just below it? Thanks
Well you can always just use the built in vertical layout.
type: custom:mushroom-template-card
primary: Hello, {{user}}
secondary: How are you?
icon: mdi:home
layout: vertical
but if you specifically still want the text to be left alligned it could be done like this:
card_mod:
style:
mushroom-state-item$: |
.container {
flex-direction: column !important;
align-items: start !important;
}
1 Like
Left align was exactly what I was looking for, thank you!
What would be the best way to show the icon on the right side for the Person card?
I’m trying to create a profile icon that shows at the far right of the card, but with my code it shows different for each device. Would it be better to use a Template card in this scenario?
card:
type: custom:stack-in-card
cards:
- type: custom:mushroom-person-card
entity: person.hazio
icon_type: entity-picture
primary_info: none
secondary_info: none
layout: vertical
card_mod:
style: |
mushroom-badge-icon {
--badge-icon-size: 0px;
--badge-size: 10px;
outline: 3px #171717;
border-radius:50%;
top: 30px;
}
card_mod:
style:
mushroom-state-item$: |
.container {
display: flex;
flex-direction: column !important;
}
mushroom-state-info$: |
.container {
width: 83%;
align-items: center;
}
mushroom-shape-avatar$: ''
.: |
ha-card {
-icon-size: 20px;
width: fit-content;
margin: 5px 0px 0px 100px;
padding-left: 20px;
background: transparent !important;
border: 0px !important;
}
Thanks
You mean like this?
This code works for any mushroom card:
Code
type: custom:mushroom-person-card
entity: person.dimitri_landerloos
card_mod:
style:
mushroom-state-info$: |
.container {
transform: scalex(-1);
align-items: end;
}
.: |
ha-card {
transform: scalex(-1);
}
or just like this:
again code works for any mushroom card:
Code
card_mod:
style: |
ha-card {
transform: scalex(-1);
}
mushroom-state-info {
transform: scalex(-1);
}
1 Like
Oh wow, thanks! Can’t believe I over complicated it, when it’s just a single line of code. 
Edit: @dimitri.landerloos I’ve noticed this flips the avatar as well. Would it be possible to flip it back to the right way? As I’m using a entity picture, it’s quite noticeable.
card_mod:
style:
mushroom-state-info$: |
.container {
transform: scalex(-1);
align-items: end;
}
mushroom-shape-avatar$: |
.container {
transform: scalex(-1);
}
.: |
ha-card {
transform: scalex(-1);
}
if using an avatar.
card_mod:
style:
mushroom-state-info$: |
.container {
transform: scalex(-1);
align-items: end;
}
.: |
ha-card {
transform: scalex(-1);
}
ha-state-icon {
transform: scalex(-1);
}
if just using the icon still.
1 Like
Hey there, I’ve been really struggling with getting animated state icons working with this chips card and was hoping to get some help. I’d like to make it so the chip for the fan will have a spinning icon only when the fan is on. I was able to get this working with a mushroom template card, but trying to transition to a chips card instead has been difficult.
Here’s the yaml:
type: custom:mushroom-chips-card
chips:
- type: light
entity: light.bedroom
content_info: none
hold_action:
action: none
double_tap_action:
action: none
use_light_color: true
icon: mdi:lightbulb
card_mod:
style: |
ha-card {
box-shadow: none !important;
border: none !important;
min-width: 0px !important;
width: 32px !important;
height: 32px !important;
justify-content: center;
}
- type: template
tap_action:
action: toggle
icon: mdi:fan
icon_color: '{{ ''amber'' if states(entity) == ''on'' else '''' }}'
card_mod:
style: |-
{% if is_state('light.bedroom_hue_plug', 'on') %}
ha-state-icon {
animation: spin 1.5s linear infinite;
}
{% elif is_state('light.bedroom_hue_plug', 'off') %}
{% endif %}
ha-card {
box-shadow: none !important;
border: none !important;
min-width: 0px !important;
width: 32px !important;
height: 32px !important;
justify-content: center;
}
entity: light.bedroom_hue_plug
- type: action
tap_action:
action: navigate
navigation_path: /dashboard-test/bedroom-lights
hold_action:
action: none
double_tap_action:
action: none
icon: mdi:cog
card_mod:
style: |
ha-card {
box-shadow: none !important;
border: none !important;
min-width: 0px !important;
width: 32px !important;
height: 32px !important;
justify-content: center;
}
card_mod:
style:
mushroom-light-chip:nth-child(1)$: |
ha-state-icon {
--chip-icon-size: 30px;
}
ha-card {
--chip-spacing: 13px;
padding-right: 5px;
padding-bottom: 2px;
height: 35px;
}
mushroom-template-chip:nth-child(2)$: |
ha-state-icon {
animation: spin 1.5s linear infinite;
--chip-icon-size: 30px;
}
@keyframes spin {
100% {transform: rotate(360deg);}
}
}
ha-card {
--chip-spacing: 13px;
padding-right: 5px;
padding-bottom: 2px;
height: 35px;
}
mushroom-action-chip:nth-child(3)$: |
ha-state-icon {
--chip-icon-size: 30px;
}
ha-card {
--chip-spacing: 13px;
padding-right: 5px;
padding-bottom: 2px;
height: 35px;
}
type: custom:mushroom-chips-card
chips:
- type: template
icon: mdi:fan
icon_color: red
entity: switch.4ch_relay_relay1
card_mod:
style:
mushroom-template-chip:nth-child(1)$: |
ha-state-icon {
{% if 'on' in states('switch.4ch_relay_relay1') %}
animation: spin 1s linear infinite;
{% endif %}
}
@keyframes spin {
100% {transform: rotate(360deg);}
}
you have to do everything in the one place
Thanks! Below code works:
type: custom:mushroom-chips-card
chips:
- type: light
entity: light.bedroom
content_info: none
hold_action:
action: none
double_tap_action:
action: none
use_light_color: true
icon: mdi:lightbulb
card_mod:
style: |
ha-card {
box-shadow: none !important;
border: none !important;
min-width: 0px !important;
width: 32px !important;
height: 32px !important;
justify-content: center;
}
- type: template
tap_action:
action: toggle
icon: mdi:fan
icon_color: '{{ ''amber'' if states(entity) == ''on'' else '''' }}'
card_mod:
style: |-
{% if is_state('light.bedroom_hue_plug', 'on') %}
ha-state-icon {
animation: spin 1.5s linear infinite;
}
{% elif is_state('light.bedroom_hue_plug', 'off') %}
{% endif %}
ha-card {
box-shadow: none !important;
border: none !important;
min-width: 0px !important;
width: 32px !important;
height: 32px !important;
justify-content: center;
}
entity: light.bedroom_hue_plug
- type: action
tap_action:
action: navigate
navigation_path: /dashboard-test/bedroom-lights
hold_action:
action: none
double_tap_action:
action: none
icon: mdi:cog
card_mod:
style: |
ha-card {
box-shadow: none !important;
border: none !important;
min-width: 0px !important;
width: 32px !important;
height: 32px !important;
justify-content: center;
}
card_mod:
style:
mushroom-light-chip:nth-child(1)$: |
ha-state-icon {
--chip-icon-size: 30px;
}
mushroom-template-chip:nth-child(2)$: |
{% if is_state('light.bedroom_hue_plug', 'on') %}
ha-state-icon {
animation: spin 1.5s linear infinite;
--chip-icon-size: 30px;
}
@keyframes spin {
100% {transform: rotate(360deg);}
}
{% elif is_state('light.bedroom_hue_plug', 'off') %}
ha-state-icon {
--chip-icon-size: 30px;
}
{% endif %}
}
mushroom-action-chip:nth-child(3)$: |
ha-state-icon {
--chip-icon-size: 30px;
}
.: |
ha-card {
--chip-spacing: 25px;
padding-right: 5px;
padding-bottom: 2px;
height: 35px;
}
I have removed the background from the chips card according to your guide, also tried removing box shadow.
I still get a small border showing on the gradient part of my background. Very obvious on my phone, not on my computer:
How do I remove this, around the right icon?
Hey everyone. Looking to get some help on a the last few items for my setup. I’ve typically been able to get things working through trial and error, but I can’t seem to figure these out. Any help would be appreciated.
The first are these circular buttons in the Frigate card. I’m trying to change the background circle color, as well as the icon color:
For the background circle color, the card-mod helper output is
"body>home-assistant$home-assistant-main$ha-drawer>partial-panel-resolver>ha-panel-lovelace$hui-root$#view>hui-view>hui-masonry-view$#columns>div>hui-vertical-stack-card$#root>frigate-card$#ha-card>frigate-card-menu$div.matching>ha-icon-button:nth-child(1)"
with the property to change being background-color within ha-icon-button.button.
The icon color for it is within the same card-mod helper output, and the property is color, but this is not within ha-icon-button.button.
The last thing is the selected icon color within the controls in a tile card:
The card-mod helper output is:
"body>home-assistant$home-assistant-main$ha-drawer>partial-panel-resolver>ha-panel-lovelace$hui-root$#view>hui-view>hui-masonry-view$#columns>div>hui-vertical-stack-card$#root>hui-tile-card$ha-card>hui-card-features$hui-fan-speed-card-feature$div>ha-control-select$#option-off"
with the property being color within .option.selected
For all of these, I’m able to get the property I want changed when inspecting, but can’t figure out how to format it properly for card-mod.
Neither of these questions relate to mushroom and card mod. Please create a new post or post these questions in the card mod thread.
- Post your code.
- Have you tried to remove any border as well?
Had both open in tabs and posted here by accident, sorry about that!
I’m struggling to do what feels like it should be a fairly simple task: I want my door contact sensors to be green when closed (‘safe/all good’ color) and red when they are open. I have this working in Mushroom as long as I use a template card. I have been advised that I should be instead using a Theme and globally modifying the behavior that way. However, I have not been able to successfully get the icon color right even with non-theme attempts when using CardMod. The biggest issue has been getting the icon background to be light/partly translucent. When I specify a color in a template this seems to be done automatically. Examples I’ve seen online all seem to also show that this is not something that is handled manually. I’m aiming for the look of the bottom right card.
First Method: sets icon and background independently, but does not make background translucent.
- type: custom:mushroom-entity-card
entity: binary_sensor.basement_door_contact_sensor
card_mod:
style:
mushroom-shape-icon$: |
.shape {
background-color: {{ 'green' if is_state('binary_sensor.main_door', 'off') else 'var(--green-color)' }} !important;
}
.: |
ha-state-icon {
color: var(--black-color);
}
Second Method: Sets the icon, but not the background
- type: custom:mushroom-entity-card
entity: binary_sensor.basement_door_contact_sensor
card_mod:
style: |
ha-state-icon {
color: var(--orange-color);
}
Third Method: Sets the background, ignores code that works in method 2 for the icon
- type: custom:mushroom-entity-card
entity: binary_sensor.basement_door_contact_sensor
card_mod:
style: |
mushroom-shape-icon {
--shape-color: var(--pink-color);
--shape-color-disabled: var(--blue-color);
}
.: |
ha-state-icon {
color: var(--orange-color);
}
Fourth Method: Does everything I want, but is a hassle to copy/paste and difficult to apply globally:
- type: custom:mushroom-template-card
primary: Basement Door
secondary: |-
{% if is_state('binary_sensor.basement_door_contact_sensor', 'off') %}
Closed
{% else %}
Open
{% endif %}
icon: |-
{% if is_state('binary_sensor.basement_door_contact_sensor', 'off') %}
mdi:door-closed
{% else %}
mdi:door-open
{% endif %}
icon_color: |-
{% if is_state('binary_sensor.basement_door_contact_sensor', 'off') %}
green
{% else %}
red
{% endif %}
1 Like
Hey, you could Set your binari.sensor as door.
Then the state und Icon got Set automaticly
1st method:
type: custom:mushroom-entity-card
entity: binary_sensor.hallway_front_door_contact
card_mod:
style:
mushroom-shape-icon$: |
.shape {
background-color: {{ 'rgba(var(--rgb-green),0.2)' if is_state('binary_sensor.main_door', 'off') else 'rgba(var(--rgb-green),0.2)' }} !important;
}
.: |
ha-state-icon {
color: var(--black-color);
}
2nd method you already had working, but nothing other than icon was being changed.
3rd method:
card_mod:
style: |
mushroom-shape-icon {
--shape-color: rgba(var(--rgb-pink), 0.2);
--shape-color-disabled: rgba(var(--rgb-blue), 0.2);
}
ha-state-icon {
color: var(--orange-color);
}
4th method you dont really need my input, but you can make it a tiny bit easier:
type: custom:mushroom-template-card
entity: binary_sensor.hallway_front_door_contact
primary: Basement Door
secondary: |-
{% if is_state(entity, 'off') %}
Closed
{% else %}
Open
{% endif %}
icon: |-
{% if is_state(entity, 'off') %}
mdi:door-closed
{% else %}
mdi:door-open
{% endif %}
icon_color: |-
{% if is_state(entity, 'off') %}
green
{% else %}
red
{% endif %}
FYI if you want to use this simplified if statement in the card mod section as well you have to use config.entity instead of just entity like i have above.
1 Like
Thanks! This confirms that it isn’t done automatically for me, and that I have to add the transparency myself. How come we don’t need a .: - between mushroom-shape-icon and ha-state-icon?
Is there a good way to add this to a theme for all door types? I could figure out how to do it for more global things, but not how to narrow it down further. state-binary_sensor-door-off-color: var(--green-color) and state-binary_sensor-door-on-color: var(--red-color) seems to only apply to non-custom entities.
I already have the simplified template as:
- type: custom:mushroom-template-card
primary: Front Door
secondary: |-
{% if is_state(config.entity, 'off') %}
Closed
{% else %}
Open
{% endif %}
icon: |-
{% if is_state(config.entity, 'off') %}
mdi:door-closed
{% else %}
mdi:door-open
{% endif %}
icon_color: |-
{% if is_state(config.entity, 'off') %}
green
{% else %}
red
{% endif %}
Do you have a suggested method between the options? Theme it globally? Or just use the template?