Hello. Ive tried Your sensor and script but its not working:( I canāt get the popup to work. It shows that thereās one device with low power but the popup wonāt open. Are You able to help me?
Thanks in adance!
I asked about that post;)
Thank you very much mate, works like a charm!
" $:" is new for me but I think it speaks for itself and I think I can work with it.
had a little trouble implementing both ha-card: and mushroom-light-brightness-control$: but i got it going. for future reference and people having the same issue, its " .:" :
type: custom:mushroom-light-card
entity: ....
....
card_mod:
style:
.: |
ha-card {
background: rgba(25,25,225,0);
border-color: rgba(225,225,25,0);
}
mushroom-light-brightness-control$: |
mushroom-slider {
--slider-color: rgb(25,16,87);
--slider-bg-color: rgba(30,192,111,1);
--bg-color-inactive: rgba(239,40,11,1);
}
4 Likes
Sorry if this has been explained already, but a search in this topic didnāt provide me any hits. Is there a way to embed mushroom light or entity cards inside a glance card, or reproduce the look of a glance card with mushroom card functionality.
I would like to reproduce this look, but with mushroom light cards in particular.
Hey Guys,
I need help with my mushroom template card. I want to animate my icon AND change the size of the card. what am I doing wrong?
Thanks for the help!
type: custom:mushroom-template-card
primary: ''
icon: |-
{% if is_state('switch.kamin','on') -%}
mdi:fireplace
{%- else -%}
mdi:fireplace-off
{%- endif %}
icon_color: |-
{% if is_state('switch.kamin','on') -%}
orange
{%- else -%}
disabled
{%- endif %}
layout: horizontal
entity: switch.kamin
card_mod:
style: |
:host {
--mush-icon-size: 40px;
}
mushroom-shape-icon$: |
ha-icon {
{{'--icon-animation: fire 1500ms infinite;'if is_state('switch.kamin', 'on') }}
transform-origin: 50% 85%;
}
@keyframes fire {
0%, 19%, 23%, 39%, 43%, 49%, 53%, 69%, 73%, 89%, 93%, 100% { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
20%, 40%, 50%, 70%, 90% { clip-path: polygon(0 0, 100% 0, 100% 100%, 65% 99%, 66% 49%, 52% 44%, 33% 48%, 33% 82%, 66% 82%, 69% 100%, 0 100%); }
}
I found the problemā¦
type: custom:mushroom-template-card
primary: ''
icon: |-
{% if is_state('switch.kamin','on') -%}
mdi:fireplace
{%- else -%}
mdi:fireplace-off
{%- endif %}
icon_color: |-
{% if is_state('switch.kamin','on') -%}
orange
{%- else -%}
disabled
{%- endif %}
layout: horizontal
entity: switch.kamin
card_mod:
style:
.: |
:host {
--mush-icon-size: 70px;
}
mushroom-shape-icon$: |
ha-icon {
{{'--icon-animation: fire 1500ms infinite;'if is_state('switch.kamin', 'on') }}
transform-origin: 50% 85%;
}
@keyframes fire {
0%, 19%, 23%, 39%, 43%, 49%, 53%, 69%, 73%, 89%, 93%, 100% { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
20%, 40%, 50%, 70%, 90% { clip-path: polygon(0 0, 100% 0, 100% 100%, 65% 99%, 66% 49%, 52% 44%, 33% 48%, 33% 82%, 66% 82%, 69% 100%, 0 100%); }
}
Dear Mushroom champions,
How can I create a green border around the entity-picture of a Person Card ?
Preferably Iād love to have 2 versions of the he border line
- simple solid line
- border fading out a bit
Currently, I have this:
Would love this (ignore the lack of the badge, as this is a Chip card, not Person card):
My code:
- type: custom:mushroom-person-card
entity: person.admin
use_entity_picture: true
layout: vertical
fill_container: false
hide_name: true
hide_state: true
badge_icon: none
card_mod:
style:
.: |
ha-card {
--badge-icon-size: 1.0em;
--card-mod-icon:
{% if is_state('person.admin', 'away') %}
mdi:exit-to-app
{% else %}
mdi:home
{% endif %};
}
Only just started on this but I saw a screenshot of the latest Ikea smarthome app and something about it called to me, and it already looks very mushroomy so I thought iād have a go at implementing it in ha/mushroom myself. Quite like the look so far.
8 Likes
You can add a border or box-shadow to the avatar like this.
Mushroom Person Avatar Border:
type: custom:mushroom-person-card
entity: person.rhys
icon_type: entity-picture
card_mod:
style:
mushroom-shape-avatar$: |
.picture {
border: solid 2px
{% set state = states(config.entity) %}
{% if state == 'home' %}
rgba(var(--rgb-state-person-home), 0.6);
{% elif state == 'not_home' %}
rgba(var(--rgb-state-person-not-home), 0.6);
{% elif state == 'unknown' %}
rgba(var(--rgb-state-person-unknown), 0.6);
{% else %}
rgba(var(--rgb-state-person-zone), 0.6);
{% endif %};
}
Mushroom Person Avatar Box-Shadow:
type: custom:mushroom-person-card
entity: person.rhys
icon_type: entity-picture
card_mod:
style:
mushroom-shape-avatar$: |
.picture {
box-shadow: 0px 0px 4px 2px
{% set state = states(config.entity) %}
{% if state == 'home' %}
rgba(var(--rgb-state-person-home), 0.6);
{% elif state == 'not_home' %}
rgba(var(--rgb-state-person-not-home), 0.6);
{% elif state == 'unknown' %}
rgba(var(--rgb-state-person-unknown), 0.6);
{% else %}
rgba(var(--rgb-state-person-zone), 0.6);
{% endif %};
}
7 Likes
Shall i have install special card or something? Ive tried with many ways and still isnt working:/
You will need to have browser-mod, card-mod, auto-entities and layout-card installed. You can install them all via HACS.
You can create a simple Mushroom Glance Card like this.
Mushroom Glance Card:
type: custom:vertical-stack-in-card
cards:
- type: custom:mushroom-title-card
subtitle: Kitchen
- type: horizontal-stack
cards:
- type: custom:mushroom-light-card
entity: light.kitchen_light
name: Light
layout: vertical
- type: custom:mushroom-light-card
entity: light.kitchen_bench_light
name: Bench Light
layout: vertical
- type: custom:mushroom-entity-card
entity: switch.coffee_machine
layout: vertical
- type: custom:mushroom-entity-card
entity: switch.grinder
layout: vertical
6 Likes
Thank You for reply.
I will check if i have them all installed;)
2 Likes
How is everyone breaking up their dashboards?
are you going by a category ie Home, climate, lighting, room
or are you going by rooms?? If i were to break each room down i would have close 25 rooms, but im condensed it down to 18
I have also ended up being able to connect alot of devices etc toi HA, monitor alot of appliances so im "still trying to figure out the best design. It would be great if ppl were to share some of there designs, layouts to get an idea. Even trying to figure out what goes on my homepage dashboard has me going around in circles lol
First ive created rooms, and then ive adding sensors to each room etc:)
1 Like
I have 4 viewsā¦Music which is the only one my wife cares about, lights, general sensors, home security. Most of my rooms only have lights, so it doesnāt make much sense to be broken up by rooms in my application.
I have, humidity, temperature, energy monitoring, AC tv, lights for nearly every room ā¦
Using this for youtube music, not spotify but can you share the script files, please? I wanna see if I can use this card too. Thanks.
where exactly do i wirte this? I have my dashboard complete but I am unsure of where to the card mod theme
Iāve just created a new card using a bunch of mushroomās 
and changed the tap_action for the covers to more-info, however when I tap on the icon nothing happens at all.
I donāt know if this is something wrong with my card config or a bugā¦
Card Code
type: custom:stack-in-card
cards:
- type: horizontal-stack
cards:
- type: custom:mushroom-title-card
title: Lounge
subtitle: '{{ states(''sensor.lounge_multisensor_air_temperature'')|float(0)}}Ā°C'
alignment: start
- type: custom:mushroom-entity-card
entity: binary_sensor.paradox_z4_lounge_pir
primary_info: state
secondary_info: last-changed
fill_container: true
- type: horizontal-stack
cards:
- type: custom:mushroom-light-card
entity: light.lounge_downlights
name: Downlights
layout: vertical
- type: custom:mushroom-light-card
entity: light.sliced_wood_lamp
name: Wood Lamp
layout: vertical
- type: custom:mushroom-cover-card
entity: cover.lounge_west_roller_shutter
name: West
layout: vertical
tap_action: more-info
- type: custom:mushroom-cover-card
entity: cover.lounge_centre_roller_shutter
name: Centre
layout: vertical
tap_action: more-info
- type: custom:mushroom-cover-card
entity: cover.lounge_east_roller_shutter
name: East
layout: vertical
tap_action: more-info
As a side note, how would I modify the code so the names of the first two light entities arenāt cut off due to being too long?
1 Like
It goes in your theme file. You are probably using the default one, so you will need to create one.