check out some examples here:
something like this work for you?
Code
type: custom:stack-in-card
mode: horizontal
cards:
- type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
primary: Woonkamer
icon: mdi:sofa
tap_action:
action: navigate
navigation_path: null
icon_color: blue
multiline_secondary: false
card_mod:
style: |
ha-card {
--ha-card-background: none;
--ha-card-box-shadow: none;
--ha-card-border-width: 0;
z-index: 1;
}
- type: custom:mini-graph-card
entities:
- entity: sensor.bedroom_temperature_humidity_temperature
name: Temperature
hours_to_show: 24
line_width: 3
font_size: 50
points_per_hour: 2
animate: true
show:
name: false
icon: false
state: false
legend: false
fill: fade
color_thresholds:
- value: 17
color: '#ffcd05'
- value: 19
color: '#f39c12'
- value: 21
color: '#d35400'
- value: 22.5
color: '#c0392b'
- value: 40
color: '#91f4ff'
- value: 50
color: '#2ae0f5'
- value: 58
color: '#18b3f5'
- value: 65
color: '#005bd1'
- value: 70
color: '#000399'
card_mod:
style: |
ha-card {
position: absolute !important;
top: -10px;
width: 100% !important;
height: 122% !important;
left: 0px;
}
ha-card:after {
content: "";
position: absolute;
width: 100%;
height: 100%;
background: linear-gradient(to right, var(--card-background-color) 20%, transparent);
}
- type: horizontal-stack
cards:
- type: custom:mushroom-climate-card
entity: climate.living
icon: none
show_temperature_control: false
primary_info: none
secondary_info: none
layout: horizontal
tap_action:
action: more-info
card_mod:
style:
mushroom-shape-icon$: |
.shape:after {
content: "{{ state_attr(config.entity, 'current_temperature')|replace('.', ',') }}°";
font-size: 14px;
font-weight: bolder;
color: white;
position: absolute;
}
.shape {
{% set mode = state_attr(config.entity, 'hvac_action') %}
--shape-color: rgba(var(--rgb-
{%- if mode == 'heating' -%}
orange
{%- elif mode == 'cooling' -%}
blue
{%- else -%}
grey
{% endif %}));
}
mushroom-badge-icon$: |
.badge {
{{ 'display: none !important;' if state_attr(config.entity, 'hvac_action') == 'idle' }}
}
.: |
mushroom-badge-icon:after {
content: "{{ states('sensor.alpha2_heat_control_ezr012b5_glv_1_valve_opening') }}";
position: absolute;
display: flex;
justify-content: center;
align-items: center;
background: rgb(var(--rgb-green));
color: rgb(var(--rgb-white));
border-radius: 50%;
border-width: 0;
top: 0;
width: 100%;
height: 100%;
font-size: 0.7em;
}
ha-card {
border: none !important;
}
- type: custom:mushroom-template-card
primary: null
icon: mdi:lightbulb
icon_color: >-
{%if expand(area_entities('woonkamer')) | selectattr ( 'domain' ,
'eq' , 'light' ) | selectattr ( 'state' , 'eq' , 'on' ) | list | count
> 0 %} amber {% else %} grey {% endif %}
entity: light.all_lights
badge_icon: none
badge_color: transparent
card_mod:
style: |
mushroom-badge-icon:after {
content: "{{ expand(area_entities('woonkamer')) | selectattr ( 'domain' , 'eq' , 'light' ) | selectattr ( 'state' , 'eq' , 'on' ) | list | count}}";
position: absolute;
display: flex;
justify-content: center;
align-items: center;
background: rgb(var(--rgb-orange));
color: var(--card-background-color);
border-radius: 50%;
top: 0;
width: 100%;
height: 100%;
font-size: 0.8em;
}
ha-card {
--ha-card-border-width: 0;
}
- type: custom:mushroom-template-card
primary: null
icon: mdi:window-shutter-open
icon_color: >-
{%if expand(area_entities('woonkamer')) | selectattr ( 'domain' ,
'eq' , 'cover' ) | selectattr ( 'state' , 'eq' , 'open' ) | list |
count > 0 %} blue {% else %} grey {% endif %}
entity: light.all_lights
badge_icon: none
badge_color: transparent
card_mod:
style: |
mushroom-badge-icon:after {
content: "{{ expand(area_entities('woonkamer')) | selectattr ( 'domain' , 'eq' , 'cover' ) | selectattr ( 'state' , 'eq' , 'open' ) | list | count}}";
position: absolute;
display: flex;
justify-content: center;
align-items: center;
background: rgb(var(--rgb-orange));
color: var(--card-background-color);
border-radius: 50%;
top: 0;
width: 100%;
height: 100%;
font-size: 0.8em;
}
ha-card {
--ha-card-border-width: 0;
}
FYI the fading of the graph to the left doesnt work on Firefox.
4 Likes
I learned all this and successfully apply it
Thank you
but in my case it doesn’t work
Show me the code you used to apply it where it doesnt work please.
type: custom:stack-in-card
cards:
- type: custom:mushroom-chips-card
chips:
- type: template
icon: mdi:power-standby
icon_color: red
hold_action:
action: none
tap_action:
confirmation:
text: Power OFF?
action: call-service
service: homeassistant.stop
service_data: {}
target: {}
card_mod:
style:
mushroom-shape-icon$: |
ha-icon {
--icon-animation: power 1.5s infinite;
}
.shape {
--shape-color: none;
}
@keyframes power {
0%, 100% { clip-path: inset(0 0 0 0); }
50% { clip-path: polygon(0 0, 42% 0, 42% 58%, 58% 58%, 58% 0, 100% 0, 100% 100%, 0 100%); }
}
square: false
type: grid
cards:
- type: horizontal-stack
cards:
- type: custom:stack-in-card
cards:
- type: custom:button-card
entity: sensor.termometr_kukhnia_temperature
show_icon: false
name: Living
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: 65%
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:#ff8c00;">
</ha-icon><span style="font-size:120%; font-weight: 300;">
${states['sensor.termometr_kukhnia_temperature'].state}°C </span>
<ha-icon
icon="mdi:water-percent"
style="width: 18px; height: 18px; color: #3399ff;">
</ha-icon><span style="font-size:120%; font-weight: 300; text-align: center;">
${states['sensor.termometr_kukhnia_humidity'].state}%</span>`
]]]
card_mod:
style: |
ha-card {
z-index: 1;
height: 70px !important;
}
- type: custom:mini-graph-card
entities:
- entity: sensor.termometr_kukhnia_temperature
name: Temperature
color: '#ff8c00'
- entity: sensor.termometr_kukhnia_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);
}
- type: custom:mushroom-chips-card
chips:
- type: light
entity: light.verkhnii_svet_gostinaia
content_info: none
card_mod:
style: |
ha-card {
border: none;
box-shadow: none !important;
background: none !important;
}
alignment: end
card_mod:
style: |
ha-card {
position: absolute !important;
height: 100%;
width: 100%;
top: 0px;
z-index: 1;
}
- type: custom:mushroom-chips-card
chips:
- type: light
entity: light.svetilnik_kukhnia
content_info: none
card_mod:
style: |
ha-card {
border: none;
box-shadow: none !important;
background: none !important;
}
alignment: end
card_mod:
style: |
ha-card {
position: absolute !important;
height: 100%;
width: 95%;
top: 0px;
z-index: 1;
}
- type: custom:stack-in-card
cards:
- type: custom:button-card
entity: sensor.termometr_kukhnia_temperature
show_icon: false
name: Kitcten
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: 65%
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:#ff8c00;">
</ha-icon><span style="font-size:120%; font-weight: 300;">
${states['sensor.termometr_kukhnia_temperature'].state}°C </span>
<ha-icon
icon="mdi:water-percent"
style="width: 18px; height: 18px; color: #3399ff;">
</ha-icon><span style="font-size:120%; font-weight: 300; text-align: center;">
${states['sensor.termometr_kukhnia_humidity'].state}%</span>`
]]]
card_mod:
style: |
ha-card {
z-index: 1;
height: 70px !important;
}
- type: custom:mini-graph-card
entities:
- entity: sensor.termometr_kukhnia_temperature
name: Temperature
color: '#ff8c00'
- entity: sensor.termometr_kukhnia_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);
}
- type: custom:mushroom-chips-card
chips:
- type: light
entity: light.verkhnii_svet_gostinaia
content_info: none
card_mod:
style: |
ha-card {
border: none;
box-shadow: none !important;
background: none !important;
}
alignment: end
card_mod:
style: |
ha-card {
position: absolute !important;
height: 100%;
width: 100%;
top: 0px;
z-index: 1;
}
- type: custom:mushroom-chips-card
chips:
- type: light
entity: light.svetilnik_kukhnia
content_info: none
card_mod:
style: |
ha-card {
border: none;
box-shadow: none !important;
background: none !important;
}
alignment: end
card_mod:
style: |
ha-card {
position: absolute !important;
height: 100%;
width: 95%;
top: 0px;
z-index: 1;
}
columns: 1
how to make the entire card clickable?
square: false
type: grid
cards:
- type: horizontal-stack
cards:
- type: custom:stack-in-card
cards:
- type: custom:button-card
entity: sensor.termometr_kukhnia_temperature
show_icon: false
name: Living
tap_action:
action: url
url_path: http://google.com
this does not work
1 Like
See. you havent applied it in the way it should be. you cant apply icon animations to chips in the same way as a normal card. take a look at the chip section.
not the right place to ask this question. you are asking about the button card. ask this question in that thread.
Hi Dimitri, i’ve copied your room card code and it’s great but i have one small issue with it.
As you can see in the screenshot my “woonkamer” label with the graph has a border around it. it does not show in your example and it do not want it in mine either.
Could you help me to get rid of this? Tried lot’s of modifications to the code but the border remains.
Thxn
Sure, again not showing in mine because i use minimalist 
Code
type: custom:stack-in-card
mode: horizontal
cards:
- type: custom:stack-in-card
card_mod:
style: |
ha-card {
border: none !important;
}
cards:
- type: custom:mushroom-template-card
primary: Woonkamer
icon: mdi:sofa
tap_action:
action: navigate
navigation_path: null
icon_color: blue
multiline_secondary: false
card_mod:
style: |
ha-card {
--ha-card-background: none;
--ha-card-box-shadow: none;
--ha-card-border-width: 0;
z-index: 1;
}
- type: custom:mini-graph-card
entities:
- entity: sensor.bedroom_temperature_humidity_temperature
name: Temperature
hours_to_show: 24
line_width: 3
font_size: 50
points_per_hour: 2
animate: true
show:
name: false
icon: false
state: false
legend: false
fill: fade
color_thresholds:
- value: 17
color: '#ffcd05'
- value: 19
color: '#f39c12'
- value: 21
color: '#d35400'
- value: 22.5
color: '#c0392b'
- value: 40
color: '#91f4ff'
- value: 50
color: '#2ae0f5'
- value: 58
color: '#18b3f5'
- value: 65
color: '#005bd1'
- value: 70
color: '#000399'
card_mod:
style: |
ha-card {
position: absolute !important;
top: -10px;
width: 100% !important;
height: 122% !important;
left: 0px;
}
ha-card:after {
content: "";
position: absolute;
width: 100%;
height: 100%;
background: linear-gradient(to right, var(--card-background-color) 20%, transparent);
}
- type: horizontal-stack
cards:
- type: custom:mushroom-climate-card
entity: climate.living
icon: none
show_temperature_control: false
primary_info: none
secondary_info: none
layout: horizontal
tap_action:
action: more-info
card_mod:
style:
mushroom-shape-icon$: |
.shape:after {
content: "{{ state_attr(config.entity, 'current_temperature')|replace('.', ',') }}°";
font-size: 14px;
font-weight: bolder;
color: white;
position: absolute;
}
.shape {
{% set mode = state_attr(config.entity, 'hvac_action') %}
--shape-color: rgba(var(--rgb-
{%- if mode == 'heating' -%}
orange
{%- elif mode == 'cooling' -%}
blue
{%- else -%}
grey
{% endif %}));
}
mushroom-badge-icon$: |
.badge {
{{ 'display: none !important;' if state_attr(config.entity, 'hvac_action') == 'idle' }}
}
.: |
mushroom-badge-icon:after {
content: "{{ states('sensor.alpha2_heat_control_ezr012b5_glv_1_valve_opening') }}";
position: absolute;
display: flex;
justify-content: center;
align-items: center;
background: rgb(var(--rgb-green));
color: rgb(var(--rgb-white));
border-radius: 50%;
border-width: 0;
top: 0;
width: 100%;
height: 100%;
font-size: 0.7em;
}
ha-card {
border: none !important;
}
- type: custom:mushroom-template-card
primary: null
icon: mdi:lightbulb
icon_color: >-
{%if expand(area_entities('woonkamer')) | selectattr ( 'domain' ,
'eq' , 'light' ) | selectattr ( 'state' , 'eq' , 'on' ) | list | count
> 0 %} amber {% else %} grey {% endif %}
entity: light.all_lights
badge_icon: none
badge_color: transparent
card_mod:
style: |
mushroom-badge-icon:after {
content: "{{ expand(area_entities('woonkamer')) | selectattr ( 'domain' , 'eq' , 'light' ) | selectattr ( 'state' , 'eq' , 'on' ) | list | count}}";
position: absolute;
display: flex;
justify-content: center;
align-items: center;
background: rgb(var(--rgb-orange));
color: var(--card-background-color);
border-radius: 50%;
top: 0;
width: 100%;
height: 100%;
font-size: 0.8em;
}
ha-card {
--ha-card-border-width: 0;
}
- type: custom:mushroom-template-card
primary: null
icon: mdi:window-shutter-open
icon_color: >-
{%if expand(area_entities('woonkamer')) | selectattr ( 'domain' ,
'eq' , 'cover' ) | selectattr ( 'state' , 'eq' , 'open' ) | list |
count > 0 %} blue {% else %} grey {% endif %}
entity: light.all_lights
badge_icon: none
badge_color: transparent
card_mod:
style: |
mushroom-badge-icon:after {
content: "{{ expand(area_entities('woonkamer')) | selectattr ( 'domain' , 'eq' , 'cover' ) | selectattr ( 'state' , 'eq' , 'open' ) | list | count}}";
position: absolute;
display: flex;
justify-content: center;
align-items: center;
background: rgb(var(--rgb-orange));
color: var(--card-background-color);
border-radius: 50%;
top: 0;
width: 100%;
height: 100%;
font-size: 0.8em;
}
ha-card {
--ha-card-border-width: 0;
}
1 Like
Hi @dimitri.landerloos thanks! 
Working great now with following code:
Code
type: custom:stack-in-card
mode: horizontal
cards:
- type: custom:stack-in-card
card_mod:
style: |
ha-card {
border: none !important;
--ha-card-border-width: 0;
}
cards:
- type: custom:mushroom-template-card
primary: Woonkamer
icon: mdi:sofa
tap_action:
action: navigate
navigation_path: null
icon_color: blue
multiline_secondary: true
card_mod:
style: |
ha-card {
--ha-card-background: none;
--ha-card-box-shadow: none;
--ha-card-border-width: 0;
z-index: 1;
}
:host {
--mush-icon-border-radius: 12px;
}
- type: custom:mini-graph-card
entities:
- entity: climate.living
attribute: current_temperature
name: null
hours_to_show: 24
line_width: 3
font_size: 50
points_per_hour: 2
animate: true
show:
name: false
icon: false
state: false
legend: false
fill: fade
color: orange
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) 25%, transparent);
}
- type: horizontal-stack
cards:
- type: custom:mushroom-climate-card
entity: climate.living
icon: none
show_temperature_control: false
primary_info: none
secondary_info: none
layout: horizontal
tap_action:
action: more-info
card_mod:
style:
mushroom-shape-icon$: |
.shape:after {
content: "{{ state_attr(config.entity, 'current_temperature')|replace('.', ',') }}°";
font-size: 14px;
font-weight: bolder;
color: white;
position: absolute;
}
.shape {
{% set mode = state_attr(config.entity, 'hvac_action') %}
--shape-color: rgba(var(--rgb-
{%- if mode == 'heating' -%}
orange
{%- elif mode == 'cooling' -%}
blue
{%- else -%}
grey
{% endif %}));
}
mushroom-badge-icon$: |
.badge {
{{ 'display: none !important;' if state_attr(config.entity, 'hvac_action') == 'idle' }}
}
.: |
mushroom-badge-icon:after {
content: "{{ states('sensor.alpha2_heat_control_ezr012b5_glv_1_valve_opening') }}";
position: absolute;
display: flex;
justify-content: center;
align-items: center;
background: rgb(var(--rgb-green));
color: rgb(var(--rgb-white));
border-radius: 50%;
border-width: 0;
top: 0;
width: 100%;
height: 100%;
font-size: 0.7em;
}
ha-card {
border: none !important;
}
- type: custom:mushroom-template-card
primary: null
icon: mdi:lightbulb
icon_color: >-
{%if expand(area_entities('woonkamer')) | selectattr ( 'domain' ,
'eq' , 'light' ) | selectattr ( 'state' , 'eq' , 'on' ) | list | count
> 0 %} amber {% else %} grey {% endif %}
entity: light.all_lights
badge_icon: none
badge_color: transparent
card_mod:
style: |
mushroom-badge-icon:after {
content: "{{ expand(area_entities('woonkamer')) | selectattr ( 'domain' , 'eq' , 'light' ) | selectattr ( 'state' , 'eq' , 'on' ) | list | count}}";
position: absolute;
display: flex;
justify-content: center;
align-items: center;
background: rgb(var(--rgb-orange));
color: var(--card-background-color);
border-radius: 50%;
top: 0;
width: 100%;
height: 100%;
font-size: 0.8em;
}
ha-card {
--ha-card-border-width: 0;
}
- type: custom:mushroom-template-card
primary: null
icon: mdi:window-shutter-open
icon_color: >-
{%if expand(area_entities('woonkamer')) | selectattr ( 'domain' ,
'eq' , 'cover' ) | selectattr ( 'state' , 'eq' , 'open' ) | list |
count > 0 %} blue {% else %} grey {% endif %}
entity: light.all_lights
badge_icon: none
badge_color: transparent
card_mod:
style: |
mushroom-badge-icon:after {
content: "{{ expand(area_entities('woonkamer')) | selectattr ( 'domain' , 'eq' , 'cover' ) | selectattr ( 'state' , 'eq' , 'open' ) | list | count}}";
position: absolute;
display: flex;
justify-content: center;
align-items: center;
background: rgb(var(--rgb-orange));
color: var(--card-background-color);
border-radius: 50%;
top: 0;
width: 100%;
height: 100%;
font-size: 0.8em;
}
ha-card {
--ha-card-border-width: 0;
}
@snoekieboe
How did you got the primary “Woonkamer” name higher? Or is that because you use a secondary?
I want to have it on top of the icon so there is place enough for the mini-graph card.
Thx!
1 Like
Try and just make your secondary a blank symbol. Like this:
secondary: ' '
Copy this exactly as it contains a symbol that is blank. Not just a space.
1 Like
i cant. but you can
Code
type: grid
square: false
columns: 2
cards:
- type: custom:stack-in-card
mode: horizontal
cards:
- type: custom:mushroom-template-card
primary: Achtertuin
secondary: '{{states(''sensor.home_realfeel_temperature'')}}°C'
icon: mdi:tree
icon_color: orange
card_mod:
style:
mushroom-state-item$: |
.container {
flex-direction: column !important;
}
.: |
ha-card {
width: 100%;
}
mushroom-state-info {
padding-top: 10px !important;
}
- type: custom:mushroom-chips-card
chips:
- type: template
icon: mdi:lightbulb
icon_color: orange
card_mod:
style: |
ha-card {
justify-content: center;
height: 40px !important;
border: 1 !important;
box-shadow: none !important;
border-radius: 12px !important;
background: rgba(var(--rgb-{{config.icon_color}}), 0.2) !important;
}
.content {
flex-direction: column !important;
gap: 2px;
}
alignment: center
card_mod:
style:
.: |
mushroom-template-chip {
width: 100%;
}
div.chip-container {
justify-content: center;
}
ha-card {
margin: 10px 12px 12px;
--chip-spacing: 0px !important;
}
1 Like
this is almost perfect! Can i change icon color based on state of the template? For ex light.beneden > on = orange. When light.beneden > off = white
Thanks very much in advance! You are the goat of templating mushroom
Yes you can. they are all template cards so just something like this:
icon_color: >
{% if states('light.yourentity') == 'on' %}
orange
{% else %}
disabled
{% endif %}
both in the main template card and in the chip.
yea i tried it before but for some reason the background doesnt change…
type: custom:stack-in-card
mode: horizontal
cards:
- type: custom:mushroom-template-card
primary: Achtertuin
secondary: '{{states(''sensor.temperature_humidity_sensor_slaapkamer_temperature'')}}°C'
icon: mdi:tree
icon_color: blue
card_mod:
style:
mushroom-state-item$: |
.container {
flex-direction: column !important;
}
.: |
ha-card {
width: 100%;
}
mushroom-state-info {
padding-top: 10px !important;
}
- type: custom:mushroom-chips-card
chips:
- type: template
icon: mdi:lightbulb
icon_color: >
{% if states('light.beneden') == 'on' %}
orange
{% else %}
disabled
{% endif %}
entity: light.beneden
card_mod:
style: |
ha-card {
justify-content: center;
height: 40px !important;
border: 1 !important;
box-shadow: none !important;
transition: 0.5s;
border-radius: 12px !important;
background: rgba(var(--rgb-{{config.icon_color}}), 0.2) !important;
}
.content {
flex-direction: column !important;
gap: 2px;
}
alignment: center
card_mod:
style:
.: |
mushroom-template-chip {
width: 100%;
}
div.chip-container {
justify-content: center;
}
ha-card {
margin: 10px 12px 12px;
--chip-spacing: 0px !important;
}
The background of what? The chip/button to the right?
the background of the chip doesnt change!
Ok. sometimes using {{config.icon_color}} in the card mod section doesnt work well. so we will just use a template there too instead then.
- type: template
icon: mdi:lightbulb
entity: light.office_main_light
icon_color: |
{% if states('light.office_main_light') == 'on' %}
orange
{% else %}
disabled
{% endif %}
card_mod:
style: |
ha-card {
justify-content: center;
height: 40px !important;
border: 1 !important;
box-shadow: none !important;
border-radius: 12px !important;
{% if states('light.office_main_light') == 'on' %}
background: rgba(var(--rgb-orange), 0.2) !important;
{% else %}
background: rgba(var(--rgb-disabled), 0.2) !important;
{% endif %}
}
.content {
flex-direction: column !important;
gap: 2px;
}
just update this section with your entity and the color you want to use.
{% if states('light.office_main_light') == 'on' %}
background: rgba(var(--rgb-orange), 0.2) !important;
{% else %}
background: rgba(var(--rgb-disabled), 0.2) !important;
{% endif %}