Post your yaml 
I did set it from the entity settings but it doesnt change on the card. I tried to put the code on the card that you share but it didnt worked.
Thanks Dimitri.
This is my yaml
type: custom:stack-in-card
mode: vertical
cards:
- type: custom:mushroom-template-card
primary: Kitchen
secondary: 🌡{{ states('sensor.sensor_t_zigbee_temperature') }}°C
icon: mdi:countertop
icon_color: |-
{% set state=states('light.kitchen_cabinet_lights') %}
{% if state=='on' %}
green
{% elif state=='off' %}
grey
{% else %}
grey
{% endif %}
layout: horizontal
multiline_secondary: false
tap_action:
action: navigate
navigation_path: /dashboard-cards/kitchen
hold_action:
action: none
double_tap_action:
action: none
- type: custom:mushroom-chips-card
alignment: end
square: false
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: 0;
}
chips:
- type: conditional
conditions:
- entity: light.kitchen_cabinet_lights
state: 'on'
chip:
type: entity
entity: light.kitchen_cabinet_lights
icon_color: amber
tap_action:
action: call-service
service: light.turn_off
service_data: {}
target:
entity_id: light.kitchen_cabinet_lights
content_info: none
icon: mdi:lightbulb
- type: template
icon: mdi:home-floor-0
entity: sensor.average_temperature_ground_floor
card_mod: null
content: >-
{% if state_attr('climate.ground_floor_thermostat', 'hvac_action') ==
'cooling' %} Cooling {{
"%0.02f"|format(states('sensor.average_temperature_ground_floor') |
float) }} {% elif state_attr('climate.ground_floor_thermostat',
'hvac_action') == 'heating' %} Heating {{
"%0.02f"|format(states('sensor.average_temperature_ground_floor') |
float) }} {% else %} Idle {{
"%0.02f"|format(states('sensor.average_temperature_ground_floor') |
float) }} {% endif %}
icon_color: >
{% if state_attr('climate.ground_floor_thermostat', 'hvac_action') ==
'cooling' %} blue {% elif
state_attr('climate.ground_floor_thermostat', 'hvac_action') ==
'heating' %} red {% else %} grey {% endif %}
card_mod:
style: |
ha-card {
height: 110px;
background: none !important;
box-shadow: 0px 0px 12px 10px #56DD3F !important;
{% if is_state('light.kitchen_cabinet_lights', 'on') %}
background: rgba(255, 152, 0, 0.1) !important;
{% endif %}
}
view_layout:
grid-area: cen4
I dont have a border showing up with this. but adding border: none !important; certainly couldnt hurt
Code
type: custom:stack-in-card
mode: vertical
cards:
- type: custom:mushroom-template-card
primary: Kitchen
secondary: 🌡{{ states('sensor.kitchen_motion_sensor_temperature') }}°C
icon: mdi:countertop
icon_color: |-
{% set state=states('light.kitchen_cabinet_light') %}
{% if state=='on' %}
green
{% elif state=='off' %}
grey
{% else %}
grey
{% endif %}
layout: horizontal
multiline_secondary: false
tap_action:
action: navigate
navigation_path: /dashboard-cards/kitchen
hold_action:
action: none
double_tap_action:
action: none
card_mod:
style: |
ha-card {
border: none !important;
}
- type: custom:mushroom-chips-card
alignment: end
square: false
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: 0;
border: none !important;
}
chips:
- type: conditional
conditions:
- entity: light.kitchen_cabinet_light
state: 'on'
chip:
type: entity
entity: light.kitchen_cabinet_light
icon_color: amber
tap_action:
action: call-service
service: light.turn_off
service_data: {}
target:
entity_id: light.kitchen_cabinet_light
content_info: none
icon: mdi:lightbulb
- type: template
icon: mdi:home-floor-0
entity: sensor.lounge_downstairs_temperature
card_mod: null
content: >-
{% if state_attr('climate.thermostat', 'hvac_action') == 'cooling' %}
Cooling {{
"%0.02f"|format(states('sensor.lounge_downstairs_temperature') |
float) }} {% elif state_attr('climate.thermostat', 'hvac_action') ==
'heating' %} Heating {{
"%0.02f"|format(states('sensor.lounge_downstairs_temperature') |
float) }} {% else %} Idle {{
"%0.02f"|format(states('sensor.lounge_downstairs_temperature') |
float) }} {% endif %}
icon_color: >
{% if state_attr('climate.thermostat', 'hvac_action') == 'cooling' %}
blue {% elif state_attr('climate.thermostat', 'hvac_action') ==
'heating' %} red {% else %} grey {% endif %}
card_mod:
style: |
ha-card {
height: 110px;
background: none !important;
border: none !important;
box-shadow: 0px 0px 12px 10px #56DD3F !important;
{% if is_state('light.kitchen_cabinet_lights', 'on') %}
background: rgba(255, 152, 0, 0.1) !important;
{% endif %}
}
view_layout:
grid-area: cen4
2 Likes
try and just add math.round like this:
{Math.round(states['sensor.office_temperature_humidity_temperature'].state * 10) / 10}
{Math.round(states['sensor.office_temperature_humidity_humidity'].state)}
temp returns 23.9°C as an example.
and humidity returns 55% as an example.
i wont respond further now in this thread because this relates to button card and javascript in which i am not familiar.
Could you please give an example on how to set the color of the box shadow to match the actual color of the light in respective room?
Thanks Dimitri. The middle line between the chip cards and the template card works well and is out, but I still can see the border around the chips. Any other clue you may have?
Thanks in advance
Ok thanks i did manage to fix it with this.
<span style="font-size:120%; font-weight: 300;">
${parseFloat(states['sensor.aqara_temp_bedroom'].state).toFixed(2)}°C
</span>
I reply myself with the solution. Adding also to all the chips seems to make the trick:
- type: custom:stack-in-card
mode: vertical
cards:
- type: custom:mushroom-template-card
primary: Kitchen
secondary: 🌡{{ states('sensor.sensor_t_zigbee_temperature') }}°C
icon: mdi:countertop
icon_color: |-
{% set state=states('light.kitchen_cabinet_lights') %}
{% if state=='on' %}
green
{% elif state=='off' %}
grey
{% else %}
grey
{% endif %}
layout: horizontal
multiline_secondary: false
tap_action:
action: navigate
navigation_path: /dashboard-cards/kitchen
hold_action:
action: none
double_tap_action:
action: none
card_mod:
style: |
ha-card {
border: none !important;
}
- type: custom:mushroom-chips-card
alignment: end
square: false
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: 0;
border: none !important;
}
chips:
- type: conditional
conditions:
- entity: light.kitchen_cabinet_lights
state: 'on'
chip:
type: entity
entity: light.kitchen_cabinet_lights
icon_color: amber
tap_action:
action: call-service
service: light.turn_off
service_data: {}
target:
entity_id: light.kitchen_cabinet_lights
content_info: none
icon: mdi:lightbulb
- type: entity
entity: sensor.sensor_t_zigbee_humidity
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: 0;
border: none !important;
}
- type: template
icon: mdi:home-floor-0
entity: sensor.average_temperature_ground_floor
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: 0;
border: none !important;
}
content: >-
{% if state_attr('climate.ground_floor_thermostat',
'hvac_action') == 'cooling' %} Cooling {{
"%0.02f"|format(states('sensor.average_temperature_ground_floor')
| float) }} {% elif
state_attr('climate.ground_floor_thermostat',
'hvac_action') == 'heating' %} Heating {{
"%0.02f"|format(states('sensor.average_temperature_ground_floor')
| float) }} {% else %} Idle {{
"%0.02f"|format(states('sensor.average_temperature_ground_floor')
| float) }} {% endif %}
icon_color: >
{% if state_attr('climate.ground_floor_thermostat',
'hvac_action') == 'cooling' %} blue {% elif
state_attr('climate.ground_floor_thermostat',
'hvac_action') == 'heating' %} red {% else %} grey {%
endif %}
card_mod:
style: |
ha-card {
height: 110px;
background: none !important;
border: none !important;
box-shadow: 0px 0px 12px 10px #56DD3F !important;
{% if is_state('light.kitchen_cabinet_lights', 'on') %}
background: rgba(255, 152, 0, 0.1) !important;
{% endif %}
}
view_layout:
grid-area: cen4
1 Like
Hello again
Why doesn’t animation work?
- type: custom:mushroom-template-card
entity: sensor.shellyem_244cab41938c_channel_2_power
icon: mdi:kettle-steam
icon_color: |-
{{ 'blue' if states('sensor.shellyem_244cab41938c_channel_2_power') | float > 120 }}
primary: Cucina
tap_action:
action: navigate
navigation_path: consumi
card_mod:
style: >
ha-card {
padding: 12px;
margin-left: 12px;
background: none;
box-shadow: none;
}
ha-state-icon {
{% if states('sensor.shellyem_244cab41938c_channel_2_power') | float > 120 %}
animation: boil 500ms infinite;
{% else %}
{% endif %}
}
@keyframes boil {
0%, 100% { transform: translate({{ range(-20, 20) | random / 10 }}px, {{ range(-20, 20) | random / 10 }}px) rotate({{ range(-15, 15) | random }}deg); }
10% { transform: translate({{ range(-20, 20) | random / 10 }}px, {{ range(-20, 20) | random / 10 }}px) rotate({{ range(-15, 15) | random }}deg); clip-path: polygon(0 0, 66% 10%, 67% 30%, 88% 52%, 100% 100%, 0 100%); }
20% { transform: translate({{ range(-20, 20) | random / 10 }}px, {{ range(-20, 20) | random / 10 }}px) rotate({{ range(-15, 15) | random }}deg); }
30% { transform: translate({{ range(-20, 20) | random / 10 }}px, {{ range(-20, 20) | random / 10 }}px) rotate({{ range(-15, 15) | random }}deg); }
40% { transform: translate({{ range(-20, 20) | random / 10 }}px, {{ range(-20, 20) | random / 10 }}px) rotate({{ range(-15, 15) | random }}deg); }
50% { transform: translate({{ range(-20, 20) | random / 10 }}px, {{ range(-20, 20) | random / 10 }}px) rotate({{ range(-15, 15) | random }}deg); }
60% { transform: translate({{ range(-20, 20) | random / 10 }}px, {{ range(-20, 20) | random / 10 }}px) rotate({{ range(-15, 15) | random }}deg); }
70% { transform: translate({{ range(-20, 20) | random / 10 }}px, {{ range(-20, 20) | random / 10 }}px) rotate({{ range(-15, 15) | random }}deg); }
80% { transform: translate({{ range(-20, 20) | random / 10 }}px, {{ range(-20, 20) | random / 10 }}px) rotate({{ range(-15, 15) | random }}deg); }
90% { transform: translate({{ range(-20, 20) | random / 10 }}px, {{ range(-20, 20) | random / 10 }}px) rotate({{ range(-15, 15) | random }}deg); }
}
thank you so much
card_mod and everything under hasnt been placed under the card. it is under navigation_path.
- type: custom:mushroom-template-card
entity: sensor.shellyem_244cab41938c_channel_2_power
icon: mdi:kettle-steam
icon_color: |-
{{ 'blue' if states('sensor.shellyem_244cab41938c_channel_2_power') | float > 120 }}
primary: Cucina
tap_action:
action: navigate
navigation_path: consumi
card_mod:
style: |
ha-card {
padding: 12px;
margin-left: 12px;
background: none;
box-shadow: none;
ha-state-icon {
{% if states('sensor.shellyem_244cab41938c_channel_2_power') | float > 120 %}
animation: boil 500ms infinite;
{% else %}
{% endif %}
}
@keyframes boil {
0%, 100% { transform: translate({{ range(-20, 20) | random / 10 }}px, {{ range(-20, 20) | random / 10 }}px) rotate({{ range(-15, 15) | random }}deg); }
10% { transform: translate({{ range(-20, 20) | random / 10 }}px, {{ range(-20, 20) | random / 10 }}px) rotate({{ range(-15, 15) | random }}deg); clip-path: polygon(0 0, 66% 10%, 67% 30%, 88% 52%, 100% 100%, 0 100%); }
20% { transform: translate({{ range(-20, 20) | random / 10 }}px, {{ range(-20, 20) | random / 10 }}px) rotate({{ range(-15, 15) | random }}deg); }
30% { transform: translate({{ range(-20, 20) | random / 10 }}px, {{ range(-20, 20) | random / 10 }}px) rotate({{ range(-15, 15) | random }}deg); }
40% { transform: translate({{ range(-20, 20) | random / 10 }}px, {{ range(-20, 20) | random / 10 }}px) rotate({{ range(-15, 15) | random }}deg); }
50% { transform: translate({{ range(-20, 20) | random / 10 }}px, {{ range(-20, 20) | random / 10 }}px) rotate({{ range(-15, 15) | random }}deg); }
60% { transform: translate({{ range(-20, 20) | random / 10 }}px, {{ range(-20, 20) | random / 10 }}px) rotate({{ range(-15, 15) | random }}deg); }
70% { transform: translate({{ range(-20, 20) | random / 10 }}px, {{ range(-20, 20) | random / 10 }}px) rotate({{ range(-15, 15) | random }}deg); }
80% { transform: translate({{ range(-20, 20) | random / 10 }}px, {{ range(-20, 20) | random / 10 }}px) rotate({{ range(-15, 15) | random }}deg); }
90% { transform: translate({{ range(-20, 20) | random / 10 }}px, {{ range(-20, 20) | random / 10 }}px) rotate({{ range(-15, 15) | random }}deg); }
}
You can do it like this:
type: custom:mushroom-light-card
entity: light.office_standing_light
card_mod:
style: |
ha-card {
box-shadow: 0px 0px 10px 10px rgba({{ state_attr('light.office_standing_light','rgb_color') | join(', ')}}, 1)
}
3 Likes
This is what I get. a grey border on top. (Safari Version 16.5.2 (18615.2.9.11.10) on Ventura 13.4.1 (c) )
Your card is very beautiful!!
Is it possibile to use a picture instead the icon in the same positions and form ?
Thanks
Much appreciated!
1 Like
Sorry cant help you there. Dont own a single apple device.
i’m so stupid!
thank you so much
Hi, thanks for this, I tried it and this keeps the boarders round each card;
Have you got one you can share on here?
My main dashboard is in yaml, I only use the UI for testing cards if that makes sense.
I dont have an example handy. But what you can do is now that you have your columns just place the entire thing (the entire layout card and all cards within it) in a stack in card. That should fix any borders
Edit: nevermind got a chance to make an example.
type: custom:stack-in-card
cards:
- type: custom:layout-card
layout_type: custom:horizontal-layout
cards:
- type: custom:mushroom-template-card
primary: Hello
secondary: Test
icon: mdi:home
layout: vertical
- type: custom:mushroom-template-card
primary: Hello
secondary: test2
icon: mdi:home
layout: vertical
- type: custom:mushroom-template-card
primary: Hello
secondary: test2
icon: mdi:home
layout: vertical
- type: custom:mushroom-template-card
primary: Hello
secondary: test2
icon: mdi:home
layout: vertical
- type: custom:mushroom-template-card
primary: Hello
secondary: test2
icon: mdi:home
layout: vertical
layout:
max_cols: 8
width: 50
padding: 0px 0px 0px 0px
card_margin: 0px
1 Like
thats perfect thanks for you efforts in getting me one to me so quick, just pasted it in and its worked straight away