Is it possible to have the light slider with the name or text inside the slider? To make the slider wider and cover the whole width…
icon_color: '{{ ''green'' if is_state(config.entity, ''on'') else ''red'' }}'
1 Like
Hello,
I will try like that…
Thank you
For some reason this code doesn’t seem to run the animation, but it does work with “sunny” animation, also of your animations, in the same exact style. What’s broken here?
- type: conditional
conditions:
- entity: input_boolean.cycle_day
state: 'on'
- entity: binary_sensor.luz_kitchen
state: 'on'
chip:
type: template
icon_color: amber
icon: mdi:lightbulb-on
tap_action:
action: none
hold_action:
action: none
card_mod:
style: |
.content {
animation: illumination 2s infinite;
}
@keyframes illumination {
0%, 100% { clip-path: inset(0 0 0 0); }
80% { clip-path: polygon(0% 99%, 20% 55%, 22% 37%, 39% 20%, 61% 21%, 77% 35%, 79% 57%, 99% 100%); }
}
Thank you so much
@edit: I feel like the above could’ve been a little too vague, so below I linked the entire card.
Full card for context:
type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
entity: input_boolean.room_kitchen
primary: Cozinha
secondary: '{{ states("sensor.temp_kitchen") | round(0) }} °C'
icon: mdi:fridge-outline
tap_action:
action: navigate
navigation_path: cozinha
hold_action:
action: call-service
service: light.turn_off
data:
transition: 3
target:
area_id: kitchen
double_tap_action:
action: toggle
icon_color: |-
{% if states('light.candeeiro_cozinha') == 'on' %}
#F5C02F
{% elif states('light.lightstrip_kitchen_light') == 'on' %}
white
{% endif %}
fill_container: true
layout: horizontal
multiline_secondary: false
card_mod:
style: |
:host([dark-mode]) {
background: rgba(var(--rgb-primary-background-color), 0.2);
}
:host {
background: rgba(var(--rgb-primary-text-color), 0.025);
--mush-icon-size: 76px;
height: 66px;
margin-left: -18px !important;
}
- type: custom:mushroom-chips-card
chips:
- type: conditional
conditions:
- entity: input_boolean.vacuum_kitchen
state: 'on'
chip:
type: template
icon_color: pink
icon: mdi:robot-vacuum
tap_action:
action: none
hold_action:
action: none
card_mod:
style: |
.content {
animation: spin 6s ease 1.5s infinite;
}
@keyframes spin {
100% { transform: rotate(360deg); }
}
- type: conditional
conditions:
- entity: media_player.mitv_kitchen
state_not: 'off'
- entity: media_player.mitv_kitchen
state_not: unavailable
chip:
type: template
icon_color: disabled
icon: |-
{% set media_type = state_attr('media_player.mitv_kitchen',
'media_content_type') %}
{% if media_type == 'tvshow' %}
mdi:television-classic
{% elif media_type == 'movie' %}
mdi:movie-open
{% elif media_type == 'music' %}
mdi:music
{% elif media_type == 'playlist' %}
mdi:music
{% else %}
mdi:television
{% endif %}
tap_action:
action: none
hold_action:
action: none
- type: conditional
conditions:
- entity: input_boolean.cycle_day
state: 'on'
- entity: binary_sensor.luz_kitchen
state: 'on'
chip:
type: template
icon_color: amber
icon: mdi:weather-sunny
tap_action:
action: none
hold_action:
action: none
card_mod:
style: |
.content {
animation: sunny 8s ease-in-out infinite alternate;
}
@keyframes sunny {
70% { transform: rotate(360deg) scale(1); }
80% { transform: scale(1); }
90% { transform: scale(1.15); }
100% { transform: scale(1); }
}
- type: conditional
conditions:
- entity: input_boolean.cycle_day
state: 'on'
- entity: binary_sensor.luz_kitchen
state: 'on'
chip:
type: template
icon_color: amber
icon: mdi:lightbulb-on
tap_action:
action: none
hold_action:
action: none
card_mod:
style: |
.content {
animation: illumination 2s infinite;
}
@keyframes illumination {
0%, 100% { clip-path: inset(0 0 0 0); }
80% { clip-path: polygon(0% 99%, 20% 55%, 22% 37%, 39% 20%, 61% 21%, 77% 35%, 79% 57%, 99% 100%); }
}
- type: conditional
conditions:
- entity: binary_sensor.occupancy_kitchen
state: 'on'
chip:
type: template
icon_color: disabled
icon: mdi:transition
tap_action:
action: none
hold_action:
action: none
- type: conditional
conditions:
- entity: binary_sensor.window_kt_contact
state: 'on'
chip:
type: template
icon_color: disabled
icon: mdi:window-open-variant
tap_action:
action: none
hold_action:
action: none
- type: conditional
conditions:
- entity: timer.kitchen_ceiling
state: active
chip:
type: template
icon_color: disabled
icon: mdi:timer
tap_action:
action: none
hold_action:
action: none
- type: conditional
conditions:
- entity: timer.kitchen_daytime
state: active
chip:
type: template
icon_color: disabled
icon: mdi:timer-outline
tap_action:
action: none
hold_action:
action: none
- type: conditional
conditions:
- entity: timer.kitchen_extra
state: active
chip:
type: template
icon_color: disabled
icon: mdi:timer-outline
tap_action:
action: none
hold_action:
action: none
- type: conditional
conditions:
- entity: timer.kitchen_noble
state: active
chip:
type: template
icon_color: disabled
icon: mdi:timer-outline
tap_action:
action: none
hold_action:
action: none
- type: conditional
conditions:
- entity: timer.kitchen_late
state: active
chip:
type: template
icon_color: disabled
icon: mdi:timer-outline
tap_action:
action: none
hold_action:
action: none
alignment: end
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: 0;
}
card_mod:
style: |
ha-card {
height: 102px;
{% if is_state('light.candeeiro_cozinha', 'on') %}
background: rgba(245, 192, 47, 0.1);
{% endif %}
}
:host {
background: var(--card-background-color);
border-radius: var(--ha-card-border-radius);
}
I really can’t get this to work 
Use a layout-card, grid layout with two grid elements, markdown for title and your mushroom chips or you could use a Stack-in-Card I guess.
Another day, another thing to learn 
At the Moment i try different ideas to setup my “ServerView”. For that i made a very crap mockup, to show the route where i want to got
I tried, with different Stacks - but where i got real Problems are the bars for CPU, Temp and so on
Perhaps anybody from you, can give me a hint or a small example - from where i can go further
@rhysb perhaps you have an example, from where i can start?
thx in advance
2 Likes
-primary: Door
-secondary:…
multiline_secondary: true
-primary: Person Home
-secondary:…
multiline_secondary: true
Or
secondary: …
Primary: Persons Home
secondary: … Persons
primary: Home
1 Like
Looks great thanks!
Just need to figure out how to stop the “# Persons” from being bolder then the other text but other then that it’s nice
well you already use “bolder” in card_mod, try “normal” or lighter"
–mush-card-primary-font-weight: lighter;
… thou i think it’s the font-size you should reduce !
1 Like
Doesn’t work
Hi,
really like your work and working on a nice dashboard with lot of your work. Will share once finished.
Is it possible to have an animated printer icon, just normal printing?
Many thanks.
Neither of these worked, weird. Maybe Im putting them in the wrong spot.
type: custom:mushroom-template-card
secondary: Home
primary: |-
{{ states(config.entity) }}
Persons
icon: mdi:account-supervisor-circle
entity: zone.home
layout: vertical
icon_color: orange
tap_action:
action: call-service
service: browser_mod.popup
target: {}
data:
dismissable: true
autoclose: false
content:
type: grid
square: false
cards:
- type: custom:mushroom-person-card
entity: person.davidnestico
icon_type: entity-picture
hold_action:
action: none
double_tap_action:
action: none
- type: custom:mushroom-person-card
entity: person.dad
icon_type: entity-picture
hold_action:
action: none
double_tap_action:
action: none
- type: custom:mushroom-person-card
entity: person.vally
icon_type: entity-picture
hold_action:
action: none
double_tap_action:
action: none
fill_container: false
- type: custom:mushroom-person-card
entity: person.esther
icon_type: entity-picture
hold_action:
action: none
double_tap_action:
action: none
- type: custom:mushroom-person-card
entity: person.mom
icon_type: entity-picture
hold_action:
action: none
double_tap_action:
action: none
- type: custom:mushroom-entity-card
entity: zone.home
layout: horizontal
hold_action:
action: none
double_tap_action:
action: none
columns: 2
style: >-
background-color: {{ states('input_text.dark_nav_bar_color') }}
!important;
card_mod:
style:
mushroom-shape-icon$: |
.shape:after {
position: absolute;
font-size: var(--card-primary-font-size);
font-weight: bolder;
}
.shape {
box-shadow: var(--ha-card-box-shadow) !important;
}
.: |
ha-card {
–mush-card-primary-font-weight: lighter;
--ha-card-background: none;
box-shadow: none;
--ha-card-border-width: 0;
}
mushroom-shape-icon {
--shape-color: white !important;
}
Try to put !important behind lighter
First, im not sure you should have .: | , but just
card_mod;
style
ha-card {
... and for the font-weight, try this
:host {
--mush-card-primary-font-weight: lighter;
--mush-card-secondary-font-weight: lighter;
}
Latest at the bottom, (in line with cards: in your grid/stack) ,or if under the specific card , as above “style | ha-card” or host
1 Like
Hi @rhysb, I am still struggling with creating an animated conditional card. Any help would be appreciated.
type: custom:mushroom-template-card
primary: >-
{% set ct = states('sensor.ev_car_remaining_charging_time') | int %}
{% if ct > 60 %}{{ ct // 60 }}:{{ '{:0>2d}'.format(ct%60) }} Hours{% else
%}{{ct}} Minutes{% endif %}
secondary: Charge Time
icon: |
{% set state=states(entity) %}
{% if state<='1' %}
mdi:battery
{% elif state>='1' %}
mdi:battery-clock
{% else %}
mdi:battery
{% endif %}
entity: sensor.ev_car_remaining_charging_time
icon_color: |-
{% set state = states(entity) %}
{% if state >= '1' %}
green
{% else %}
grey
{% endif %}
hold_action:
action: none
double_tap_action:
action: none
tap_action:
action: none
fill_container: false
So bascially when the car is charging I would like it display the animation you called battery 2:
type: custom:mushroom-template-card
icon: mdi:battery-high
icon_color: green
primary: 'Batterye #2'
card_mod:
style:
mushroom-shape-icon$: |
ha-icon {
--icon-animation: charge 3s steps(1) infinite;
}
@keyframes charge {
0% { clip-path: polygon(0% 0%, 0% 100%, 34% 100%, 34% 24%, 67% 24%, 67% 84%, 34% 84%, 34% 100%, 100% 100%, 100% 0%); }
20% { clip-path: polygon(0% 0%, 0% 100%, 34% 100%, 34% 24%, 67% 24%, 67% 64%, 34% 64%, 34% 100%, 100% 100%, 100% 0%); }
40% { clip-path: polygon(0% 0%, 0% 100%, 34% 100%, 34% 24%, 67% 24%, 67% 44%, 34% 44%, 34% 100%, 100% 100%, 100% 0%); }
60% { clip-path: polygon(0% 0%, 0% 100%, 34% 100%, 34% 24%, 67% 24%, 67% 24%, 34% 24%, 34% 100%, 100% 100%, 100% 0%); }
}
So any help showing me how to integrate that into my button code would be great! At the moment it displays the battery clock icon in green if the time is greater than 1 minute. I would like it to have the animated battery 2 icon.
How would I change the background color of a vertical-stack card?
This works for a vertical-stack-in-card, but not the vertical-stack…
- type: vertical-stack
style: |
ha-card {
{{ '--ha-card-background: color-mix(in srgb, var(--indigo-color) 10%, var(--card-background-color));'}}
Did you follow my previous post?
2 Likes
vertical-stack and horizontal-stack do not have a ha-card element, so you would need to use mod-card.
type: custom:mod-card
card:
type: vertical-stack
cards:
- type: custom:mushroom-template-card
primary: Mushroom
icon: mdi:mushroom
icon_color: red
- type: custom:mushroom-template-card
primary: Mushroom
icon: mdi:mushroom
icon_color: red
card_mod:
style: |
ha-card {
background: color-mix(in srgb, var(--green-color) 10%, var(--card-background-color));
}
:host {
/* Remove styling from Mushroom Cards */
--ha-card-background: none;
--ha-card-box-shadow: none;
--ha-card-border-width: 0;
}
1 Like
The dimensions of the icon within .content are smaller, so you would need to modify the clip-path to suit.
card_mod:
style: |
.content {
animation: illumination 2s infinite;
}
@keyframes illumination {
0%, 100% { clip-path: inset(0 0 0 0); }
80% { clip-path: polygon(0% 100%, 35% 60%, 35% 43%, 43% 35%, 65% 40%, 70% 75%, 100% 100%); }
}