It is possible the icons to be centerded with the values? I want to move them a lil bit up
Easiest way was to adjust the text sizes actually.
type: custom:stack-in-card
cards:
- type: custom:button-card
entity: sensor.office_temperature_humidity_humidity
show_icon: false
name: Δωματιο
styles:
card:
- border-style: none
- box-shadow: 0px 0px 10px -9px black
custom_fields:
temp:
- filter: opacity(100%)
- justify-self: start
- margin-left: 10px
- margin-top: 20px
- padding-bottom: 10%
- font-size: 95%
graph:
- padding-top: 0%
- width: 100%
- height: 100%
- margin-bottom: '-3%'
icon:
- width: 25px
- color: auto
name:
- font-size: 87%
- font-weight: var(--mcg-title-font-weight, 500)
- justify-self: start
- margin-top: 6px
- margin-left: 12px
- opacity: 0.65
grid:
- grid-template-areas: '"n n" "temp temp" "graph graph"'
- grid-template-columns: 1fr min-content
- grid-template-rows: 1fr min-content min-content min-content
custom_fields:
temp: |
[[[
return `<ha-icon
icon="mdi:thermometer"
style="width:18px; height: 18px; color:#ff33ff;">
</ha-icon><span style="font-size:80%;">
${states['sensor.office_temperature_humidity_temperature'].state}°C </span>
<ha-icon
icon="mdi:water-percent"
style="width: 18px; height: 18px; color: #3399ff;">
</ha-icon><span style="font-size:80%; text-align: center;">
${states['sensor.office_temperature_humidity_humidity'].state}%</span>`
]]]
card_mod:
style: |
ha-card {
z-index: 1;
height: 70px !important;
}
- type: custom:mini-graph-card
entities:
- entity: sensor.office_temperature_humidity_temperature
name: Temperature
color: '#ff33ff'
- entity: sensor.office_temperature_humidity_humidity
name: Humidity
color: '#3399ff'
y_axis: secondary
height: 50
hours_to_show: 24
line_width: 3
font_size: 50
animate: true
show:
name: false
icon: false
state: false
legend: false
fill: fade
card_mod:
style: |
ha-card {
position: absolute !important;
height: 100%;
width: 100%;
top: 0px;
--ha-card-border-width: 0;
}
ha-card:after {
content: "";
position: absolute;
width: 100%;
height: 100%;
background: linear-gradient(to right, var(--card-background-color) 20%, transparent);
}
6 Likes
Worked! thanks.
Thank its work now but the new yaml its totally different from the old version,
Yes? In order to fix things we have to change things? Not sure what you are getting at?
1 Like
Hi Galaxy,
can you please post your final implementation. I am trying to do something very similar, but I still can see a line before the chips:
You can just do it through the entity itself in the entities settings.
But if you have to get a specific amount without changing the settings you can use this:
{{ '{0:.2f}'.format( (states('sensor.bedroom_temperature_humidity_temperature')|float))}}°C
Ill leave it to you on how to add that to the button card.
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