rhysb
February 22, 2023, 9:57am
5667
This should help.
Mushroom Action Buttons:
type: horizontal-stack
cards:
- type: custom:mushroom-template-card
secondary: House
icon: mdi:home
layout: vertical
icon_color: blue
tap_action:
action: navigate
navigation_path: house
card_mod:
style: |
ha-card {
background: var(--card-background-color) !important;
box-shadow: var(--ha-card-box-shadow) !important;
width: 58px;
--spacing: 8px;
{{ 'padding-bottom: calc(var(--spacing) * 1.618) !important;' if config.secondary != '' }}
border-radius: calc(var(--ha-card-border-radius, 12px) * 2) !important;
margin-left: auto;
margin-right: auto;
}
- type: custom:mushroom-template-card
secondary: ''
icon: mdi:lightbulb
icon_color: amber
layout: vertical
tap_action:
action: navigate
navigation_path: lights
card_mod:
style: |
ha-card {
background: var(--card-background-color) !important;
box-shadow: var(--ha-card-box-shadow) !important;
width: 58px;
--spacing: 8px;
{{ 'padding-bottom: calc(var(--spacing) * 1.618) !important;' if config.secondary != '' }}
border-radius: calc(var(--ha-card-border-radius, 12px) * 2) !important;
margin-left: auto;
margin-right: auto;
}
- type: custom:mushroom-template-card
primary: ''
secondary: Secure
icon: mdi:shield
icon_color: green
layout: vertical
tap_action:
action: navigate
navigation_path: security
card_mod:
style: |
ha-card {
background: var(--card-background-color) !important;
box-shadow: var(--ha-card-box-shadow) !important;
width: 58px;
--spacing: 8px;
{{ 'padding-bottom: calc(var(--spacing) * 1.618) !important;' if config.secondary != '' }}
border-radius: calc(var(--ha-card-border-radius, 12px) * 2) !important;
margin-left: auto;
margin-right: auto;
}
- type: custom:mushroom-template-card
primary: ''
secondary: Media
icon: mdi:speaker
layout: vertical
icon_color: red
tap_action:
action: navigate
navigation_path: media
card_mod:
style: |
ha-card {
background: var(--card-background-color) !important;
box-shadow: var(--ha-card-box-shadow) !important;
width: 58px;
--spacing: 8px;
{{ 'padding-bottom: calc(var(--spacing) * 1.618) !important;' if config.secondary != '' }}
border-radius: calc(var(--ha-card-border-radius, 12px) * 2) !important;
margin-left: auto;
margin-right: auto;
}
- type: custom:mushroom-template-card
secondary: Net
icon: mdi:lan
layout: vertical
icon_color: cyan
tap_action:
action: navigate
navigation_path: net
card_mod:
style: |
ha-card {
background: var(--card-background-color) !important;
box-shadow: var(--ha-card-box-shadow) !important;
width: 58px;
--spacing: 8px;
{{ 'padding-bottom: calc(var(--spacing) * 1.618) !important;' if config.secondary != '' }}
border-radius: calc(var(--ha-card-border-radius, 12px) * 2) !important;
margin-left: auto;
margin-right: auto;
}
You shouldn’t need the stack-in-card and vertical-stacks beneath horizontal-stack.
7 Likes
rhysb
February 22, 2023, 10:05am
5668
You can only use templating (Jinja2) on a Mushroom Template Card or Chip. You can use Templating in card-mod on any Mushroom Card or Chip.
cloudbr34k
February 22, 2023, 12:32pm
5669
Thanks Mate, not quite what i was aiming for, but ill use this design somewhere else tbh
type: custom:stack-in-card
cards:
- type: custom:mushroom-title-card
title: Common Devices
subtitle: null
- type: horizontal-stack
cards:
- type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
primary: ''
secondary: Garage Door
icon: >-
{% set
state=states('binary_sensor.garage_door_garage_door_contact') %}
{% if state=='on' %}
mdi:garage-open
{% elif state=='off' %}
mdi:garage-variant-lock
{% endif %}
entity: cover.garage_door_trigger
icon_color: >-
{% set
state=states('binary_sensor.garage_door_garage_door_contact') %}
{% if state=='on' %}
red
{% elif state=='off' %}
disabled
{% endif %}
tap_action:
action: toggle
layout: vertical
multiline_secondary: true
badge_icon: ''
card_mod: null
style:
mushroom-shape-icon$: |
.shape {
box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.15) !important;
}
card_mod:
style: |
ha-card {
padding: 0px !important;
margin-left: 4px;
margin-top: 0px;
margin-bottom: 8px;
transition: all 0s;
}
:host {
--mush-icon-border-radius: 12px;
}
- type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
primary: ''
secondary: Brads Lamp
icon: |-
{% set state=states('light.master_bedroom_bedside_lamp_brads') %}
{% if state=='on' %}
mdi:lamp
{% elif state=='off' %}
mdi:lamp
{% endif %}
entity: light.master_bedroom_bedside_lamp_brads
icon_color: |-
{% set state=states('light.master_bedroom_bedside_lamp_brads') %}
{% if state=='on' %}
orange
{% elif state=='off' %}
disabled
{% endif %}
tap_action:
action: call-service
service: light.toggle
data:
color_temp: 500
brightness_pct: 10
target:
entity_id: light.master_bedroom_bedside_lamp_brads
layout: vertical
hold_action:
action: more-info
badge_icon: mdi:face-man-profile
multiline_secondary: true
card_mod: null
style:
mushroom-shape-icon$: |
.shape {
box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.15) !important;
}
card_mod:
style: |
ha-card {
padding: 0px !important;
margin-left: 4px;
margin-top: 0px;
margin-bottom: 8px;
transition: all 0s;
}
:host {
--mush-icon-border-radius: 12px;
}
- type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
primary: ''
secondary: Laurens Lamp
icon: >-
{% set state=states('light.master_bedroom_bedside_lamp_laurens')
%}
{% if state=='on' %}
mdi:lamp
{% elif state=='off' %}
mdi:lamp
{% endif %}
entity: light.master_bedroom_bedside_lamp_laurens
icon_color: >-
{% set state=states('light.master_bedroom_bedside_lamp_laurens')
%}
{% if state=='on' %}
orange
{% elif state=='off' %}
disabled
{% endif %}
tap_action:
action: call-service
service: light.toggle
data:
color_temp: 500
brightness_pct: 10
target:
entity_id: light.master_bedroom_bedside_lamp_laurens
layout: vertical
hold_action:
action: more-info
badge_icon: mdi:face-woman-shimmer
multiline_secondary: true
card_mod: null
style:
mushroom-shape-icon$: |
.shape {
box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.15) !important;
}
card_mod:
style: |
ha-card {
padding: 0px !important;
margin-left: 4px;
margin-top: 0px;
margin-bottom: 8px;
transition: all 0s;
}
:host {
--mush-icon-border-radius: 12px;
}
- type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
primary: ''
secondary: Master Zone
icon: |-
{% set state=states('climate.master') %}
{% if state=='heat_cool' %}
mdi:air-conditioner
{% elif state=='off' %}
mdi:air-conditioner
{% endif %}
entity: climate.master
icon_color: |-
{% set state=states('climate.master') %}
{% if state=='heat_cool' %}
blue
{% elif state=='off' %}
disabled
{% endif %}
tap_action:
action: toggle
layout: vertical
badge_icon: mdi:chess-king
multiline_secondary: true
card_mod: null
style:
mushroom-shape-icon$: |
.shape {
box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.15) !important;
}
card_mod:
style: |
ha-card {
padding: 0px !important;
margin-left: 4px;
margin-top: 0px;
margin-bottom: 8px;
transition: all 0s;
}
:host {
--mush-icon-border-radius: 12px;
}
- type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
primary: ''
secondary: Master Fan
icon: |-
{% set state=states('fan.master_bedrom_ceiling_fan') %}
{% if state=='on' %}
mdi:ceiling-fan
{% elif state=='off' %}
mdi:ceiling-fan
{% endif %}
entity: fan.master_bedrom_ceiling_fan
icon_color: |-
{% set state=states('fan.master_bedrom_ceiling_fan') %}
{% if state=='open' %}
green
{% elif state=='closed' %}
disabled
{% endif %}
tap_action:
action: call-service
service: fan.set_percentage
data:
percentage: 66
target:
entity_id: fan.master_bedrom_ceiling_fan
layout: vertical
badge_icon: mdi:chess-king
badge_color: ''
multiline_secondary: true
card_mod: null
style:
mushroom-shape-icon$: |
.shape {
box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.15) !important;
}
card_mod:
style: |
ha-card {
padding: 0px !important;
margin-left: 4px;
margin-top: 0px;
margin-bottom: 8px;
transition: all 0s;
}
:host {
--mush-icon-border-radius: 12px;
}
- type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
primary: ''
secondary: Frontyard Tap
layout: vertical
icon: |-
{% set state=states('switch.frontyard_tap_state') %}
{% if state=='on' %}
mdi:sprinkler
{% elif state=='off' %}
mdi:sprinkler
{% endif %}
entity: switch.frontyard_tap_state
icon_color: |-
{% set state=states('switch.frontyard_tap_state') %}
{% if state=='on' %}
blue
{% elif state=='off' %}
disabled
{% endif %}
badge_icon: ''
badge_color: ''
multiline_secondary: true
tap_action:
action: toggle
hold_action:
action: navigate
navigation_path: /lovelace/pool-and-garden
double_tap_action:
action: more-info
card_mod: null
style:
mushroom-shape-icon$: |
.shape {
box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.15) !important;
}
card_mod:
style: |
ha-card {
padding: 0px !important;
margin-left: 4px;
margin-top: 0px;
margin-bottom: 8px;
transition: all 0s;
}
:host {
--mush-icon-border-radius: 12px;
}
- type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
primary: ''
secondary: iZone Hub
icon: |-
{% set state=states('climate.izone_controller') %}
{% if state=='cool' %}
mdi:hvac
{% elif state=='dry' %}
mdi:hvac
{% elif state=='off' %}
mdi:hvac
{% endif %}
entity: climate.izone_controller
icon_color: |-
{% set state=states('climate.izone_controller') %}
{% if state=='cool' %}
blue
{% elif state=='dry' %}
green
{% elif state=='off' %}
disabled
{% endif %}
tap_action:
action: toggle
layout: vertical
badge_icon: |-
{% set state=states('climate.izone_controller') %}
{% if state=='cool' %}
mdi:snowflake
{% elif state=='dry' %}
mdi:water-percent
{% elif state=='off' %}
mdi:hvac
{% endif %}
badge_color: |-
{% set state=states('climate.izone_controller') %}
{% if state=='cool' %}
blue
{% elif state=='dry' %}
green
{% elif state=='off' %}
disabled
{% endif %}
multiline_secondary: true
card_mod: null
style:
mushroom-shape-icon$: |
.shape {
box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.15) !important;
}
card_mod:
style: |
ha-card {
padding: 0px !important;
margin-left: 4px;
margin-top: 0px;
margin-bottom: 8px;
transition: all 0s;
}
:host {
--mush-icon-border-radius: 12px;
}
- type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
primary: ''
secondary: Pool Heater
icon: |-
{% set state=states('switch.pool_heater_switch') %}
{% if state=='on' %}
mdi:pool-thermometer
{% elif state=='off' %}
mdi:pool-thermometer
{% endif %}
entity: switch.pool_heater_switch
icon_color: |-
{% set state=states('switch.pool_heater_switch') %}
{% if state=='heat' %}
amber
{% elif state=='off' %}
disabled
{% endif %}
tap_action:
action: toggle
layout: vertical
badge_icon: |-
{% set state=states('binary_sensor.zodiac_exo_pool_pump') %}
{% if state=='on' %}
mdi:pump
{% elif state=='off' %}
mdi:pump
{% endif %}
badge_color: |-
{% set state=states('binary_sensor.zodiac_exo_pool_pump') %}
{% if state=='on' %}
green
{% elif state=='off' %}
disabled
{% endif %}
hold_action:
action: navigate
navigation_path: /lovelace/pool-and-garden
multiline_secondary: true
card_mod: null
style:
mushroom-shape-icon$: |
.shape {
box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.15) !important;
}
card_mod:
style: |
ha-card {
padding: 0px !important;
margin-left: px;
margin-top: 0px;
margin-right: 8px;
margin-bottom: 8px;
transition: all 0s;
}
:host {
--mush-icon-border-radius: 12px;
}
card_mod:
style: |
ha-card {
background-color: rgba(159, 212, 166, 0.1);
}
1 Like
Got a question about those rings around the card icon - I’ve been using them with a printer integration to show ink level, works great. I’d like to use the same concept for my ‘person’ cards. These cards are modelled on the Mushroom person card but are actually template cards. When I implement a ring (to indicate the person’s phone battery) the icon background color is different, and I cannot figure out how to get it the same as it would be without the ring:
The correct ‘standard’ icon background color is the one of the left. After applying the ring to the card on the right, the icon background is different. Any ideas what I’m missing?
Code
icon_color: disabled
card_mod:
style:
mushroom-shape-icon$: |
.shape {
background: radial-gradient(var(--card-background-color) 60%, transparent calc(60% + 1px)), conic-gradient(rgb(var(--rgb-{{ config.icon_color }})) {{ states('sensor.xxxx_battery_level') }}% 0%, var(--card-background-color) 0% 100%);
}
.shape:after {
content: "";
height: 100%;
width: 100%;
position: absolute;
border-radius: 50%;
background: rgba(var(--card-background-color),0.1);
}
1 Like
berkans
February 22, 2023, 3:50pm
5671
I am about to finish the new design.
On my previous design, my start page was a modified copy of @Boostin4HP and with the help of @rhysb I have deloped many other pages maybe like 20. In time I have started to share them on my github page. Since I don’t have any coding knowledge before, I learned everything from these pages and I would like to thank everyone for this.
My new design has many features. First of all it has live cards like spotify, birthday, football, what to wear inside home or weather cards. Starting from tomorrow I will share these in here. The new design combines all 22 pages on my previous project into 1. Yes you heard it right, just one single page where you can rule all of your your smart life devices.
Here are the features and some screenshot from my new design.
Live TV. You can watch what is being played on your Android TV and get live images on your screen.
It has a new Spotify card with media player controls.
You can watch all of your cameras.
A new birthday card. If someone has a birthday his image will cover the tile.
A new animated weather screen
A swipe function to control light with color wheel from the top of the screen. A new light tile will show you lights which have “On” State.
A full screen kiosk mode wusage.
Swipe and see your calendar
A new persons card with life image of zones
each room is coded with a unique color.
Music follow buttom which lets music to follow you inside your house
What to wear card. This card will show you the picture of a suitable clothes depending on house temperature
Device controls
Full control of media players
Dark and White theme design
and many more in one single page!!
8 Likes
SteffenDE
February 22, 2023, 4:40pm
5672
Hi,
can you share your code how do you make the Sonos cards (Groups, Grouping, Speakers etc.)?
Thanks, Steffen
amfadten
February 22, 2023, 6:30pm
5673
very good , and nice work
1 Like
Moss
February 22, 2023, 6:35pm
5674
Have I missed anything? Mini-Graph-Card no longer displays anything?
HA_n00b
February 22, 2023, 7:19pm
5675
I am using mushrooms entity card . Is there any way to override the state to remove the unit?
rhysb
February 22, 2023, 7:56pm
5676
The --rgb-[color]-color values were removed from HA. Use var(--green-color) instead. I’ll update the original post.
rhysb
February 22, 2023, 8:00pm
5677
Use a template card instead, then you can specify whatever unit or none.
1 Like
Moss
February 22, 2023, 8:10pm
5678
Thank you for your quick feedback. I have changed it but still nothing is displayed. Even if I take your complete code it does not work.
1 Like
rhysb
February 22, 2023, 8:11pm
5679
The --card-background-color is not RGB, so can’t be used with rgba() in the .shape:after. Try doing this instead:
background: rgba(var(--rgb-disabled), 0.1);
2 Likes
rhysb
February 22, 2023, 8:23pm
5680
That’s strange, just copied it back in and all works fine.
1 Like
Moss
February 23, 2023, 6:57am
5681
Found the error and even if it was my stupid mistake I want to give you feedback. Last week I optimized my database recording at mariadb and excluded these sensors from the recording. No recording, no data, it can be so simple sometimes
2 Likes
arifroni
February 23, 2023, 8:46am
5682
Hello
I want to make a button that should show a value for the sensor (some number) as a notification. It works file with a button card, but when I use mushroom entity card, it doesn’t work. Is it not possible to add styles to the card? in that case can i get the original style section of the “mushroom entity card”? i like how the button looks
opet
February 23, 2023, 5:07pm
5683
Hey. I’ve spent a day going through this and a couple of other threads but can’t seem to find an answer. Is it possible to remap/reassign functions to existing card buttons? I have a media player card which I use for my Sonos system. Instead of the volum button displaying the volume for the current media player, I would like it to expand a list of media players that I have hidden. I hope the image explains it well enough. I just need it to drive an input boolean.
I need to make an animated icon (here I succeeded) and to make a secondary text color blue when I double tapped this card element and switched a third-party entity. Is this possible?
My original card:
type: custom:mushroom-template-card
tap_action:
entity: switch.sonoff_1000
action: more-info
entity: switch.sonoff_1000
layout: vertical
secondary: H-Boiler
icon: mdi:shower-head
icon_color: |-
{% if is_state('switch.sonoff_1000', 'on') %}
red
{% else %}
teal
{% endif %}
card_mod:
style:
mushroom-shape-icon$: |
ha-icon {
{{'--icon-animation: clip 0.7s ease-out infinite;' if is_state(config.entity, 'on')}}
}
@keyframes clip {
0% {clip-path: inset(0 0 45% 0); }
100% { clip-path: inset(0 0 0 0); }
}
works well.
But I need to add a:
double tap action that would activate a third-party switch
make text blue after if a third-party switch is ON.
|
ha-card {
--secondary-text-color: blue;
}
But I cannot make it work together with already card-modded mushroom-shape-icon$:.
rog889
February 23, 2023, 11:50pm
5685
Hi,
How do I make my Mushroom Light cards’s icon colors to follow rest of the dashboard theme?
Apparently, I created 2 extra Mushroom Light cards, but the icon’s “Off” state is greyed out instead of Blue color, and “On” state" is orange color instead of Bright Yellow in my dashboard theme.
Thanks
yanirel
February 24, 2023, 9:59am
5686
can u share please the code for the card under the weather card ? , look amazing !!
3 Likes
