Guys plz help me how can I design the same using mushroom cards.
I am a beginner plz help
Here you go.
Mushroom Light Card with animated icon:
type: custom:mushroom-light-card
entity: light.office_light
show_brightness_control: true
card_mod:
style: |
mushroom-shape-icon {
{% if is_state(config.entity, 'on') %}
--card-mod-icon:
{% set light_level = ((state_attr(config.entity, "brightness") / 255) * 10) | round(0) * 10 %}
{% if light_level == 100 %}
mdi:lightbulb-on
{% elif light_level > 0 %}
mdi:lightbulb-on-{{ light_level }}
{% else %}
mdi:lightbulb-on-outline
{% endif %};
{% else %}
--card-mod-icon: mdi:lightbulb-outline;
{% endif %}
}
15 Likes
Here’s an iOS styled Mushroom Card for you:
type: custom:mushroom-template-card
primary: Apple-ish Mushroom
icon: mdi:apple
icon_color: green
layout: vertical
card_mod:
style:
.: |
mushroom-shape-icon {
display: block;
margin-left: auto;
width: 96px;
}
mushroom-state-info {
text-align: start;
}
ha-card {
width: 120px;
height: 120px;
margin: auto;
}
mushroom-state-item {
height: 96px;
}
mushroom-state-info$: |
.primary {
white-space: normal !important;
overflow: hidden;
}
12 Likes
Icon animation like the radiator.
“icon animation using clip-path”
You are the best Yes, you can do that like this:
Mushroom Chip clip-path animation:
type: custom:mushroom-chips-card
chips:
- type: template
icon: mdi:mushroom
icon_color: red
- type: template
icon: mdi:radiator
icon_color: orange
- type: template
icon: mdi:snail
icon_color: green
card_mod:
style:
mushroom-template-chip:nth-child(2)$: |
ha-icon {
animation: clip 1s linear infinite;
}
@keyframes clip {
0% {
clip-path: inset(50% 0 0 0);
}
100% {
clip-path: inset(0 0 0 0);
}
}
5 Likes
Did you find solution for that?
Great! Thanx alot!
1 Like
You can change the colors used for the Mushroom Alarm Card/Chip by adding these values to you theme:
mush-rgb-red: 244, 67, 54
mush-rgb-green: 76, 175, 80
mush-rgb-yellow: 255, 235, 59
mush-rgb-state-alarm-disarmed: var(--mush-rgb-green)
mush-rgb-state-alarm-armed: var(--mush-rgb-red)
mush-rgb-state-alarm-triggered: var(--mush-rgb-yellow)
Or you can change it using CSS like this:
type: custom:mushroom-alarm-control-panel-card
entity: alarm_control_panel.downstairs
states:
- armed_home
- armed_away
card_mod:
style: |
:host {
--mush-rgb-state-alarm-disarmed: var(--rgb-green);
--mush-rgb-state-alarm-armed: var(--rgb-red);
--mush-rgb-state-alarm-triggered: var(--rgb-yellow);
}
2 Likes
Can you plz guide how can I have the same design with mushroom card. This screenshot is from room-card.
Kindly guide
Great, thank you! Works perfekt!!!
1 Like
Any idea what I’m doing wrong yet with the slider?
Is it possible to get more information by the name or create something like this? now i did used the light card. Can i use an entity bij the name: field?
Hi Can you post the code snipet pls ? newbie here having trouble integrating picture element within the mushroom chip card. thanks again.
Ok sorry to keep bugging you with this, but I have the code working. The fan speed changes as I drag the slider up and down
However if I drag it all the way to 0, it kills it, the animation code won’t work anymore unless I redo the code . Any idea why?
1 Like
Anddd I fixed it. In case anyone has the same
Issue….had to change input_number slider minimum value to 1 instead of 0. 0 broke the code you gave me.
Thanks for the help
1 Like
Yes, you can add text to both the primary and secondary info text. This should work for any Mushroom Card and you can apply separate styling to the text.
Mushroom Card - Before primary text:
type: custom:mushroom-light-card
entity: light.office_light
layout: vertical
card_mod:
style:
mushroom-state-info$: |
.primary:before {
content: "({{ states('sensor.rhys_office_sensor_temperature') | round(1) }} °C / {{ states('sensor.rhys_office_sensor_humidity') | round(1) }} %) ";
color: rgb(var(--rgb-orange));
font-weight: 400;
}
Mushroom Card - After primary text:
type: custom:mushroom-light-card
entity: light.office_light
layout: vertical
card_mod:
style:
mushroom-state-info$: |
.primary:after {
content: " ({{ states('sensor.rhys_office_sensor_temperature') | round(1) }} °C / {{ states('sensor.rhys_office_sensor_humidity') | round(1) }} %)";
color: rgb(var(--rgb-red));
font-weight: 400;
}
Mushroom Card - Before secondary text:
type: custom:mushroom-light-card
entity: light.office_light
layout: vertical
card_mod:
style:
mushroom-state-info$: |
.secondary:before {
content: "({{ states('sensor.rhys_office_sensor_temperature') | round(1) }} °C / {{ states('sensor.rhys_office_sensor_humidity') | round(1) }} %) ";
color: rgb(var(--rgb-blue));
font-weight: 400;
}
Mushroom Card - After secondary text:
type: custom:mushroom-light-card
entity: light.office_light
layout: vertical
card_mod:
style:
mushroom-state-info$: |
.secondary:after {
content: " ({{ states('sensor.rhys_office_sensor_temperature') | round(1) }} °C / {{ states('sensor.rhys_office_sensor_humidity') | round(1) }} %)";
color: rgb(var(--rgb-green));
font-weight: 400;
}
9 Likes
I think you will have to use roomcard for a feature to make this.
I have the same design and I’m also using room-card.
ok thank you for the reply
Mushrrom cards have the text below the icon, but you could try something like this:
type: custom:stack-in-card
mode: horizontal
cards:
- type: custom:mushroom-light-card
entity: light.lounge_light
layout: vertical
secondary_info: none
name: Lounge
- type: custom:mushroom-light-card
entity: light.lounge_cabinet_light
use_light_color: true
layout: vertical
secondary_info: none
name: Cabinet
- type: custom:mushroom-light-card
entity: light.dining_room_light
layout: vertical
secondary_info: none
name: Dining
- type: custom:mushroom-light-card
entity: light.kitchen_light
name: Kitchen
layout: vertical
secondary_info: none
- type: custom:mushroom-light-card
entity: light.kitchen_bench_light
secondary_info: none
layout: vertical
name: Bench
2 Likes