Hi all. beautiful project.
I don’t understand why you use code if this project if called “beautiful dashboard easily”. why isn’t it only via GUI?
I don’t speak english very well. Sorry for my poor english.
Thank you
I think I found part of the answer. From the chip’s tap action I can open a view to the Lovelace home feed card which lists the notifications/events found.
Question is how do I get the notifications, e.g. battery critical, door unlocked etc. into the card. and secondly counting these events so the number can be shown on the dashboard. Will have to be a dynamic list that gets built… Wonder if someone has some code snippets I could start from
Can someone please help me with cache issue. I clear the cache and all is fine. But then my last several udpates revert back. I hit refresh on my broswer or pull down to refresh on my phone and all is fine but then it happens again. I even tried a new computer and new browser and problem remains
Here are the three examples I’m having trouble with. Before and after pictures.
Yes, you can change the shape color like this:
type: custom:mushroom-entity-card
entity: weather.weatherflow_day_based_forecast
name: Daily Forcast
icon_color: light-blue
card_mod:
style: |
mushroom-shape-icon {
--mush-rgb-amber: 255, 193, 7;
--shape-color: rgba(var(--mush-rgb-amber), 0.2) !important;
}
1 Like
Have a look here:
1 Like
Is this the sort of thing you wanted?
Mushroom Hourly Weather Card:
type: custom:stack-in-card
cards:
- type: custom:layout-card
layout_type: custom:grid-layout
layout:
grid-template-columns: 66px auto
margin: '-4px -4px -12px -4px;'
cards:
- type: custom:mushroom-entity-card
entity: weather.weatherflow_hourly_based_forecast
icon_color: blue
card_mod:
style: |
ha-card {
background: none;
--ha-card-box-shadow: 0px;
}
- type: custom:hourly-weather
entity: weather.weatherflow_hourly_based_forecast
icons: false
label_spacing: '2'
num_segments: '12'
name: ' '
card_mod:
style:
weather-bar$: |
.main {
--mush-rgb-red: 244, 67, 54;
--mush-rgb-pink: 233, 30, 99;
--mush-rgb-purple: 156, 39, 176;
--mush-rgb-deep-purple: 103, 58, 183;
--mush-rgb-indigo: 63, 81, 181;
--mush-rgb-blue: 33, 150, 243;
--mush-rgb-light-blue: 3, 169, 244;
--mush-rgb-cyan: 0, 188, 212;
--mush-rgb-teal: 0, 150, 136;
--mush-rgb-green: 76, 175, 80;
--mush-rgb-light-green: 139, 195, 74;
--mush-rgb-lime: 205, 220, 57;
--mush-rgb-yellow: 255, 235, 59;
--mush-rgb-amber: 255, 193, 7;
--mush-rgb-orange: 255, 152, 0;
--mush-rgb-deep-orange: 255, 87, 34;
--mush-rgb-brown: 121, 85, 72;
--mush-rgb-grey: 158, 158, 158;
--mush-rgb-blue-grey: 96, 125, 139;
--mush-rgb-black: 0, 0, 0;
--mush-rgb-white: 255, 255, 255;
--color-clear-night: rgba(var(--mush-rgb-black), 0.2) !important;
--color-cloudy: rgba(var(--mush-rgb-grey), 0.2) !important;
--color-fog: var(--color-cloudy);
--color-hail: rgba(var(--mush-rgb-blue), 0.2) !important;
--color-lightning: var(--color-rainy);
--color-lightning-rainy: var(--color-rainy);
--color-partlycloudy: rgba(var(--mush-rgb-light-blue), 0.2) !important;
--color-pouring: var(--color-rainy);
--color-rainy: rgba(var(--mush-rgb-blue), 0.2) !important;
--color-snowy: rgba(var(--mush-rgb-white), 0.2) !important;
--color-snowy-rainy: var(--color-partlycloudy);
--color-sunny: rgba(var(--mush-rgb-yellow), 0.2) !important;
--color-windy: var(--color-sunny);
--color-windy-variant: var(--color-sunny);
--color-exceptional: rgba(var(--mush-rgb-amber), 0.2) !important;
}
.bar > div {
height: 42px !important;
}
.bar > div:first-child {
border-top-left-radius: 12px !important;
border-bottom-left-radius: 12px !important;
}
.bar > div:last-child {
border-top-right-radius: 12px !important;
border-bottom-right-radius: 12px !important;
}
.bar > div > span {
text-shadow: none !important;
color: rgb(var(--primary-text-color));
font-size: 14px;
font-weight: bold;
}
.axes > div > .bar-block-bottom > .hour {
font-size: 12px;
font-weight: bolder;
}
.axes > div > .bar-block-bottom > .temperature {
font-size: 12px;
font-weight: bolder;
}
.: |
ha-card {
background: none;
--ha-card-box-shadow: 0px;
margin: -8px -4px -4px -16px;
}
19 Likes
Awesome, thanks alot for the help!
Only thing is that I am not able to include the if statement for this, not sure what goes wrong though. Any tips how to solve this? I tried the following with your code:
card_mod:
style: |
{% if is_state('sensor.openweathermap_condition', 'sunny') %}
mushroom-shape-icon {
--mush-rgb-amber: 255, 193, 7;
--shape-color: rgba(var(--mush-rgb-amber), 0.2) !important;
}
{% endif %}
1 Like
Try like this:
--primary-text-color:
{% if not is_state('input_boolean.news_chip_fenerbahce', 'off') or not is_state('input_boolean.fenerbahce', 'off') %}
rgb(var(--rgb-amber))
{% else %}
rgb(var(--rgb-white))
{% endif %};
2 Likes
This should get you started:
type: custom:mushroom-entity-card
entity: weather.weatherflow_hourly_based_forecast
name: Current Weather Conditions
card_mod:
style: |
mushroom-shape-icon {
--mush-rgb-red: 244, 67, 54;
--mush-rgb-pink: 233, 30, 99;
--mush-rgb-purple: 156, 39, 176;
--mush-rgb-deep-purple: 103, 58, 183;
--mush-rgb-indigo: 63, 81, 181;
--mush-rgb-blue: 33, 150, 243;
--mush-rgb-light-blue: 3, 169, 244;
--mush-rgb-cyan: 0, 188, 212;
--mush-rgb-teal: 0, 150, 136;
--mush-rgb-green: 76, 175, 80;
--mush-rgb-light-green: 139, 195, 74;
--mush-rgb-lime: 205, 220, 57;
--mush-rgb-yellow: 255, 235, 59;
--mush-rgb-amber: 255, 193, 7;
--mush-rgb-orange: 255, 152, 0;
--mush-rgb-deep-orange: 255, 87, 34;
--mush-rgb-brown: 121, 85, 72;
--mush-rgb-grey: 158, 158, 158;
--mush-rgb-blue-grey: 96, 125, 139;
--mush-rgb-black: 0, 0, 0;
--mush-rgb-white: 255, 255, 255;
--shape-color:
{% set condition = states(config.entity) %}
{% if condition == 'sunny' %}
rgba(var(--mush-rgb-amber), 0.2)
{% elif condition == 'partlycloudy' %}
rgba(var(--mush-rgb-grey), 0.2)
{% else %}
rgba(var(--mush-rgb-blue), 0.2)
{% endif %} !important;
}
2 Likes
mine has broken this season! 
Thank you. I have one more for the ourgroceries card. I want to get rid of these damn plus signs or at least change the icon.
When I do the inspect on it it comes up as ha-icon and ha-svg-icon. Nothing I try is working
That is beautiful thank you.
1 Like
Hi,
this is my code but i don’t see background image. Can you help me please?
type: custom:stack-in-card
cards:
- type: custom:mushroom-media-player-card
entity: media_player.spotify
volume_controls:
- volume_mute
- volume_set
use_media_info: true
show_volume_level: false
media_controls:
- previous
- play_pause_stop
- next
collapsible_controls: false
fill_container: false
layout: vertical
name: Musica
icon_type: entity-picture
card_mod:
style: |
ha-card {
{% if is_state('media_player.spotify', 'off') %}
{% else %}
background-image: url( '{{ state_attr( "media_player.spotify", "entity_picture" ) }}' );
background-position: center;
background-repeat: no-repeat;
background-size: cover;
background-color: rgba(var(--rgb-card-background-color), 0.5);
background-blend-mode: overlay;
position: relative;
{% endif %}
}
- type: custom:mushroom-chips-card
chips:
- type: template
icon_color: |2-
{% set state=states('media_player.marantz_sala') %}
{% if state=='playing' %}
green
{% else %}
{% endif %}
entity: media_player.soggiorno_google_home
icon: mdi:speaker-multiple
content: Marantz
- type: template
icon_color: |2-
{% set state=states('media_player.marantz_sala_zone2') %}
{% if state=='playing' %}
green
{% else %}
{% endif %}
entity: media_player.soggiorno_google_home
icon: mdi:speaker-wireless
content: Esterno
- type: template
icon_color: |2-
{% set state=states('media_player.soggiorno_google_home') %}
{% if state=='playing' %}
green
{% else %}
{% endif %}
entity: media_player.soggiorno_google_home
icon: mdi:google-home
content: Sala
tap_action:
action: call-service
service: script.spotify_set_soggiorno_google_home
service_data:
room: '[[[ return variables.room ]]]'
- type: template
icon_color: |2-
{% set state=states('media_player.camera_google_home') %}
{% if state=='playing' %}
green
{% else %}
{% endif %}
entity: media_player.soggiorno_google_home
icon: mdi:google-home
content: Camera
- type: template
icon_color: |2-
{% set state=states('media_player.gruppo_google_home') %}
{% if state=='playing' %}
green
{% else %}
{% endif %}
entity: media_player.soggiorno_google_home
icon: mdi:google-home
content: Gruppo Google
alignment: justify
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: ;
--chip-spacing: 0;
}
Card is this:
3 Likes
Here ya go
1 Like
Hi, what do you use for recycling card?
thank you
When you are using stack-in-card you need to apply the Album Art card-mod to the stack. Like this:
type: custom:stack-in-card
cards:
- type: custom:mushroom-media-player-card
entity: media_player.spotify
volume_controls:
- volume_mute
- volume_set
use_media_info: true
show_volume_level: false
media_controls:
- previous
- play_pause_stop
- next
collapsible_controls: false
fill_container: false
layout: vertical
name: Musica
icon_type: entity-picture
- type: custom:mushroom-chips-card
chips:
- type: template
icon_color: |2-
{% set state=states('media_player.marantz_sala') %}
{% if state=='playing' %}
green
{% else %}
{% endif %}
entity: media_player.soggiorno_google_home
icon: mdi:speaker-multiple
content: Marantz
- type: template
icon_color: |2-
{% set state=states('media_player.marantz_sala_zone2') %}
{% if state=='playing' %}
green
{% else %}
{% endif %}
entity: media_player.soggiorno_google_home
icon: mdi:speaker-wireless
content: Esterno
- type: template
icon_color: |2-
{% set state=states('media_player.soggiorno_google_home') %}
{% if state=='playing' %}
green
{% else %}
{% endif %}
entity: media_player.soggiorno_google_home
icon: mdi:google-home
content: Sala
tap_action:
action: call-service
service: script.spotify_set_soggiorno_google_home
service_data:
room: '[[[ return variables.room ]]]'
- type: template
icon_color: |2-
{% set state=states('media_player.camera_google_home') %}
{% if state=='playing' %}
green
{% else %}
{% endif %}
entity: media_player.soggiorno_google_home
icon: mdi:google-home
content: Camera
- type: template
icon_color: |2-
{% set state=states('media_player.gruppo_google_home') %}
{% if state=='playing' %}
green
{% else %}
{% endif %}
entity: media_player.soggiorno_google_home
icon: mdi:google-home
content: Gruppo Google
alignment: justify
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: ;
--chip-spacing: 0;
}
card_mod:
style: |
ha-card {
{% if is_state('media_player.spotify', 'off') %}
{% else %}
background-image: url( '{{ state_attr( "media_player.spotify", "entity_picture" ) }}' );
background-position: center;
background-repeat: no-repeat;
background-size: cover;
background-color: rgba(var(--rgb-card-background-color), 0.5);
background-blend-mode: overlay;
position: relative;
{% endif %}
}
3 Likes
Have a look here for how to change the Mushroom Media Card color:
Great! Starting to like where I am heading.
Is there a way of applying card mod several cards at once in a Lovelace? If I suddenly want to change colors it seems like there would be plenty of work?
When it comes to mushroom I like the collapse controls feature, but I have a question there as well.
I have a Sonos speaker that does not really turn off, it only idles. Then collapse controls does not work. Is there a way around that?
That’s a great card - exactly what I’m trying to do with my TV, AVR, Google TV. Would you mind sharing your code?
Also are you able to turn on/off your TV? I read somewhere that the TV (LG in my case) has to be on Ethernet as opposed to Wifi for on/off commands to work.
Hey all,
I was wondering if anyone had any creative ideas for how to mushroom-ize an ordered list of sensors (door/motion/doesn’t matter) vended by the home-feed-card. I love the functionality the card provides; here’s an example that shows precisely what I’m looking for, modulo the random updates entry that doesn’t belong 
(still trying to figure out what I’m doing wrong there) I’m happy to keep the card as is but was hoping to stylize it in the framework that’s been the primary foundation for examples here. I’m having some creative block though and can’t think of how I would use either chips or a template card or anything since the ordered functionality is build into the home-feed-card itself. If I wanted to build chips or something else mushroom-esque, I’d have to recreate the logic with a pretty heavy template card… is that right? If anyone has any ideas on how they might represent something like this, I’d sure appreciate the assist. Thanks!
