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!
I have an auto entities card that lists all light groups.
I would like to be able to tap on the specific light group card and then have a pop-up (browser mod) that lists all the lights in the group.
The easiest way to do this because the groups are zha groups which donāt expose child entities is to parse the area out of the group entity id which will all have a corresponding area.
light.kitchen_lights group is kitchen.
I have an easy template that will extract the area. I just donāt know if itās possible to do this or Iām going about it wrong. Not sure what variables the auto entities exposes that could be useful I was trying to read the documentation and play with it but I canāt figure that out.
Hereās how the current setup looks.
Edit: I think I need to do something with this, auto entities and mushroom template card to achieve what I want
type: custom:auto-entities
card:
type: grid
columns: 2
square: false
card_param: cards
filter:
include:
- domain: light
entity_id: /[li]ghts/
options:
type: custom:mushroom-template-card
primary: '{{ states[entity].name }}'
secondary: '{{ states(entity) | title }}'
picture: local/icons/custom_icons/ceiling-lamp-off3.png
hold_action:
action: toggle
double_tap_action:
action: more-info
tap_action:
action: fire-dom-event
browser_mod:
command: popup
title: '{{ states[entity].name }}'
card:
type: custom:auto-entities
card:
type: grid
columns: 2
square: false
card_param: cards
filter:
template: >-
{% set area = entity | replace('light.','')
|replace('_lights','') | replace('_',' ') %} {{ states.light |
selectattr('entity_id', 'in', area_entities(area)) |
map(attribute='entity_id') | list }}
include:
- domain: light
area: filter.template
options:
type: custom:mushroom-light-card
tap_action:
action: none
card_mod:
style: |
mushroom-shape-icon {
--shape-color: none !important;
--shape-color-disabled: none !important;
}
ha-card {
background: transparent;
border-radius: 30px;
margin-left: auto;
margin-right: auto;
margin-bottom: 2px;
--icon-border-radius: 0;
--icon-size: 55px;
}
Do you try to keep this card on the home page? Iām trying to take a slightly different approach by simply having a chip on my mushroom home page top bar that visually shows the count of issues/notifications found (coupled maybe with a color change). Clicking on the chip brings me to a page with the standard home feed card; while itās not mushroom itās away from the main UI and so doesnāt destroy the clean interface mushroom provides - something I understand youād like to change; i.e. a home feed card styled in mushroom, right?
Youāre talking about ordered functionality which brings me to a question if you donāt mind. Are you monitoring a set number of devices/entities as per the examples? Iām wondering whether thereās a way of creating a ādynamicā list of exceptions (e.g. if battery of any device in my home is <50% then register the device(s) in the home feed etc.).
Thanks everyone, especially Rhys, for all the ideas and tips Iāve learned here.
However, there is one thing that I havenāt been able to accomplish, and Iām hoping someone can point me in the right directionā¦
Is there a way to move the badge on a template card to the left side of the icon (using card-mod)?
This seems to be the CSS, when I remove the right declaration (in my browserās dev tools), it does move the icon to the left side. However, Iām struggling with getting the card-mod code right.
.icon ::slotted([slot="badge"]) {
position: absolute;
top: -3px;
right: -3px;
}
Any help would be greatly appreciated!
1 Like