hello, can you show your code? thank you
That is because you are trying to animate mushroom-shape-icon which includes the Icon Shape (shaded circle around the icon). You will need to animate just the ha-icon. At the moment you are trying to change the Icon in two places, with a template in icon: and then with --card-mod-icon: in the CSS. Change the icon with icon: and icon_color: and then do just the animation with card_mod.
That is because Noctis only has a ‘light’ mode. You could try changing the following line.
From this:
background: url( '{{ state_attr("media_player.currently_playing", "entity_picture") }}' ), linear-gradient(to left, transparent, rgb(var(--rgb-card-background-color)) 50%);
To this:
background: url( '{{ state_attr("media_player.currently_playing", "entity_picture") }}' ), linear-gradient(to left, transparent, var(--ha-card-background) 50%);
1 Like
I really like the chips, if that’s the right word for it, on the future concept. Has anyone done anything similar?
Do you mean like this? 
type: custom:mushroom-chips-card
chips:
- type: template
entity: climate.office_air_conditioner
icon: mdi:thermometer
icon_color: red
content: |-
Climate
{{ state_attr(entity, 'temperature') | round(1) }} °C
card_mod:
style: |
ha-card {
padding: 5px;
}
.content {
white-space: pre-wrap;
}
- type: template
icon: mdi:lightbulb
content: |-
Lights
{{ expand(states.group.all_lights) | selectattr( 'state', 'eq', 'on') |
list | count }} On
entity: group.all_lights
icon_color: yellow
tap_action:
action: none
card_mod:
style: |
ha-card {
padding: 5px;
{{ '--chip-background: rgba(var(--rgb-yellow), 0.2);' if is_state(config.entity, 'on') }}
}
.content {
white-space: pre-wrap;
}
- type: template
icon: '{{ ''mdi:lock'' if is_state(entity, ''locked'') else ''mdi:lock-open'' }}'
content: |-
Security
{{ expand(states.group.all_locks) | selectattr( 'state', 'eq', 'unlocked') | list | count }} Unlocked
entity: group.all_locks
icon_color: '{{ ''green'' if is_state(entity, ''locked'') else ''red'' }}'
tap_action:
action: none
card_mod:
style: |
ha-card {
padding: 5px;
}
.content {
white-space: pre-wrap;
}
13 Likes
I have updated my post
Nice! Thank you 
1 Like
@rhysb I don’t suppose you have your dashboard or any of your designs/cards here on Github? Big fan of the layouts and designs you post but it’s simply too much of a pain to keep searching through the questions on here to find any recent updates that I might want to pinch haha. Great work though!
1 Like
Would appreciate help
I try to combine daily consumption and monthly consumption but in terms of display it doesn’t look good (especially at the top), can anyone help the code?
type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
entity: sensor.switcher_boiler_cost_curr_month
primary: חודש נוכחי
secondary: |
{{ states('sensor.switcher_boiler_cost_curr_month') }} ₪
icon: mdi:water-boiler
icon_color: green
tap_action:
action: more-info
card_mod:
style:
.: |
ha-card {
top: 5px;
left: 0px;
direction: rtl
}
- type: custom:mushroom-template-card
entity: sensor.switcher_boiler_cost_prev_month
primary: חודש לפני
secondary: |
{{ states('sensor.switcher_boiler_cost_prev_month') }} ₪
icon: mdi:water-boiler
icon_color: green
tap_action:
action: more-info
card_mod:
style:
.: |
ha-card {
top: -60px;
left: 15px;
}
- type: custom:layout-card
layout_type: masonry
layout:
width: 300
max_cols: 1
height: auto
padding: 10px
card_margin: var(--masonry-view-card-margin, -10px 0px 15px)
cards:
- type: custom:mini-graph-card
group: true
entities:
- entity: sensor.switcher_boiler_daily_energy
name: Daily Energy (kWh)
show_state: false
color: orange
- entity: sensor.switcher_boiler_cost_today
name: Day Cost (₪)
show_state: true
color: green
show:
name: false
icon: false
legend: true
labels: false
graph: bar
fill: true
extrema: false
average: false
hours_to_show: 168
group_by: date
aggregate_func: max
tap_action:
action: more-info
card_mod: null
3 Likes
Thanks but that’s not exactly what I need.
Awesome. Would you mind sharing the code for the weather and Energy portion for your dashboard?
Needing help. What I’m trying to do is when state is off it would look like a normal card like the bottom 4 cards. But when state is on the background changes to the candle.gif.
It works to some degree but when I turn it off all I get is a blank card like in the 1st pic where it says candle.
Here is the code.
type: custom:mushroom-template-card
primary: Candles
entity: input_boolean.candles_helper
icon: null
icon_color: grey
layout: vertical
picture: null
fill_container: false
multiline_secondary: false
card_mod:
style:
.: |
mushroom-shape-icon {
display: ;
margin-left: auto;
width: 86px;
}
mushroom-state-info {
text-align:;
}
ha-card {
{% if is_state('input_boolean.candles_helper', 'on') %}
background: center / cover no-repeat
url("/local/images/Candle.gif");
{%- else -%}
{% endif %}
width: 100px;
height: 100px;
margin: auto;
}
mushroom-state-item {
height: 96px;
}
mushroom-state-info$: |
.primary {
white-space: normal !important;
overflow: hidden;
}
Question, I’ve got some issues with the pop lights on card. I’ve copied the code, filled in my own all light groups and the chip works, is populated and shows the # of lights I have on. However, when I press the chip, nothing happens.
I’m pretty sure I have all the extras like browser mod, auto entities and layout card etc. Could you help me out?
@rhysb hey mate
i tried to use the same code to change the card height, but not working nor do i understand when to use certain css elements. Any help is always appreciated
type: vertical-stack
cards:
- type: custom:mushroom-chips-card
chips:
- type: template
entity: light.dining_room_pendant_light_switch
icon_color: |-
{% set state=states('light.dining_room_pendant_light_switch') %}
{% if state=='on' %}
orange
{% elif state=='off' %}
disabled
{% elif state=='unavailable' %}
red
{% endif %}
double_tap_action:
action: none
icon: mdi:chandelier
tap_action:
action: more-info
hold_action:
action: none
- type: template
entity: light.dining_room_light_switch
icon_color: |-
{% set state=states('light.dining_room_light_switch') %}
{% if state=='on' %}
orange
{% elif state=='off' %}
disabled
{% elif state=='unavailable' %}
red
{% endif %}
double_tap_action:
action: none
icon: hue:bulb-group-recessed-ceiling
tap_action:
action: more-info
hold_action:
action: none
- type: template
entity: cover.dining_room_sliding_door_curtain
icon_color: |-
{% set state=states('cover.dining_room_sliding_door_curtain') %}
{% if state=='open' %}
orange
{% elif state=='closed' %}
disabled
{% elif state=='unavailable' %}
red
{% endif %}
icon: mdi:curtains
tap_action:
action: more-info
hold_action:
action: none
double_tap_action:
action: none
- type: template
entity: binary_sensor.dining_room_ceiling_motion_sensor
icon_color: >-
{% set state=states('binary_sensor.dining_room_ceiling_motion_sensor')
%}
{% if state=='on' %}
orange
{% elif state=='off' %}
disabled
{% elif state=='unavailable' %}
red
{% endif %}
icon: mdi:motion-sensor
tap_action:
action: more-info
hold_action:
action: none
double_tap_action:
action: none
- type: template
entity: binary_sensor.dining_room_sliding_door_sensor_contact
icon_color: >-
{% set
state=states('binary_sensor.dining_room_sliding_door_sensor_contact')
%}
{% if state=='on' %}
orange
{% elif state=='off' %}
disabled
{% elif state=='unavailable' %}
red
{% endif %}
icon: mdi:door-sliding
tap_action:
action: more-info
hold_action:
action: none
double_tap_action:
action: none
- type: template
entity: cover.ducted_ac_kitchen_zone
icon_color: |-
{% set state=states('cover.ducted_ac_kitchen_zone') %}
{% if state=='open' %}
blue
{% elif state=='closed' %}
disabled
{% elif state=='unavailable' %}
red
{% endif %}
icon: mdi:air-conditioner
tap_action:
action: more-info
hold_action:
action: none
double_tap_action:
action: none
alignment: center
card_mod:
style:
ha-card {
height: 120px !important;
}
Hi,
need help fixing/understanding this problem.
I have this card which is shown differently on Desktop (Mac OS + Firefox) and on iPhone (HA App)
How do I prevent mini-graph card from moving top?
Desktop Browser
IOS APP
EDIT:
When I resize browser window on Desktop bottom card also moves
Here is my card-yaml. I have tried to trim card height.
type: custom:stack-in-card
mode: vertical
cards:
- type: custom:mushroom-template-card
primary: Washer
secondary: '{{ states(''input_select.washing_machine_state_machine'') }}'
entity: input_select.washing_machine_state_machine
icon_color: |-
{% if is_state('input_boolean.washing_machine_job_cycle', 'on') %}
#F49D1E
{% elif is_state('input_boolean.washing_machine_job_cycle', 'off') %}
#27A28A
{% endif %}
icon: |-
{% if is_state('input_boolean.washing_machine_job_cycle', 'on') %}
mdi:washing-machine
{% elif is_state('input_boolean.washing_machine_job_cycle', 'off') %}
mdi:washing-machine-off
{% endif %}
fill_container: false
- type: custom:mini-graph-card
entities:
- sensor.plug_washingmachine_power
points_per_hour: 4
show:
labels: false
name: false
graph: bar
icon: false
hour24: true
align_state: right
font_size: 80
height: 100
hours_to_show: 6
color_thresholds:
- value: 1
color: '#27A28A'
- value: 2
color: '#F49D1E'
card_mod:
style: |
ha-card {
top: -70px;
}
card_mod:
style: |
ha-card {
height: 158px !important;
}
2 Likes
Share your code and we can try and help.
I presume you are trying to add some space below the Chips? The correct way to do that would be like this:
alignment: center
card_mod:
style: |
ha-card {
margin-bottom: 100px;
}
1 Like
Is this what you are trying to do?
type: custom:mushroom-template-card
primary: Candles
entity: input_boolean.candles_helper
icon: '{{ ''mdi:candle'' if not is_state(entity, ''on'') }}'
icon_color: grey
layout: vertical
picture: null
fill_container: false
multiline_secondary: false
card_mod:
style:
.: |
mushroom-shape-icon {
display: ;
margin-left: auto;
width: 86px;
}
mushroom-state-info {
text-align:;
}
ha-card {
{{ 'background: center / cover no-repeat url("/local/images/Candle.gif");' if is_state(config.entity, 'on') }}
width: 100px;
height: 100px;
margin: auto;
}
mushroom-state-item {
height: 96px;
}
mushroom-state-info$: |
.primary {
white-space: normal !important;
overflow: hidden;
}