Is it possible to paste your code in YAML please?
Just by pasting this code, I get - of course- a lot of indentation errors and I can’t make it right (still).
Thanks a lot
It’s just the same:
icon: "{{ 'mdi:dog' if is_state('switch.sonoff_10004da9de','on') else 'mdi:cat' }}"
Is there someone that can point me in the right direction? I’m still not able to show mushroom styled cards in a pop up.
Any ideas on what could be causing this? Am I missing something? Thanks for your help.
Nice thanks!!!
1 Like
So I’m really liking the card, question is, can you make an “expandable” version?
Like I’d love just the bar with the current condition (rain) to only show, and then when tapped or a dropped down arrow tapped it expands the card with the temperatures.
Just trying to make it a little smaller to save some space here.
EDIT: I think ill also remove the top weather card since I have yous but still an expandable version would be cool so I can have both.
Hey, how are you producing that weather info using Mushroom?
1 Like
@rhysb
if all the media options are selected then the above is the default layout. On clicking the speaker/volume button the below layout is shown.
is there a way to keep this as the default layout and on clicking the speaker/volume button the first layout is shown?
2 Likes
I just built my first template chip card. In the following code, if I remove the “W” from the end of the content template, and the state of the sensor is zero (and only if it’s zero), the state doesn’t appear at all on the chip. If I add anything at all, like the “W”, the zero shows up. What am I missing?
type: custom:mushroom-chips-card
chips:
- type: template
entity: sensor.myenergi_bayview_power_charging
icon: mdi:car-arrow-left
icon_color: |-
{% set charging=states(entity) %}
{% if charging | int != 0 %}
{% set state=states('sensor.myenergi_bayview_power_import') %}
{% if state | int > 200 %}
red
{% else %}
green
{% endif %}
{% else %}
default
{% endif %}
content: '{{ states(entity) }} W'
tap_action:
action: more-info
double_tap_action:
action: more-info
hold_action:
action: more-info
Like this:
3 Likes
@HelL5toKe These are super nice! Would you mind sharing your sensor templates? It seems you’re using a bunch of them for conditions and badge displays. I’m particularly interested in the number of lights on sensor — how do you determine this? Does it count bulbs or groups? Both? How do you exclude one or the other? Also, that Plex sensor! How did you do that? 
He literally shared his whole YAML in that same post lol.
Does anyone know how to capture the RGB color variable from a multi-color light strip, and pass that value through to the ping CSS animation? Basically, I have a Meross light strip that is attached to the TV. I have already got the automations to turn the light strip on and off based on the TV status, but I want to be able to change the color/see that its on. I don’t want a separate card just for this light, so I want to have it pulsing as an animation on my TV card as part of the larger stack in card.
I can get the icon to ping when the TV/light is turned on, and I can change the color of the icon/shape based on the RGB of the light, but I can’t figure out how to get the animation color to reflect what the light is.
Here is the code for just the animation as I currently have it (I know it says its currently green, but I cant figure out, aside from changing that to a different color hard coded, how to update that part.
type: custom:mushroom-template-card
primary: ''
secondary: ''
icon: mdi:television
icon_color: cyan
picture: ''
entity: light.smart_led_light_strip_msl320cp_main_channel
tap_action:
action: toggle
fill_container: true
card_mod:
style: |
mushroom-shape-icon {
display: flex;
border-radius: 60%;
{% set status = states('light.smart_led_light_strip_msl320cp_main_channel') %}
{% if status == 'on' %}
animation: ping 2s linear infinite;
{% endif %}
}
@keyframes ping {
0% {
box-shadow: 0 0 5px 1px rgba(var(--rgb-green), 0.7);
}
100% {
box-shadow: 0 0 5px 15px transparent;
}
}
Thanks!
1 Like
hi,
can you share which weather card you are using there ? thank you.
Hey @davidnestico, here is a collapsible version.
Mushroom Collapsible Weather Bar Card:
type: custom:stack-in-card
cards:
- type: custom:layout-card
layout_type: custom:grid-layout
layout:
grid-template-columns: 66px auto 36px
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-indigo), 0.2) !important;
--color-lightning: var(--color-rainy);
--color-lightning-rainy: var(--color-rainy);
--color-partlycloudy: rgba(var(--mush-rgb-blue), 0.2) !important;
--color-pouring: var(--color-rainy);
--color-rainy: rgba(var(--mush-rgb-indigo), 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;
}
.axes {
margin-top: 10px !important;
}
.: |
ha-card {
background: none;
--ha-card-box-shadow: 0px;
margin: -8px -4px -4px -16px;
}
- type: custom:mushroom-template-card
entity: input_boolean.weather_bar_dropdown
icon: mdi:chevron-down
icon_color: disabled
hold_action:
action: none
card_mod:
style:
mushroom-shape-icon:
$: |
.shape ha-icon {
transition: transform 0.14s !important;
{{ 'transform: rotate(-180deg);' if is_state(config.entity, 'on') }}
}
.: |
ha-card {
align-items: flex-end;
box-shadow: none;
}
mushroom-shape-icon {
--shape-color: none !important;
}
card_mod:
style: |
ha-card {
{{ 'height: 66px;' if is_state('input_boolean.weather_bar_dropdown', 'off') }}
}
16 Likes
Try something like this:
type: custom:mushroom-template-card
icon: mdi:television
icon_color: cyan
entity: light.smart_led_light_strip_msl320cp_main_channel
tap_action:
action: toggle
fill_container: true
card_mod:
style: |
mushroom-shape-icon {
display: flex;
border-radius: 60%;
{% set status = states(config.entity) %}
{% if status == 'on' %}
animation: ping 2s linear infinite;
{% endif %}
{% set r = state_attr(config.entity, 'rgb_color')[0] %}
{% set g = state_attr(config.entity, 'rgb_color')[1] %}
{% set b = state_attr(config.entity, 'rgb_color')[2] %}
}
@keyframes ping {
0% { box-shadow: 0 0 5px 1px rgba( {{r}}, {{g}}, {{b}}, 0.7); }
100% { box-shadow: 0 0 5px 15px transparent; }
}
1 Like
That would require more than just CSS styling I’m afraid.