Damn…
I really wanted something like this:
tap_action:
action: |-
{% if user == ‘Tim C’ %}
toggle
{% else %}
none
{% endif %}
You cant do it that way. but you could just use a conditional card to display 2 different cards.
so like this:
type: conditional
conditions:
- condition: user
users:
- 4909f44e9b9a4e4c9ec1181ad9447653
card:
type: custom:mushroom-template-card
primary: Hello, {{user}}
secondary: How are you?
icon: mdi:home
tap_action:
action: toggle
then have another under it for the other user:
type: conditional
conditions:
- condition: user
users:
- 36a60d7c11b64dc6bd7eff5324487c79
card:
type: custom:mushroom-template-card
primary: Hello, {{user}}
secondary: How are you?
icon: mdi:home
tap_action:
action: none
Then each user will only have 1 card show up, but it will do different things based on the user.
{% if states('binary_sensor.bureau_bewegingsmelder_occupancy') == 'on' %}
ha-state-icon::before {
icon: mdi:eye-circle-outline;
position: absolute;
font-family: 'Material Icons';
top: -11%;
left: -11%;
display: flex;
justify-content: center;
align-items: center;
width: 15px;
height: 15px;
font-size: 11px;
background: rgba(var(--rgb-amber), 0.5);
color: rgba(var(--rgb-amber), 1);
border-radius: 50%;
animation: blink 1s linear infinite;
}
{% endif %}
cant I use the “icon: mdi:eye-circle-outline;” ? because it is not working. If I use ```
content: ‘directions_walk’;
You need to install the Material Icons font for this to work.
then you can search for an icon and use the name from the android section:
you also need to declare it as content: 'mystery'; you cant just declare icon: mdi:something; icon is not CSS so it will have no idea what this is.
you also dont have access to all icons like you do with mdi. but the selection is still quite large.
1 Like
Hi all,
Please have a look at my stack-in-card:
The problem is that my shutter card (blue one) is not fitting in my card
Is there a way to:
- Make the graph smaller so that all icons fit in the card
- or get my icons closer to each other so that they fit in the card
- or is it the badge of my temp (right upper corner) that makes my icon of lamp start further ?
Anyone can help to make this a little bit more beautifull ?
Thanks a lot !
Kr,
Bart
Maybe ask this question in the strategy thread 
or i am sure this question has already been asked there too
Please post your code. i think i can solve this one pretty easily, but i need to see the code
like this ?
resources:
[
{ url: https://fonts.googleapis.com/icon?family=Material+Icons, type: css },
]
in my config.yaml ?
No. have a read of the first link i sent you. he explains where to add the link. doesnt have to be done in code can be done from the UI.
but to make it steps for you.
go to your settings, then dashboards, the 3 dot menu in the top right, click resources, then click the add resource button, and paste in the link provided in the post. remember to select stylesheet, before then clicking create.
I use it in yaml mode, so I only can add it in my config yaml
No… you can add resouces for all dasboards to use without going into yaml at all. follow the directions i gave you.
- go to your settings.
- click dasboards.
- click on the 3 dot menu. click on resources.
- click the add resource button.
- fill in the details and click create.
i did it like this
but thanks for helping me out.
Ok, ive read up on yaml only mode. honestly didnt even know that was a thing, but fair enough.
suggest that you maybe note something like that and explain your setup in the initial question going forward though
Have a look at the wiki
If you need more help, create a post in the discussion and someone would be glad to help
ref. code below.
Which color variable should I use in order for the “box-shadow” animation part to replicate the same color as the icon (some kind of red on heat, blue on cool, etc.)
“var(–paper-item-icon-active-color)” doesn’t seem to work.
Thx
type: custom:mushroom-climate-card
entity: climate.2e_ac
icon: mdi:air-conditioner
fill_container: false
show_temperature_control: true
collapsible_controls: true
layout: horizontal
card_mod:
style:
mushroom-shape-icon$: |
.shape {
{% if is_state(config.entity, "cool") or is_state(config.entity, "heat") %}
--shape-animation: ping 1.5s infinite, blink 1.5s ease-in-out infinite;
{% endif %}
}
@keyframes ping {
0% { box-shadow: 0 0 0 0 var(--paper-item-icon-active-color); }
100% { box-shadow: 0 0 5px 15px transparent; }
}
@keyframes blink {
100% {opacity: 1;}
}
.: |
ha-card {
border: none;
Dont know the exact color used for cooling as i dont have a climate entity with cooling. But i would do it something like this:
type: custom:mushroom-climate-card
entity: climate.bedroom_heating
icon: mdi:air-conditioner
fill_container: false
show_temperature_control: true
collapsible_controls: true
layout: horizontal
card_mod:
style:
mushroom-shape-icon$: >
.shape {
{% if is_state(config.entity, "heat") %}
--shape-animation: pingheat 1.5s infinite;
{% elif is_state(config.entity, "cool") %}
--shape-animation: pingcool 1.5s infinite;
{% endif %}
}
@keyframes pingheat {
0% { box-shadow: 0 0 0 0 rgba(var(--rgb-deep-orange),1); }
100% { box-shadow: 0 0 5px 15px transparent; }
}
@keyframes pingcool {
0% { box-shadow: 0 0 0 0 rgba(var(--rgb-blue),1); }
100% { box-shadow: 0 0 5px 15px transparent; }
}
.: |
ha-card {
border: none;
}
Hi @dimitri.landerloos ,
Good to hear from you again. Please find below the code:
- type: custom:stack-in-card
mode: horizontal
cards:
- type: custom:stack-in-card
card_mod:
style: |
ha-card {
border: none !important;
--ha-card-border-width: 0;
border: none !important;
box-shadow: none !important;
}
cards:
- type: custom:mushroom-template-card
primary: Livingroom
icon: mdi:sofa-outline
badge_icon: >
{% if states('sensor.hue_motion_sensor_2_temperature_2') |
float > 16 %}
mdi:check
{% elif states('sensor.hue_motion_sensor_2_temperature_2')
| float < 16 %}
mdi:exclamation-thick
{% else %}
mdi:adjust
{% endif %}
badge_color: >
{% if states('sensor.hue_motion_sensor_2_temperature_2') |
float > 16 %}
green
{% elif states('sensor.hue_motion_sensor_2_temperature_2')
| float < 16 %}
red
{% else %}
green
{% endif %}
tap_action:
action: navigate
navigation_path: null
icon_color: cyan
multiline_secondary: true
card_mod:
style:
style: |
ha-card {
--ha-card-background: none;
--ha-card-box-shadow: none;
--ha-card-border-width: 0;
border: none !important;
box-shadow: none !important;
z-index: 1;
}
:host {
--mush-icon-border-radius: 12px;
border: none !important;
box-shadow: none !important;
}
mushroom-shape-icon$: |
.shape:after {
content: "{{ states(config.entity, 'temperature')|replace('.', ',') }}°";
font-size: 14px;
font-weight: bolder;
color: white;
position: absolute;
border: none !important;
box-shadow: none !important;
}
.shape {
{% set mode = states(config.entity, 'temperature') %}
--shape-color: rgba(var(--rgb-
{%- if mode > '0' -%}
orange
{%- elif mode < '0' -%}
grey
{%- else -%}
grey
{% endif %}));
}
mushroom-state-info$: |
.primary:after {
content: " ";
color: rgb(var(--card-background-color));
font-style: bold;
font-size: 10px
}
.: >
{% set temperature =
states('sensor.hue_motion_sensor_2_temperature_2') |
float %}
{% if temperature < 16 %}
mushroom-badge-icon {
animation: pulse 1s infinite;
}
@keyframes pulse {
50% { opacity: 0;}
}
{% endif %}
- type: custom:mini-graph-card
entities:
- entity: sensor.hue_motion_sensor_2_temperature_2
name: null
hours_to_show: 18
line_width: 2
font_size: 30
points_per_hour: 2
animate: true
show:
name: false
icon: false
state: false
legend: false
fill: fade
color: orange
card_mod:
style: |
ha-card {
position: absolute !important;
height: 100%;
width: 100%;
top: 0px;
--ha-card-border-width: 0;
border: none !important;
box-shadow: none !important;
}
ha-card:after {
content: "";
position: absolute;
width: 100%;
height: 100%;
background: linear-gradient(to right, var(--card-background-color) 25%, transparent);
}
- type: horizontal-stack
cards:
- type: custom:mushroom-template-card
entity: sensor.hue_motion_sensor_2_temperature_2
icon: none
badge_icon: >
{% if states('sensor.hue_motion_sensor_2_temperature_2') |
float > 16 %}
mdi:check
{% elif states('sensor.hue_motion_sensor_2_temperature_2')
| float < 16 %}
mdi:exclamation-thick
{% else %}
mdi:adjust
{% endif %}
badge_color: >
{% if states('sensor.hue_motion_sensor_2_temperature_2') |
float > 16 %}
blue
{% elif states('sensor.hue_motion_sensor_2_temperature_2')
| float < 16 %}
red
{% else %}
green
{% endif %}
primary_info: none
secondary_info: none
layout: horizontal
tap_action:
action: more-info
card_mod:
style:
style: |
ha-card {
border: none !important;
box-shadow: none !important;
mushroom-shape-icon$: |
.shape:after {
content: "{{ states(config.entity, 'temperature')|replace('.', ',') }}°";
font-size: 14px;
font-weight: bolder;
color: white;
position: absolute;
border: none !important;
box-shadow: none !important;
}
.shape {
{% set mode = states(config.entity, 'temperature') %}
--shape-color: rgba(var(--rgb-
{%- if mode > '0' -%}
orange
{%- elif mode < '0' -%}
grey
{%- else -%}
grey
{% endif %}));
}
mushroom-state-info$: |
.primary:after {
content: "{{ states('sensor.hue_motion_sensor_2_temperature_2') }}";
color: rgb(var(--card-background-color));
font-style: bold;
font-size: 10px
}
.: >
{% set temperature =
states('sensor.hue_motion_sensor_2_temperature_2') |
float %}
{% if temperature < 16 %}
mushroom-badge-icon {
animation: pulse 1s infinite;
}
@keyframes pulse {
50% { opacity: 0;}
}
{% else %} mushroom-badge-icon:after {
content: "{{ states('sensor.hue_motion_sensor_2_temperature_2') }}";
position: absolute;
display: flex;
justify-content: center;
align-items: center;
background: rgb(var(--rgb-green));
color: rgb(var(--rgb-white));
border-radius: 50%;
border-width: 0;
top: 0;
width: 100%;
height: 100%;
font-size: 0.7em;
} ha-card {
border: none !important;
} {% endif %}
- type: custom:mushroom-template-card
primary: null
icon: mdi:lightbulb
icon_color: >-
{%if expand(area_entities('woonkamer')) | selectattr (
'domain' , 'eq' , 'light' ) | selectattr ( 'state' , 'eq'
, 'on' ) | list | count > 0 %} amber {% else %} grey {%
endif %}
entity: group.living_lights
badge_icon: none
tap_action:
action: more-info
badge_color: transparent
card_mod:
style: |
mushroom-badge-icon:after {
content: "{{ expand(area_entities('woonkamer')) | selectattr ( 'domain' , 'eq' , 'light' ) | selectattr ( 'state' , 'eq' , 'on' ) | list | count}}";
position: absolute;
display: flex;
justify-content: center;
align-items: center;
background: rgb(var(--rgb-orange));
color: var(--card-background-color);
border-radius: 50%;
top: 0;
width: 100%;
height: 100%;
font-size: 0.7em;
}
ha-card {
--ha-card-border-width: 0;
border: none !important;
box-shadow: none !important;
}
- type: custom:mushroom-template-card
primary: null
icon: mdi:monitor
icon_color: '{{ ''green'' if is_state(entity,''on'') else ''red'' }}'
entity: switch.smart_plug_8
card_mod:
style: |
ha-state-icon::before {
content: "";
position: absolute;
width: 40%;
height: 30%;
margin: 6%;
{% if states('sensor.power_26') | float > 200 %}
animation: refresh 300ms linear infinite;
{% endif %}
}
ha-card {
--ha-card-border-width: 0;
border: none !important;
box-shadow: none !important;
}
@keyframes refresh {
0% { background: linear-gradient(180deg, rgba(var(--rgb-green), 0.2) 0%, transparent 50%, transparent 100%); }
25% { background: linear-gradient(180deg, transparent 0%, rgba(var(--rgb-green), 0.2) 25%, transparent 100%); }
50% { background: linear-gradient(180deg, transparent 0%, rgba(var(--rgb-green), 0.2) 50%, transparent 100%); }
75% { background: linear-gradient(180deg, transparent 0%, rgba(var(--rgb-green), 0.2) 75%, transparent 100%); }
100% { background: linear-gradient(180deg, transparent 0%, transparent 50%, rgba(var(--rgb-green), 0.2) 100%); }
}
tap_action:
action: toggle
- type: custom:mushroom-template-card
primary: null
icon: >-
{{ 'mdi:curtains' if is_state(entity, 'open') else
'mdi:curtains-closed' }}
icon_color: '{{ ''blue'' if is_state(entity,''open'') else ''green'' }}'
entity: group.living_covers
badge_icon: none
badge_color: transparent
card_mod:
style: |
mushroom-badge-icon:after {
position: absolute;
display: flex;
justify-content: center;
align-items: center;
background: rgb(var(--rgb-orange));
color: var(--card-background-color);
border-radius: 50%;
top: 0;
width: 100%;
height: 100%;
font-size: 0.8em;
}
ha-card {
--ha-card-border-width: 0;
border: none !important;
box-shadow: none !important;
}
- type: custom:mushroom-template-card
primary: null
icon: >-
{{ 'mdi:window-shutter-open' if is_state(entity, 'open')
else 'mdi:window-shutter' }}
icon_color: '{{ ''blue'' if is_state(entity,''open'') else ''green'' }}'
entity: cover.roller_shutter_3
badge_icon: none
badge_color: transparent
card_mod:
style: |
mushroom-badge-icon:after {
position: absolute;
display: flex;
justify-content: center;
align-items: center;
background: rgb(var(--rgb-orange));
color: var(--card-background-color);
border-radius: 50%;
top: 0;
width: 100%;
height: 100%;
font-size: 0.8em;
}
ha-card {
--ha-card-border-width: 0;
border: none !important;
box-shadow: none !important;
}
Many thanks to the author!
I learned a lot!
I want to share my solutions
Maybe someone will be interested in this)
type: custom:stack-in-card
cards:
- type: custom:mushroom-chips-card
alignment: center
chips:
- type: menu
- type: template
icon: mdi:cog
icon_color: cyan
card_mod:
style: |
ha-card {
animation: rotation 3s linear infinite;
}
@keyframes rotation {
100% {
transform: rotate(360deg);
}
}
- type: template
icon: mdi:restart
icon_color: green
tap_action:
confirmation:
text: Reboot server?
action: call-service
service: homeassistant.restart
service_data:
transition: 5
target:
entity_id: scene.idle
card_mod:
style: |
ha-card {
animation: reset 1.5s infinite;
}
@keyframes reset {
100% {
transform: rotate(360deg);
}
}
- type: template
icon: mdi:power-standby
icon_color: red
hold_action:
action: none
tap_action:
confirmation:
text: Shut down server?
action: call-service
service: homeassistant.stop
service_data: {}
target: {}
card_mod:
style: |
ha-card {
animation: power 1.5s infinite;
}
.shape {
--shape-color: none;
}
@keyframes power {
0%, 100% { clip-path: inset(0 0 0 0); }
50% { clip-path: polygon(0 0, 42% 0, 42% 58%, 58% 58%, 58% 0, 100% 0, 100% 100%, 0 100%); }
}
- type: alarm-control-panel
entity: alarm_control_panel.alarm_ed
content_info: none
icon: mdi:shield-home-outline
- type: template
entity: light.ves_svet
icon: mdi:lightbulb-group-outline
icon_color: yellow
content_info: none
tap_action:
action: call-service
confirmation:
text: Turn off all the lights?
service: script.all_light_off
card_mod:
style: |
ha-card {
animation: ping 1.5s infinite, blink 1.5s ease-in-out infinite;
}
@keyframes blink {
100% {opacity: 0;}
}
}
- type: entity
entity: sensor.total_load
icon_color: red
card_mod:
style: |
ha-card {
position: relative;
overflow: hidden;
}
ha-card::before {
content: "";
info_color: red;
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
box-shadow: 0 0 5px red, 0 0 10px red, 0 0 15px red;
animation: runningFire 2s linear infinite;
}
@keyframes runningFire {
0% {
transform: translate(0, 0);
}
100% {
transform: translate(0, 100%);
}
}
6 Likes
Hello Dimitri…
I’m using this card, but don’t show badge_icon… could you help me?
type: custom:stack-in-card
mode: horizontal
cards:
- type: custom:stack-in-card
card_mod:
style: |
ha-card {
--ha-card-background: none;
--ha-card-box-shadow: none;
--ha-card-border-width: 0;
}
cards:
- type: custom:mushroom-template-card
primary: Sala
icon: mdi:sofa
tap_action:
action: navigate
navigation_path: /lovelace/2
icon_color: |-
{% if is_state('light.luci_sala', 'on') %}
yellow
{% endif %}
badge_icon: mdi:video
badge_color: |-
{% if is_state('camera.192_168_178_195', 'streaming') %}
red
{% endif %}
grey
multiline_secondary: true
card_mod:
style: |
ha-card {
--ha-card-background: none;
--ha-card-box-shadow: none;
--ha-card-border-width: 0;
z-index: 1;
}
:host {
--mush-icon-border-radius: 12px;
}
- type: custom:mini-graph-card
entities:
- entity: climate.calorifero_sala
attribute: current_temperature
name: null
hours_to_show: 24
line_width: 3
font_size: 50
points_per_hour: 2
animate: true
show:
name: false
icon: false
state: false
legend: false
fill: fade
color: yellow
card_mod:
style: |
ha-card {
position: absolute !important;
height: 100%;
width: 100%;
top: 0px;
--ha-card-border-width: 0;
}
ha-card:after {
content: "";
position: absolute;
width: 100%;
height: 100%;
background: linear-gradient(to right, var(--card-background-color) 25%, transparent);
}
- type: horizontal-stack
cards:
- type: custom:mushroom-climate-card
entity: climate.calorifero_sala
icon: none
show_temperature_control: false
primary_info: null
secondary_info: null
layout: horizontal
tap_action:
action: more-info
card_mod:
style:
mushroom-shape-icon$: |
.shape:after {
content: "{{ state_attr(config.entity, 'current_temperature')|replace('.', ',') }}°";
font-size: 14px;
font-weight: bolder;
color: white;
position: absolute;
}
.shape {
{% set mode = state_attr(config.entity, 'hvac_action') %}
--shape-color: rgba(var(--rgb-
{%- if mode == 'heating' -%}
orange
{%- elif mode == 'cooling' -%}
blue
{%- else -%}
grey
{% endif %}));
}
mushroom-badge-icon$: |
.badge {
{{ 'display: none !important;' if state_attr(config.entity, 'hvac_action') == 'idle' }}
}
.: |
mushroom-badge-icon:after {
content: "{{ states('climate.calorifero_sala') }}";
position: absolute;
display: flex;
justify-content: center;
align-items: center;
background: rgb(var(--rgb-green));
color: rgb(var(--rgb-white));
border-radius: 50%;
border-width: 0;
top: 0;
width: 100%;
height: 100%;
font-size: 0.7em;
}
ha-card {
border: none !important;
}
- type: custom:mushroom-template-card
primary: null
icon: mdi:lightbulb
icon_color: |-
{% if is_state('light.luci_sala', 'on') %}
amber
{% endif %}
entity: light.luci_sala
badge_icon: none
badge_color: transparent
card_mod:
style: |
mushroom-badge-icon:after {
content: "{{ expand(states.light.luci_sala) | selectattr( 'state', 'eq', 'on') | list | count }}";
position: absolute;
display: flex;
justify-content: center;
align-items: center;
background: rgb(var(--rgb-orange));
color: var(--card-background-color);
border-radius: 50%;
top: 0;
width: 100%;
height: 100%;
font-size: 0.8em;
}
ha-card {
--ha-card-border-width: 0;
}
- type: custom:mushroom-template-card
primary: null
icon: mdi:window-shutter-open
icon_color: >-
{%if expand(area_entities('soggiorno')) | selectattr ( 'domain' ,
'eq' , 'cover' ) | selectattr ( 'state' , 'eq' , 'open' ) | list |
count > 0 %} blue {% else %} grey {% endif %}
entity: cover.tapparelle_sala
badge_icon: none
badge_color: transparent
card_mod:
style: |
mushroom-badge-icon:after {
content: "{{ expand(area_entities('soggiorno')) | selectattr ( 'domain' , 'eq' , 'cover' ) | selectattr ( 'state' , 'eq' , 'open' ) | list | count}}";
position: absolute;
display: flex;
justify-content: center;
align-items: center;
background: rgb(var(--rgb-orange));
color: var(--card-background-color);
border-radius: 50%;
top: 0;
width: 100%;
height: 100%;
font-size: 0.8em;
}
ha-card {
--ha-card-border-width: 0;
}
1 Like