exactly! Manny manny thanks for this
Awesome, thank you so much!
One last question. I am struggling to combine your code with mine.
card_mod:
style: |
bt-ha-control-circular-slider {
--clear-background-color: #e3ac55;
--control-circular-slider-color: #e3ac55;
--control-circular-slider-background: #f3f5fa;
--control-circular-slider-background-opacity: 1.0;
}
bt-ha-control-circular-slider$:
.arc {
stroke-width: 10px !important;
}
.background {
stroke-width: 10px !important;
}
If I put in only your code it works. If I put in only my code it works. But both together wont work. Do you have an idea?
HI, and thank you so much for trying!
I was thinking last night that maybe stacking 2 different template cards with single secondary one with everything but the second line and the other just with that second line and card mod them to align it may work…
I’ll try and post the code if I manage to achive it!
Meanwhile, if someone figures out an easier or different approach, here is the code for the full washing machine template card if it helps:
type: custom:mushroom-template-card
primary: Lavadora
multiline_secondary: true
secondary: |-
Detergente: {{states('sensor.detergente_restante')}}
Suavizante: {{states('sensor.suavizante_restante')}}
icon: mdi:washing-machine
badge_icon: >
{% if (states('binary_sensor.puerta_lavadora') == 'off') %}
mdi:door-closed
{% else %}
mdi:door-open
{% endif %}
badge_color: grey
entity: switch.lavadora
tap_action:
action: more-info
double_tap_action:
action: none
hold_action:
action: none
icon_color: >-
{% if is_state('input_select.estado_lavadora','Lavando') %}
#9e4a4a
{% elif is_state('input_select.estado_lavadora','Finalizada') %}
#4b874e
{% else %}
black
{% endif %}
layout: horizontal
card_mod:
style:
mushroom-state-info$: |
.container {
{% if(states("sensor.detergente_restante")|int(0)<4) %}
--card-secondary-color: #9e4a4a;
}
{% else %}
{% endif %}
.: |
ha-card {
border: 0px;
margin-top: -25px;
margin-left: 165px;
}
ha-state-icon {
{% if is_state('input_select.estado_lavadora','Lavando') %}
animation: shake 400ms ease-in-out infinite, drum 2s ease infinite;
transform-origin: 50% 110%;
}
@keyframes shake {
0%, 100% { transform: translate(0, 0) rotate(0); }
20% { transform: translate(0.4px, -0.4px) rotate(-4deg); }
40% { transform: translate(-0.4px, 0.4px) rotate(4deg); }
60% { transform: translate(0.4px, 0.4px) rotate(-4deg); }
80% { transform: translate(-0.4px, -0.4px) rotate(4deg); }
}
@keyframes drum {
50% { clip-path: polygon(0 0, 0 100%, 35% 100%, 34% 68%, 60% 41%, 71% 56%, 65% 74%, 47% 79%, 32% 69%, 35% 100%, 100% 100%, 100% 0); }
}
{% else %}
{% endif %}
}Dimitri posted a solution that may work for you.
1 Like
Edit:
Actually, after the initial happiness, I checked out changing values of the condicional first line color, and all I manage to achieve is either the secondary color overrides both lines or nothing happens…
I’ll give it a thought to see if with your help I can work it around
Thanks!!
sorry for posting again,
i am struggling with my code. Does anybody know how to ichange the icon, only during the mouse is over the ic0n?
The code:
type: custom:mushroom-template-card
primary: |-
IR-Sender:
{{ 'ALARM' if (states("input_boolean.alert_ir_blocked") == 'on') else
'aus' if (states(entity) == 'off') else
'ein' if (states(entity) == 'on')
}}
multiline_secondary: true
secondary: '{{''bitte zurücksetzen'' if states("input_boolean.alert_ir_blocked")== ''on''}}'
icon: mdi:leak
tap_action:
action: toggle
icon_color: '{{ ''green'' if states(entity) == ''on'' else ''#636363'' }}'
badge_icon: '{{''mdi:exclamation'' if states("input_boolean.alert_ir_blocked")== ''on''}}'
badge_color: '#DC143C'
fill_container: false
entity: switch.k05_ir_sender
double_tap_action:
action: none
hold_action:
action: none
card_mod:
style:
mushroom-shape-icon$: |
.shape
{
--icon-symbol-size: 20px;
--icon-size: 40px;
--shape-color: transparent !important;
{% set state = states(config.entity) %}
{% if state == 'on' %}
--shape-animation: ping 2s infinite;
{% else %}
{% endif %}
{% if states("input_boolean.alert_ir_blocked")== 'on' %}
box-shadow: 0 0 0 1px #DC143C !important
{% else %}
{% endif %}
}
@keyframes ping
{
0% {box-shadow: 0 0 0 0 #DC143C }
90% {box-shadow: 0 0 0 3px transparent;}
100% {box-shadow: 0 0 0 0 transparent;}
}
mushroom-state-info$: |
.container {
--card-primary-font-size: 14px;
}
.: |
ha-card{ margin-top: -0px;
border: none !important;
--card-primary-color: #E0E0E0;
--card-secondary-color:#DC143C;
}
ha-state-icon:hover
{
--icon-symbol-size: 25px;
}
Done!
Thank you so much both @dimitri.landerloos and @LiQuid_cOOled for helping!
I just left the secondary standard line empty (only with a space so it doesn’t go null) and then used both secondary:before and secondary:after and now each line changes its color depending on their respective sensors!!
This is the template card full code in case someone needs it:
type: custom:mushroom-template-card
primary: Lavadora
multiline_secondary: false
secondary: ' '
icon: mdi:washing-machine
badge_icon: |
{% if (states('binary_sensor.puerta_lavdora') == 'off') %}
mdi:door-closed
{% else %}
mdi:door-open
{% endif %}
badge_color: grey
entity: switch.lavadora
tap_action:
action: more-info
double_tap_action:
action: none
hold_action:
action: none
icon_color: |-
{% if is_state('input_select.estado_lavadora','Lavando') %}
#9e4a4a
{% elif is_state('input_select.estado_lavadora','Finalizada') %}
#4b874e
{%else%}
black
{% endif %}
layout: horizontal
card_mod:
style:
mushroom-state-info$: |
.secondary:before {
content: 'Detergente: {{states('sensor.detergente_restante')}}';
display: flex;
color: {% if(states("sensor.detergente_restante")|int(0)<4) %}
#9e4a4a;
{% else %}
{% endif%}
}
.secondary:after {
content: 'Suavizante: {{states('sensor.suavizante_restante')}}';
display: flex;
color: {% if(states("sensor.suavizante_restante")|int(0)<4) %}
#9e4a4a;
{% else %}
{% endif%}
}
.: |
ha-card {
border: 0px;
margin-top: -25px;
margin-left: 165px;
}
ha-state-icon {
{% if is_state('input_select.estado_lavadora','Lavando') %}
animation: shake 400ms ease-in-out infinite, drum 2s ease infinite;
transform-origin: 50% 110%;
}
@keyframes shake {
0%, 100% { transform: translate(0, 0) rotate(0); }
20% { transform: translate(0.4px, -0.4px) rotate(-4deg); }
40% { transform: translate(-0.4px, 0.4px) rotate(4deg); }
60% { transform: translate(0.4px, 0.4px) rotate(-4deg); }
80% { transform: translate(-0.4px, -0.4px) rotate(4deg); }
}
@keyframes drum {
50% { clip-path: polygon(0 0, 0 100%, 35% 100%, 34% 68%, 60% 41%, 71% 56%, 65% 74%, 47% 79%, 32% 69%, 35% 100%, 100% 100%, 100% 0); }
}
{% else %}
{% endif %}
}
1 Like
Take a look in the initial post in this thread at this section:
Are there any ways to show MDI icons in the Mushroom Title card?
I am not sure but I use template cards for most of my titles to include an icon
type: custom:mushroom-template-card
primary: 'r a s p i s e r v e r '
icon: mdi:raspberry-pi
secondary: 's t a t s '
icon_color: blue
card_mod:
style: |
ha-card {
--card-primary-font-size: 1.5rem;
--primary-text-color: white;
--secondary-text-color: green;
border: 1px;
box-shadow: none;
background: rgba(0,0,0,0);
margin-top: 1.5rem;
}
1 Like
Not directly without combining cards - or with using a pseudo element and then having a version of that MDI saved on your HA instance.
here is an example. i will say that adjusting the color of the mdi with this way of doing it, is quite difficult.
type: custom:mushroom-title-card
title: Hello, {{ user }} !
subtitle: Test
card_mod:
style: |
.title:before {
content: url('/local/mdi/mdi--car.svg');
display: flex;
width: 40px;
}
.title {
display: flex;
}
.subtitle:before {
content: url('/local/mdi/mdi--car.svg');
display: flex;
width: 40px;
}
.subtitle {
display: flex;
}
2 Likes
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