I believe you can. I am no expert on card_mod but I use t
i am no expert but I believe you can. I use this to control the background.
card_mod:
style: |
ha-card {
border: none;
box-shadow: none;
ha-card-border-width: 0px;
}
ha-card:after {
content: '{{ states('switch.localbytes_plug_pm_8c9d3a_kettle') }};
position: absolute;
top: -10%;
right: -10%;
display: flex;
justify-content: center;
align-items: center;
width: 14px;
height: 14px;
font-size: 9px;
font-weight: 700;
border-radius: 50%;
{% if states(config.entity) == 'on' %}
background: rgba(var(--rgb-green), 0.2) !important;
{% else %}
background: rgba(var(--rgb-red), 0.2) !important;
{% endif %}
}
obviously easier with a template chip
icon_color: |-
{% set state = states(entity) %}
{% if state == 'on' %}
green
{% else %}
red
{% endif %}
I guess so thing like this not tested.
mushroom-entity-chip:nth-child(2)$: |
ha-state-icon {
{% set state = states(entity) %}
{% if state == 'on' %}
--color: green;
{% else %}
--color: red;
{% endif %}
}
1 Like
Thanks, Why not?
Thanks, I will try your code. At this point, I think itâs just better to use template chip tbh.
1 Like
Hi Dimitri,
You helped me last year on this climate card. I have been using this card for many months, and itâs very essential for me. There is one more thing about the climate card, which is value text.
(the screen shot is in the above your reply back in 2023). In the screen shot, the value â69â, how can I have an âblinkâ or âease-in-outâ animation on this â69â value text when the climateâs state is in âcoolingâ or âheatingâ? (The yaml code is in also in that post too.)
Thanks.
Hello!
I need help with a template card.
If âfan.paraelszivo_zuhanyzo_switch_0â is state: ON, should there be a shape animation or should the 15 minute countdown be displayed?
type: horizontal-stack
cards:
- type: custom:mushroom-template-card
primary: ZuhanyzĂł
secondary: |-
{{states('sensor.zuhanyzo_a531_temperature') | float | round(1)}} °C
{{states('sensor.zuhanyzo_a531_humidity') | float | round(1)}} %
icon: mdi:shower-head
tap_action:
action: navigate
navigation_path: /dashboard-kezelfelulet/zuhanyzo
hold_action:
action: none
icon_color: |
{% if is_state('light.led_driver_zuhanyzo','on') %}
orange
{% endif %}
multiline_secondary: true
This doesnât seem to be the code for your fan card. Do you have that code?
Animation will need to be defined.
Sorry, I was misunderstood.
In this code I want to paste:
type: horizontal-stack
cards:
- type: custom:mushroom-template-card
primary: ZuhanyzĂł
secondary: |-
{{states('sensor.zuhanyzo_a531_temperature') | float | round(1)}} °C
{{states('sensor.zuhanyzo_a531_humidity') | float | round(1)}} %
icon: mdi:shower-head
tap_action:
action: navigate
navigation_path: /dashboard-kezelfelulet/zuhanyzo
hold_action:
action: none
icon_color: |
{% if is_state('light.led_driver_zuhanyzo','on') %}
orange
{% endif %}
multiline_secondary: true
I want to insert this animation. Condition: fan state: ON
card_mod:
style:
mushroom-shape-icon$: |
.shape {
--shape-animation: ping 2s infinite;
}
@keyframes ping {
0% {box-shadow: 0 0 0 0 rgba(var(--rgb-red), 0.7);}
70% {box-shadow: 0 0 0 10px transparent;}
100% {box-shadow: 0 0 0 0 transparent;}
}
Or, if an animation that indicates elapsed time can be solved.
Similar to this:
card_mod:
style:
mushroom-shape-icon$: |
.shape {
border: 2.5px outset green
}
do you think you could do one for custom:fold-entity-row & custom:auto-entities and how to style these using mushroom?
Itâs still not very clear what you are requesting, but letâs start here
type: horizontal-stack
cards:
- type: custom:mushroom-template-card
primary: ZuhanyzĂł
secondary: |-
{{states('sensor.zuhanyzo_a531_temperature') | float | round(1)}} °C
{{states('sensor.zuhanyzo_a531_humidity') | float | round(1)}} %
icon: mdi:shower-head
tap_action:
action: navigate
navigation_path: /dashboard-kezelfelulet/zuhanyzo
hold_action:
action: none
icon_color: |
{% if is_state('light.led_driver_zuhanyzo','on') %}
orange
{% endif %}
multiline_secondary: true
card_mod:
style:
mushroom-shape-icon$: |
.shape {
{% if is_state('fan.bedroom_fan','on') %}
--shape-animation: ping 2s infinite; {% endif %}
}
@keyframes ping {
0% {box-shadow: 0 0 0 0 rgba(var(--rgb-red), 0.7);}
70% {box-shadow: 0 0 0 10px transparent;}
100% {box-shadow: 0 0 0 0 transparent;}
}
replace this entity with your fan.
Thatâs what I thought! Thanks!
How do I make the icon toggle lights when clicked like the default Tile card? I can only use the tap_actions for the whole card only.
type: custom:mushroom-light-card
name: Lamp
use_light_color: true
entity: light.room_lamp
tap_action:
action: more-info
hold_action:
action: toggle
card_mod:
style:
mushroom-state-info$: |
.container {
width: 83%;
}
.: |
ha-card {
border-radius: 40px;
border: none !important;
box-shadow: 0px 1px 1px 0px rgb(0,0,0,0.1);
{% if states(config.entity)=='on' %}
background: linear-gradient(to right, rgba{{state_attr(config.entity,'rgb_color') + (0.01,)}}, rgba{{state_attr(config.entity,'rgb_color') + (0.7,)}});
{% endif %}
}
Thanks
correct. the mushroom cards only support 1 type of tap action. that is the tap action of the entire card, icon or whole card. doesnt matter.
card mod cant resolve that for you.
i would suggest you use the tile card instead and adapt your card mod code to it instead.
1 Like
My solution, it works, but I donât think itâs the best!
Why do I say not the best⌠When I have several such boxes on the dashboard, rendering is slow!
type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
entity: light.lampa_soba
primary: Sobna lampa
secondary: |-
{% if is_state(entity, 'on') %}
Ukljucena
{% else %}
IskljuÄena
{% endif %}
icon: mdi:lamp
icon_color: |-
{% if is_state(entity, 'on') %}
accent
{% else %}
grey
{% endif %}
layout: horizontal
tap_action:
action: more-info
hold_action:
action: none
double_tap_action:
action: none
card_mod:
style:
mushroom-state-info$: |
.primary {
font-size: 14px !important;
position: relative;
top: 30px;
left: -88px;
overflow: visible !important;
--card-primary-color: white;
}
.secondary {
font-size: 12px !important;
position: relative;
overflow: visible !important;
top: 30px;
left: -88px;
{% if is_state(config.entity, 'on') %}
--card-secondary-color: orange;
{% else %}
--card-secondary-color: gray;
{% endif %}
}
mushroom-shape-icon$: |
.shape {
position: relative;
left: -20px;
top: -20px;
--shape-color: none;
}
.: |
:host {
--mush-icon-size: 72px;
}
ha-card {
background: none !important;
border: none !important;
}
- type: custom:mushroom-chips-card
chips:
- type: template
entity: light.lampa_soba
use_entity_picture: false
icon: |-
{% if is_state(entity, 'on') %}
mdi:toggle-switch
{% else %}
mdi:toggle-switch-off-outline
{% endif %}
icon_color: |-
{% if is_state(entity, 'on') %}
accent
{% else %}
white
{% endif %}
tap_action:
action: toggle
content_info: none
card_mod:
style: |
ha-card {
border: none !important;
}
card_mod:
style: |
ha-card {
position: absolute;
top: 5px;
right: -30px;
width: 80px;
--chip-box-shadow: none;
--chip-background: none;
--chip-icon-size: 30px;
--chip-spacing: -10px;
}
card_mod:
style: |
ha-card {
height: 105px;
border-radius: 15px;
box-shadow: var(--ha-card-box-shadow);
border: var(--ha-card-border-width, 1px) solid var(--ha-card-border-color, var(--divider-color, #e0e0e0));
background: rgba(var(--rgb-card-background-color), 0.50);
}
looks good, if your concerned with rendering times you could achieve a similar if not the same look with button-card with alot less code.
2 Likes
Hello!
This animation pulses, an icon is visible, the icon does not rotate.
style:
mushroom-shape-icon$: |
.shape {
{% if is_state('fan.paraelszivo_zuhanyzo_switch_0','on') %}
--shape-animation: ping 2s infinite; {% endif %}
}
@keyframes ping {
0% {box-shadow: 0 0 0 0 rgba(var(--rgb-red), 0.7);}
70% {box-shadow: 0 0 0 10px transparent;}
100% {box-shadow: 0 0 0 0 transparent;}
}
This animation is rotating, the icon is not visible.
card_mod:
style:
mushroom-shape-icon$: |
.shape {
border: 5px solid rgb(var(--rgb-disabled));
border-left-color: transparent;
--shape-animation: spin 1s linear infinite;
--shape-color: none;
--icon-size: 32px;
}
I want such an animation, a border rotates around the icon, the icon is visible, the icon does not rotate.
Is it possible?
yesâŚ
type: custom:mushroom-template-card
icon: mdi:home
icon_color: blue
primary: ''
card_mod:
style:
mushroom-shape-icon$: |
.shape {
--shape-color: none;
}
.shape:after {
content: ' ';
position: absolute;
width: inherit;
height: inherit;
border-radius: 500px;
border: 5px solid rgb(var(--rgb-disabled));
border-left-color: transparent;
animation: spin 1s linear infinite;
}
1 Like
Using the Person card, is it possible to put the primary and secondary title in one line, or must I use the Template card?
Template may be the way to go, but it is possible.
type: custom:mushroom-person-card
entity: person.jay673
primary_info: name
secondary_info: last-changed
card_mod:
style:
mushroom-state-info$: |
.secondary {
margin-left: 50px;
margin-top: -18px;
--card-secondary-color: orange;
}
Another option that allows you to use the state of a second entity.
type: custom:mushroom-person-card
entity: person.jay673
primary_info: name
secondary_info: none
card_mod:
style:
mushroom-state-info$: |
.primary:after {
color: lime;
content: "{{ states('sensor.basement_sensor') | round(1) }} \2109";
margin-left: 10px;
}
1 Like
- type: custom:mushroom-update-card
entity: update.home_assistant_operating_system_update
show_buttons_control: true
icon: mdi:home-assistant
name: HA System
card_mod:
style:|
ha-state-icon {
color: {{ states("input_text.kleur_iconen")}};
}
gives me bad indentation