@Zenia I think WebPower was trying to say to you that you can put an icon over an icon to create the fireplace look you are wanting to tweak. He gave the Christmas tree example code and that is why he suggested campfire icon. It wasn’t for your utility room.
Clip-path hides a portion of the background to create the animation. What you are trying to accomplish is possible, but will take multiple steps.
I can take a stab at it, if you’d like.
Oh, Sorry. I thought he was replying to my other post about Utility room icon
@WebPower sorry if I said something wrong
@LiQuid_cOOled , yes, please
TY
Something like this?
type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
icon: mdi:fireplace
icon_color: teal
primary: Fireplace
card_mod:
style: |
ha-card{
border: none;
- type: custom:mushroom-template-card
icon: mdi:fire
icon_color: red
card_mod:
style:
mushroom-shape-icon$: |
.shape {
--icon-symbol-size: 12px;
background: none !important;
}
.shape:before {
content: "";
height: 4px;
width: 5px;
border-width: 0;
position: absolute;
background: yellow;
top:20px;
left:18px;
border-radius: 50%;
}
.: |
ha-card {
width: 66px;
left: 0px;
margin-top: -69px !important;
---icon-size: 90px;
border: none;
}
ha-state-icon {
animation: fire 400ms ease-in-out infinite, drum 2s ease infinite;
transform-origin: 50% 110%;
}
@keyframes fire {
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); }
}
If you plan on having a different color or no flame for the OFF state and need assistance just let me know 
Thank you
I have another problem with this card:
When I editing , everything is look great, like this:
type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
icon: mdi:fireplace
icon_color: teal
primary: Living Room
card_mod:
style: |
ha-card{
border: none !important;
{% if states('light.living_room_lights') == 'on' %}
box-shadow: 0px 0px 5px 5px #CBC3E3 !important;
{% else %}
box-shadow: 5px 10px 5px -3px rgba(0,0,0,0.75);
{% endif %}
{% if is_state('light.living_room_lights','on') %}
background: rgba(255, 152, 0, 0.1) !important;
{% endif %}
--card-primary-font-size: 10px;
--card-primary-font-weight: bold;
width: 150px;
top: 5px;
left:15px;
}
tap_action:
action: navigate
navigation_path: living-room-1
fill_container: true
layout: horizontal
multiline_secondary: false
- type: custom:mushroom-template-card
icon: mdi:fire
icon_color: red
card_mod:
style:
mushroom-shape-icon$: |
.shape {
--icon-symbol-size: 12px;
background: none !important;
}
.shape:before {
content: "";
height: 4px;
width: 5px;
border-width: 0;
position: absolute;
background: yellow;
top:20px !important;
left:19px !important;
border-radius: 50%;
}
.: |
ha-card {
width: 66px !important;
left: 15px !important;
margin-top: -65px !important;
---icon-size: 90px;
border: none;
}
ha-state-icon {
animation: fire 400ms ease-in-out infinite, drum 2s ease infinite;
transform-origin: 50% 110%;
}
@keyframes fire {
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); }
}
Are they all stacked in the same card? If so message me the entire card code or adjust this to bring the fire down a little.
We are stacking cards on cards so the surround card margins and padding matter.
type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
icon: mdi:fireplace
icon_color: teal
primary: Living Room
card_mod:
style: |
ha-card{
border: none !important;
{% if states('light.living_room_lights') == 'on' %}
box-shadow: 0px 0px 5px 5px #CBC3E3 !important;
{% else %}
box-shadow: 5px 10px 5px -3px rgba(0,0,0,0.75);
{% endif %}
{% if is_state('light.living_room_lights','on') %}
background: rgba(255, 152, 0, 0.1) !important;
{% endif %}
--card-primary-font-size: 10px;
--card-primary-font-weight: bold;
width: 150px;
top: 5px;
left:15px;
}
tap_action:
action: navigate
navigation_path: living-room-1
fill_container: true
layout: horizontal
multiline_secondary: false
- type: custom:mushroom-template-card
icon: mdi:fire
icon_color: red
card_mod:
style:
mushroom-shape-icon$: |
.shape {
--icon-symbol-size: 12px;
background: none !important;
}
.shape:before {
content: "";
height: 4px;
width: 5px;
border-width: 0;
position: absolute;
background: yellow;
top:20px !important;
left:19px !important;
border-radius: 50%;
}
.: |
ha-card {
width: 66px !important;
left: 15px !important;
margin-top: -65px !important;
---icon-size: 90px;
border: none;
}
ha-state-icon {
animation: fire 400ms ease-in-out infinite, drum 2s ease infinite;
transform-origin: 50% 110%;
}
@keyframes fire {
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); }
}
card_mod:
style: |
ha-card{
border: none !important;
height: 100px
width: 150px
Hello,
I created a person card with some additional chips. Those chips need to be positioned and resized. I achieved the desired look, but when the page is loaded, I can see how the chips are moved and resized until they reach the final position (on PC and mobile phone). Sometimes those chips are completely missing and only a person entity is shown. When I use this person’s cards on the main/home page, I can see that they are loaded with significant delay, sometimes. It seems to be related to the view type. If I use Vertical (layout-card) then there is this rendering problem. Is this a desired behavior? Or is there a way how to fix delays or missing chips? When I switch to the Mansory (default) the rendering problem and delays disappear and everything works fine. Maybe Vertical (layout-card) issue?
Any suggestions for the cards? Is there a better way how to achieve the desired look?
Here is the code and I using Mushroom Square Shadow theme:
square: false
columns: 3
type: grid
cards:
- type: custom:vertical-stack-in-card
cards:
- type: custom:mushroom-person-card
entity: person.dano
use_entity_picture: true
hide_name: false
layout: horizontal
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: Dano
content:
type: custom:mod-card
style: |
ha-card {
--padding-right: 15px;
--padding-left: 15px;
--padding-bottom: 15px;
--box-shadow: 0px 0px;
--ha-card-border-width: 0px;
}
card:
type: vertical-stack
cards:
- type: custom:mushroom-template-card
entity: sensor.s23_dano_geocoded_location
primary: '{{ states.person.dano.state | capitalize }}'
secondary: '{{ states.sensor.s23_dano_geocoded_location.state }}'
icon: mdi:map-marker
icon_color: blue
- type: map
entities:
- zone.work
- zone.work_sisa
- zone.chalupka
- zone.home
- zone.garage
- zone.lubo
- zone.tomas
- person.dano
auto_fit: true
aspect_ratio: '3:2'
default_zoom: 17
- type: custom:mushroom-chips-card
chips:
- type: template
entity: binary_sensor.s23_dano_mobile_data
icon: '{{ state_attr(entity, ''icon'') }}'
icon_color: '{{ ''blue'' if is_state(entity, "on") else ''disabled'' }}'
card_mod:
style: |
ha-card {
justify-content: center;
min-width: 22px !important;
--chip-height: 30px;
--chip-icon-size: 18px;
}
- type: template
entity: binary_sensor.s23_dano_wifi_state
icon: '{{ state_attr(entity, ''icon'') }}'
icon_color: '{{ ''green'' if is_state(entity, "on") else ''disabled'' }}'
card_mod:
style: |
ha-card {
justify-content: center;
min-width: 22px !important;
--chip-height: 30px;
--chip-icon-size: 18px;
}
- type: template
entity: sensor.s23_dano_battery_level
card_mod:
style: |
ha-card {
justify-content: center;
min-width: 22px !important;
--chip-height: 30px;
--chip-icon-size: 18px;
}
ha-card:after {
content: "{{ states('sensor.s23_dano_battery_level') }}%";
position: absolute;
display: flex;
justify-content: center;
align-items: center;
font-weight: bolder;
border-radius: 50%;
top: -7px;
right: 0px;
width: 16px;
height: 16px;
font-size: 11px;
}
icon: >
{% set battery_level = states(entity) | int // 10 * 10 %}
{% set charging_state = states('sensor.s23_dano_charger_type')
%}
{% set is_charging =
is_state('binary_sensor.s23_dano_is_charging', 'on') | iif(True,
False) %}
{% set map = {"none":"", "ac":"charging-",
"wireless":"charging-wireless-"} %}
{% set charging = map[states('sensor.s23_dano_charger_type')] %}
{% if battery_level == 100 and is_charging == True %}
mdi:battery-charging
{% elif battery_level == 100 %} mdi:battery
{% elif battery_level >= 10 %}
mdi:battery-{{charging}}{{battery_level}}
{% elif battery_level >= 0 %} mdi:battery-{{charging}}outline
{% else %} mdi:battery-unknown
{% endif %}
icon_color: |-
{% set percentage = states(entity) | int %}
{% set r, g, b = 0, 0, 0 %}
{% if (percentage <= 51) %}
{% set r = 200 %}
{% set g = (5.0 * percentage) | round | int %}
{% else %}
{% set g = 200 %}
{% set r = (505 - 4.89 * percentage) | round | int %}
{% endif %}
{{ "#%0x" | format( r * 0x10000 + g * 0x100 + b * 0x1 ) }}
tap_action:
action: more-info
alignment: center
card_mod:
style: |
ha-card {
--chip-box-shadow: 0px;
--chip-background: none;
--chip-spacing: 0px;
--chip-padding: 0 0em;
}
- type: custom:vertical-stack-in-card
cards:
- type: custom:mushroom-person-card
entity: person.sisa
use_entity_picture: true
hide_name: false
layout: horizontal
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: Sisa
content:
type: custom:mod-card
style: |
ha-card {
--padding-right: 15px;
--padding-left: 15px;
--padding-bottom: 15px;
--box-shadow: 0px 0px;
--ha-card-border-width: 0px;
}
card:
type: vertical-stack
cards:
- type: custom:mushroom-template-card
entity: sensor.s23fe_sisa_geocoded_location
primary: '{{ states.person.sisa.state | capitalize }}'
secondary: '{{ states.sensor.s23fe_sisa_geocoded_location.state }}'
icon: mdi:map-marker
icon_color: blue
- type: map
entities:
- zone.work
- zone.work_sisa
- zone.chalupka
- zone.home
- zone.garage
- zone.lubo
- zone.tomas
- person.sisa
auto_fit: true
aspect_ratio: '3:2'
default_zoom: 17
- type: custom:mushroom-chips-card
chips:
- type: template
entity: binary_sensor.s23fe_sisa_mobile_data
icon: '{{ state_attr(entity, ''icon'') }}'
icon_color: '{{ ''blue'' if is_state(entity, "on") else ''disabled'' }}'
card_mod:
style: |
ha-card {
justify-content: center;
min-width: 22px !important;
--chip-height: 30px;
--chip-icon-size: 18px;
}
- type: template
entity: binary_sensor.s23fe_sisa_wifi_state
icon: '{{ state_attr(entity, ''icon'') }}'
icon_color: '{{ ''green'' if is_state(entity, "on") else ''disabled'' }}'
card_mod:
style: |
ha-card {
justify-content: center;
min-width: 22px !important;
--chip-height: 30px;
--chip-icon-size: 18px;
}
- type: template
entity: sensor.s23fe_sisa_battery_level
card_mod:
style: |
ha-card {
justify-content: center;
min-width: 22px !important;
--chip-height: 30px;
--chip-icon-size: 18px;
}
ha-card:after {
content: "{{ states('sensor.s23fe_sisa_battery_level') }}%";
position: absolute;
display: flex;
justify-content: center;
align-items: center;
font-weight: bolder;
border-radius: 50%;
top: -7px;
right: 0px;
width: 16px;
height: 16px;
font-size: 11px;
}
icon: >
{% set battery_level = states(entity) | int // 10 * 10 %}
{% set charging_state = states('sensor.s23fe_sisa_charger_type')
%}
{% set is_charging =
is_state('binary_sensor.s23fe_sisa_is_charging', 'on') | iif(True,
False) %}
{% set map = {"none":"", "ac":"charging-",
"wireless":"charging-wireless-"} %}
{% set charging = map[states('sensor.s23fe_sisa_charger_type')]
%}
{% if battery_level == 100 and is_charging == True %}
mdi:battery-charging
{% elif battery_level == 100 %} mdi:battery
{% elif battery_level >= 10 %}
mdi:battery-{{charging}}{{battery_level}}
{% elif battery_level >= 0 %} mdi:battery-{{charging}}outline
{% else %} mdi:battery-unknown
{% endif %}
icon_color: |-
{% set percentage = states(entity) | int %}
{% set r, g, b = 0, 0, 0 %}
{% if (percentage <= 51) %}
{% set r = 200 %}
{% set g = (5.0 * percentage) | round | int %}
{% else %}
{% set g = 200 %}
{% set r = (505 - 4.89 * percentage) | round | int %}
{% endif %}
{{ "#%0x" | format( r * 0x10000 + g * 0x100 + b * 0x1 ) }}
tap_action:
action: more-info
alignment: center
card_mod:
style: |
ha-card {
--chip-box-shadow: 0px;
--chip-background: none;
--chip-spacing: 0px;
--chip-padding: 0 0em;
}
- type: custom:vertical-stack-in-card
cards:
- type: custom:mushroom-person-card
entity: person.danko
use_entity_picture: true
hide_name: false
layout: horizontal
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: Danko
content:
type: custom:mod-card
style: |
ha-card {
--padding-right: 15px;
--padding-left: 15px;
--padding-bottom: 15px;
--box-shadow: 0px 0px;
--ha-card-border-width: 0px;
}
card:
type: vertical-stack
cards:
- type: custom:mushroom-template-card
entity: sensor.s10e_danko_geocoded_location
primary: '{{ states.person.danko.state | capitalize }}'
secondary: '{{ states.sensor.s10e_danko_geocoded_location.state }}'
icon: mdi:map-marker
icon_color: blue
- type: map
entities:
- zone.work
- zone.work_sisa
- zone.chalupka
- zone.home
- zone.garage
- zone.lubo
- zone.tomas
- person.danko
auto_fit: true
aspect_ratio: '3:2'
default_zoom: 17
- type: custom:mushroom-chips-card
chips:
- type: template
entity: binary_sensor.s10e_danko_mobile_data
icon: '{{ state_attr(entity, ''icon'') }}'
icon_color: '{{ ''blue'' if is_state(entity, "on") else ''disabled'' }}'
card_mod:
style: |
ha-card {
justify-content: center;
min-width: 22px !important;
--chip-height: 30px;
--chip-icon-size: 18px;
}
- type: template
entity: binary_sensor.s10e_danko_wifi_state
icon: '{{ state_attr(entity, ''icon'') }}'
icon_color: '{{ ''green'' if is_state(entity, "on") else ''disabled'' }}'
card_mod:
style: |
ha-card {
justify-content: center;
min-width: 22px !important;
--chip-height: 30px;
--chip-icon-size: 18px;
}
- type: template
entity: sensor.s10e_danko_battery_level
card_mod:
style: |
ha-card {
justify-content: center;
min-width: 22px !important;
--chip-height: 30px;
--chip-icon-size: 18px;
}
ha-card:after {
content: "{{ states('sensor.s10e_danko_battery_level') }}%";
position: absolute;
display: flex;
justify-content: center;
align-items: center;
font-weight: bolder;
border-radius: 50%;
top: -7px;
right: 0px;
width: 16px;
height: 16px;
font-size: 11px;
}
icon: >
{% set battery_level = states(entity) | int // 10 * 10 %}
{% set charging_state = states('sensor.s10e_danko_charger_type')
%}
{% set is_charging =
is_state('binary_sensor.s10e_danko_is_charging', 'on') | iif(True,
False) %}
{% set map = {"none":"", "ac":"charging-",
"wireless":"charging-wireless-"} %}
{% set charging = map[states('sensor.s10e_danko_charger_type')]
%}
{% if battery_level == 100 and is_charging == True %}
mdi:battery-charging
{% elif battery_level == 100 %} mdi:battery
{% elif battery_level >= 10 %}
mdi:battery-{{charging}}{{battery_level}}
{% elif battery_level >= 0 %} mdi:battery-{{charging}}outline
{% else %} mdi:battery-unknown
{% endif %}
icon_color: |-
{% set percentage = states(entity) | int %}
{% set r, g, b = 0, 0, 0 %}
{% if (percentage <= 51) %}
{% set r = 200 %}
{% set g = (5.0 * percentage) | round | int %}
{% else %}
{% set g = 200 %}
{% set r = (505 - 4.89 * percentage) | round | int %}
{% endif %}
{{ "#%0x" | format( r * 0x10000 + g * 0x100 + b * 0x1 ) }}
tap_action:
action: more-info
alignment: center
card_mod:
style: |
ha-card {
--chip-box-shadow: 0px;
--chip-background: none;
--chip-spacing: 0px;
--chip-padding: 0 0em;
}
How can I fix this forecast card of user Rhysb
- type: custom:mushroom-template-card
primary: '{{ state_attr(entity, ''temperature'') | round(1) }} °C'
secondary: >-
{% set condition = state_attr(entity, 'forecast')[0]['conditions'] %}
{% set intensity = states('sensor.unsworth_heights_rain_intensity') %}
{% if intensity != 'None' %}
{% set condition = intensity + ' Rain' %}
{% endif %}
{{ condition }}
icon: ' '
entity: weather.weatherflow_weather_hourly
picture: >-
{% set condition = states(entity) %}
{% set intensity = states('sensor.weatherflow_rain_intensity') |
replace(" ", "-") | lower %}
{% if condition == 'partlycloudy' and is_state('sun.sun',
'below_horizon') %}
{% set condition = condition + '-night' %}
{% endif %}
{% if intensity != 'none' and condition != 'lightning' %}
{% set condition = intensity %}
{% endif %}
/local/weather_icons/anim/{{ condition }}.svg
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: Weather
content:
type: custom:layout-card
layout_type: masonry
layout: {}
cards:
- type: custom:weather-card
entity: weather.weatherflow_day_based_forecast
number_of_forecasts: '5'
card_mod:
style:
mushroom-state-info$: |
/* Align text on the right */
.container {
transform: scaleX(-1);
text-align: right;
width: fit-content;
}
.: |
ha-card {
/* Move icon to the right */
transform: scaleX(-1);
/* Enlarge icon & remove circular shape */
--icon-size: 42px;
--icon-border-radius: 0;
/* Style secondary text */
--card-secondary-font-weight: normal;
/* Remove styling from card */
--ha-card-background: none;
--ha-card-box-shadow: none;
--ha-card-border-width: 0;
padding: 0px !important;
transition: all 0s;
}
Why my animation stop working when I add
{% if is_state(config.entity, 'on') %}
{% else %}
{% endif %}
to my code
type: custom:mushroom-chips-card
chips:
- type: template
entity: light.rgb_light
icon: mdi:door
card_mod:
style:
mushroom-template-chip:nth-child(1)$: |
ha-state-icon {
{% if is_state(config.entity, 'on') %}
animation: open 6s ease-in-out infinite;
transform-origin: 30%;
{% else %}
{% endif %}
}
@keyframes open {
0%, 66% { transform: rotateY(0deg); }
33% { transform: rotateY(-120deg); }
}
working fine without
Try this…
type: custom:mushroom-chips-card
chips:
- type: template
entity: light.rgb_light
icon: mdi:door
card_mod:
style:
mushroom-template-chip:nth-child(1)$: |
ha-state-icon {
{% if is_state('light.rgb_light', 'on') %}
animation: open 6s ease-in-out infinite;
transform-origin: 30%;
}
{% endif %}
@keyframes open {
0%, 66% { transform: rotateY(0deg); }
33% { transform: rotateY(-120deg); }
}
@Zenia I didn’t like that we had to stack cards so I built a fire symbol using clip-path on the pseudo-element. This should eliminate your inconsistency when using your preferred theme.
The pseudo-element will move with the single card vs having two cards on top of each other to create the effect.
type: custom:mushroom-template-card
primary: Fireplace
icon: mdi:fireplace
icon_color: teal
card_mod:
style:
mushroom-shape-icon$: |
.shape:after {
content: "";
height: 11px;
width: 11.6px;
border-width: 0;
position: absolute;
background: linear-gradient(to top left, #FFFF11 22%, #FF1A16 57%);
margin-top:5px;
left:14px;
clip-path: polygon(71% 83%, 78% 73%, 81% 64%, 80% 55%, 76% 47%, 69% 41%, 63% 36%, 59% 30%, 56% 22%, 59% 13%, 59% 13%, 52% 15%, 45% 20%, 39% 28%, 35% 40%, 36% 49%, 38% 58%, 33% 57%, 30% 51%, 31% 35%, 24% 44%, 19% 58%, 22% 66%, 26% 76%, 35% 85%, 48% 88%, 61% 86%);
animation: fire 400ms ease-in-out infinite, drum 2s ease infinite;
}
@keyframes fire {
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); }
}
Yes, it’s works. Thank you. You are the BEST. I spend almost an hour before I asked here. It’s working fine with whole code in template card, but was not working in chip template.
THANK YOU AGAIN.
I tried, but with no success on getting to look like a chip card unfortunately. I can achieve it using a regular template entity card, just no chip. Would you know how? thanks
Yes, I can assist you. I’ll tackle it in a little bit. Can you share the code for the larger card it will be a part of?
I was able to achieve what you are looking for with a template card. You’ll have to make some tweaks (icon, etc…), but we are close.
type: custom:mushroom-template-card
primary: Living Room
secondary: Secondary
icon: mdi:sofa
icon_color: black
card_mod:
style:
mushroom-shape-icon$: |
.shape {
background: none !important;
left: -10px;
}
mushroom-state-info$: |
.primary {
margin-left: -14px !important;
font-weight: bolder !important;
}
.secondary {
margin-top: -8px !important;
margin-left: -8px !important;
}
.: |
ha-card {
border-radius: 15px 15px 15px 15px;
height: 30px !important;
width: 125px;
--card-primary-font-size: 10px;
--card-secondary-font-size: 8px;
}
Could someone do me animations for this bubbles icon and heating icon please ?
mdi:chart-bubble
Would be good for the bubbles to kind of move to the top like bubbles do and repeat
’
mdi:heat-wave
Be nice to have the heatwaves shimmering
TIA
type: custom:mushroom-template-card
primary: Bubbles
icon: mdi:chart-bubble
icon_color: blue
card_mod:
style:
mushroom-shape-icon$: |
.shape {
background: none !important
}
.: |
ha-state-icon {
animation: float-up 8s ease-out infinite;
}
@keyframes float-up {
to {
transform: translateY(-30px);
}
}
Spot on, many thanks