card_mod:
style:
mushroom-fan-percentage-control$: |
@media (prefers-color-scheme: light) {
mushroom-slider {
--main-color: #7fdee9 !important;
--bg-color: #ccf2f6 !important;
}
}
@media (prefers-color-scheme: dark) {
mushroom-slider {
--main-color: #2e5054 !important;
--bg-color: #40494a !important;
}
}
mushroom-shape-icon$: |
.shape {
--shape-color: none !important;
}
1 Like
You can easily add a secondary text without any error - you just need to make sure you add it to the first template card in the stack.
Code
type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
entity: switch.smart_switch_2101058756376290838848e1e94400bc_outlet
icon: mdi:pine-tree
icon_color: green
primary: Luci Albero di Natale
secondary: TEST
- type: custom:mushroom-template-card
icon: mdi:star-four-points
icon_color: yellow
primary: Star
card_mod:
style:
mushroom-shape-icon$: |
.shape {
--shape-color: none;
}
.: |
ha-card {
width: 66px;
top: -66px;
}
ha-state-icon {
animation: star 8s ease infinite alternate;
}
@keyframes star {
0%, 100% { transform: translateY(-10px) rotate(0deg) scale(0.4); }
50% { transform: translateY(-10px) rotate(360deg) scale(0.6); }
}
- type: custom:mushroom-template-card
icon: mdi:gift
icon_color: red
card_mod:
style:
mushroom-shape-icon$: |
.shape {
--shape-color: none;
--icon-size: 20px;
top: 16px;
left: 18px;
}
.: |
ha-card {
width: 66px;
top: -132px;
}
ha-state-icon {
animation: surprise 4s ease infinite;
}
@keyframes surprise {
0%, 20%, 100% { transform: translateY(0); }
2.5% { transform: translateY(-2px) rotate(-27deg); }
5% { transform: translateY(-2px) rotate(21deg); }
7.5% { transform: translateY(-2px) rotate(-15deg); }
10% { transform: translateY(-2px) rotate(9deg); }
12.5% { transform: translateY(0); }
15% { transform: translateY(-1.2px) }
}
card_mod:
style: |
ha-card {
height: 66px;
}
and you then want a second christmas tree but within the same space in the card? like this?
Code
type: custom:stack-in-card
mode: horizontal
cards:
- type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
entity: switch.smart_switch_2101058756376290838848e1e94400bc_outlet
icon: mdi:pine-tree
icon_color: green
primary: Luci Albero di Natale
secondary: TEST
- type: custom:mushroom-template-card
icon: mdi:star-four-points
icon_color: yellow
primary: Star
card_mod:
style:
mushroom-shape-icon$: |
.shape {
--shape-color: none;
}
.: |
ha-card {
width: 66px;
top: -66px;
}
ha-state-icon {
animation: star 8s ease infinite alternate;
}
@keyframes star {
0%, 100% { transform: translateY(-10px) rotate(0deg) scale(0.4); }
50% { transform: translateY(-10px) rotate(360deg) scale(0.6); }
}
- type: custom:mushroom-template-card
icon: mdi:gift
icon_color: red
card_mod:
style:
mushroom-shape-icon$: |
.shape {
--shape-color: none;
--icon-size: 20px;
top: 16px;
left: 18px;
}
.: |
ha-card {
width: 66px;
top: -132px;
}
ha-state-icon {
animation: surprise 4s ease infinite;
}
@keyframes surprise {
0%, 20%, 100% { transform: translateY(0); }
2.5% { transform: translateY(-2px) rotate(-27deg); }
5% { transform: translateY(-2px) rotate(21deg); }
7.5% { transform: translateY(-2px) rotate(-15deg); }
10% { transform: translateY(-2px) rotate(9deg); }
12.5% { transform: translateY(0); }
15% { transform: translateY(-1.2px) }
}
card_mod:
style: |
ha-card {
height: 66px;
}
- type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
entity: switch.smart_switch_2101058756376290838848e1e94400bc_outlet
icon: mdi:pine-tree
icon_color: green
primary: Luci Albero di Natale
secondary: TEST
- type: custom:mushroom-template-card
icon: mdi:star-four-points
icon_color: yellow
primary: Star
card_mod:
style:
mushroom-shape-icon$: |
.shape {
--shape-color: none;
}
.: |
ha-card {
width: 66px;
top: -66px;
}
ha-state-icon {
animation: star 8s ease infinite alternate;
}
@keyframes star {
0%, 100% { transform: translateY(-10px) rotate(0deg) scale(0.4); }
50% { transform: translateY(-10px) rotate(360deg) scale(0.6); }
}
- type: custom:mushroom-template-card
icon: mdi:gift
icon_color: red
card_mod:
style:
mushroom-shape-icon$: |
.shape {
--shape-color: none;
--icon-size: 20px;
top: 16px;
left: 18px;
}
.: |
ha-card {
width: 66px;
top: -132px;
}
ha-state-icon {
animation: surprise 4s ease infinite;
}
@keyframes surprise {
0%, 20%, 100% { transform: translateY(0); }
2.5% { transform: translateY(-2px) rotate(-27deg); }
5% { transform: translateY(-2px) rotate(21deg); }
7.5% { transform: translateY(-2px) rotate(-15deg); }
10% { transform: translateY(-2px) rotate(9deg); }
12.5% { transform: translateY(0); }
15% { transform: translateY(-1.2px) }
}
card_mod:
style: |
ha-card {
height: 66px;
}
1 Like
Great, now I can write secondary, but if I want understand if my lights are on (for example Iām not home) I cannot understand, because if I write āsecondary: secondary: XXXā, my card disappear.
It would be Wonderfull if can change the icon for second xmass tree. Have you an idea?
type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
entity: switch.smart_switch_2101058756376290838848e1e94400bc_outlet
icon: mdi:pine-tree
icon_color: green
primary: Luci Albero di Natale
secondary: {{ states.xxx }}
- type: custom:mushroom-template-card
icon: mdi:star-four-points
icon_color: yellow
primary: Star
card_mod:
style:
mushroom-shape-icon$: |
.shape {
--shape-color: none;
}
.: |
ha-card {
width: 66px;
top: -66px;
}
ha-state-icon {
animation: star 8s ease infinite alternate;
}
@keyframes star {
0%, 100% { transform: translateY(-10px) rotate(0deg) scale(0.4); }
50% { transform: translateY(-10px) rotate(360deg) scale(0.6); }
}
- type: custom:mushroom-template-card
icon: mdi:gift
icon_color: red
card_mod:
style:
mushroom-shape-icon$: |
.shape {
--shape-color: none;
--icon-size: 20px;
top: 16px;
left: 18px;
}
.: |
ha-card {
width: 66px;
top: -132px;
}
ha-state-icon {
animation: surprise 4s ease infinite;
}
@keyframes surprise {
0%, 20%, 100% { transform: translateY(0); }
2.5% { transform: translateY(-2px) rotate(-27deg); }
5% { transform: translateY(-2px) rotate(21deg); }
7.5% { transform: translateY(-2px) rotate(-15deg); }
10% { transform: translateY(-2px) rotate(9deg); }
12.5% { transform: translateY(0); }
15% { transform: translateY(-1.2px) }
}
card_mod:
style: |
ha-card {
height: 66px;
}
try and do it like this:
secondary: |-
{{ states.xxx }}
or this:
secondary: '{{ states.xxx }}'
fantastic.
Now it works.
Anyway, If I would vertical layout? I add layout: vertical but doesnāt work.
this card for my others lights:
type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
entity: switch.koogeek_o1eu_b56a4b_outlet3
icon: mdi:pine-tree
icon_color: green
primary: Addobbo Portale
- type: custom:mushroom-template-card
icon: mdi:star-four-points
icon_color: yellow
primary: Star
card_mod:
style:
mushroom-shape-icon$: |
ha-icon {
--icon-animation: star 8s ease infinite alternate;
}
@keyframes star {
0%, 100% { transform: translateY(-10px) rotate(0deg) scale(0.4); }
50% { transform: translateY(-10px) rotate(360deg) scale(0.6); }
}
.shape {
--shape-color: none;
}
.: |
ha-card {
width: 66px;
top: -66px;
}
- type: custom:mushroom-template-card
icon: mdi:grain
icon_color: red
card_mod:
style:
mushroom-shape-icon$: |
ha-icon {
--icon-animation: flash 2s steps(1) infinite, lights 2s infinite;
clip-path: polygon(51% 15%, 24% 74%, 74% 74%);
}
@keyframes flash {
50% { transform: rotateY(180deg); }
}
@keyframes lights {
0%, 100% {--icon-color: rgb(var(--rgb-red)); }
6.25% { --icon-color: rgb(var(--rgb-deep-orange)); }
12.5% { --icon-color: rgb(var(--rgb-orange)); }
18.75% { --icon-color: rgb(var(--rgb-amber)); }
25% { --icon-color: rgb(var(--rgb-yellow)); }
31.25% { --icon-color: rgb(var(--rgb-lime)); }
37.5% { --icon-color: rgb(var(--rgb-light-green)); }
43.75% { --icon-color: rgb(var(--rgb-green)); }
50% { --icon-color: rgb(var(--rgb-teal)); }
56.25% { --icon-color: rgb(var(--rgb-cyan)); }
62.5% { --icon-color: rgb(var(--rgb-light-blue)); }
68.75% { --icon-color: rgb(var(--rgb-blue)); }
75% { --icon-color: rgb(var(--rgb-indigo)); }
81.25% { --icon-color: rgb(var(--rgb-deep-purple)); }
87.5% { --icon-color: rgb(var(--rgb-purple)); }
93.75% { --icon-color: rgb(var(--rgb-pink)); }
}
.shape {
--shape-color: none;
}
.: |
ha-card {
width: 66px;
top: -132px;
}
- type: custom:mushroom-template-card
icon: mdi:gift
icon_color: red
card_mod:
style:
mushroom-shape-icon$: |
ha-icon {
--icon-animation: surprise 4s ease infinite;
}
@keyframes surprise {
0%, 20%, 100% { transform: translateY(0); }
2.5% { transform: translateY(-2px) rotate(-27deg); }
5% { transform: translateY(-2px) rotate(21deg); }
7.5% { transform: translateY(-2px) rotate(-15deg); }
10% { transform: translateY(-2px) rotate(9deg); }
12.5% { transform: translateY(0); }
15% { transform: translateY(-1.2px) }
}
.shape {
--shape-color: none;
--icon-size: 18px;
top: 18px;
left: 18px;
}
.: |
ha-card {
width: 66px;
top: -198px;
}
card_mod:
style: |
ha-card {
height: 66px;
}
its not good and in your updated post thereās not a solution. can you give me the right way?
please do ask for everything that you want to do and then what you have tried in the first post. i love helping people, but it isnt particularly fun to work on the same card multiple times.
type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
entity: switch.smart_switch_2101058756376290838848e1e94400bc_outlet
icon: mdi:pine-tree
icon_color: green
primary: Luci Albero di Natale
secondary: |-
{{states('light.office_main_light') | capitalize}}
layout: vertical
- type: custom:mushroom-template-card
icon: mdi:star-four-points
icon_color: yellow
layout: vertical
card_mod:
style:
mushroom-shape-icon$: |
.shape {
--shape-color: none;
}
.: |
ha-card {
top: -118px;
background: none !important;
}
ha-state-icon {
animation: star 8s ease infinite alternate;
}
@keyframes star {
0%, 100% { transform: translateY(-10px) rotate(0deg) scale(0.4); }
50% { transform: translateY(-10px) rotate(360deg) scale(0.6); }
}
- type: custom:mushroom-template-card
icon: mdi:gift
icon_color: red
layout: vertical
card_mod:
style:
mushroom-shape-icon$: |
.shape {
--shape-color: none;
--icon-size: 20px;
top: 16px;
left: 18px;
}
.: |
ha-card {
top: -183px;
right: 10px;
background: none !important;
}
ha-state-icon {
animation: surprise 4s ease infinite;
}
@keyframes surprise {
0%, 20%, 100% { transform: translateY(0); }
2.5% { transform: translateY(-2px) rotate(-27deg); }
5% { transform: translateY(-2px) rotate(21deg); }
7.5% { transform: translateY(-2px) rotate(-15deg); }
10% { transform: translateY(-2px) rotate(9deg); }
12.5% { transform: translateY(0); }
15% { transform: translateY(-1.2px) }
}
card_mod:
style: |
ha-card {
height: 116px;
}
thanksā¦ I thought to layout after your last post. Sorry!
never any need to apologise. just want to keep it in mind.
always best practice to have 1 thing in mind that you want and not have it evolve multiple times if you want someones help 
Iād like to keep the layout the way it is. Just wanted to move it to the top of the card to align with the one on its side and keep them the same look.
Oh, i see. If you provide the full grid of cards i can probably help with that with some card mod.
itās just a regular mushroom-template-card but I also need for the light and entity cards.
Thank you for helping me!
type: custom:mushroom-template-card
primary: '{{entity}}'
secondary: How are you?
icon: mdi:thermometer-lines
icon_color: blue
entity: sensor.clock_sensor_temperature
fill_container: true
view_layout:
grid-area: m6
Could make it with card mod. Hereās the code:
type: custom:mushroom-template-card
primary: '{{entity}}'
secondary: How are you?
icon: mdi:thermometer-lines
icon_color: blue
entity: sensor.clock_sensor_temperature
fill_container: true
view_layout:
grid-area: m6
card_mod:
style:
.: |
ha-card {
justify-content: start !important;
}
Iām having this issue too ā does anyone have a fix?
This time I have only one ideaā¦
I need to change icon color in these chips, if doors/windows are open (green) or closed (red)
this is my created code:
type: custom:mushroom-chips-card
chips:
- type: entity
entity: binary_sensor.portiere_t_crock
icon: mdi:car-door
icon_color: |-
{% if is_state('binary_sensor.portiere_t_crock', 'on') %}
green
{% else %}
red
{% endif %}
tap_action:
action: toggle
card_mod:
style: >
ha-card {
--chip-background: rgba(var(--rgb-card-background-color),
0.);background: rgba(var(--rgb-card-background-color), 0.);
- type: entity
entity: binary_sensor.t_crock_windows_closed
icon_color: |-
{% if is_state('binary_sensor.t_crock_windows_closed', 'on') %}
green
{% else %}
red
{% endif %}
card_mod:
style: >
ha-card {
--chip-background: rgba(var(--rgb-card-background-color),
0.);background: rgba(var(--rgb-card-background-color), 0.);
alignment: end
anyway my icons remain white or greyā¦ could you help me please?
Use a template chip. You cant use templates outside of template chips/cards unless you use card mod.
Thanks to everyoneās inspiration and support Iāve made my new dashboard and Iām really liking how it looks.
8 Likes
im tryng this:
type: mushroom-template-card
card:
- type: custom:mushroom-chips-card
chips:
- type: template
entity: binary_sensor.portiere_t_crock
icon: mdi:car-door
icon_color: |-
{% if is_state('binary_sensor.portiere_t_crock', 'on') %}
green
{% else %}
red
{% endif %}
tap_action:
action: toggle
card_mod:
style: >
ha-card {
--chip-background: rgba(var(--rgb-card-background-color),
0.);background: rgba(var(--rgb-card-background-color), 0.);
- type: template
entity: binary_sensor.t_crock_windows_closed
icon_color: |-
{% if is_state('binary_sensor.t_crock_windows_closed', 'on') %}
green
{% else %}
red
{% endif %}
card_mod:
style: >
ha-card {
--chip-background: rgba(var(--rgb-card-background-color),
0.);background: rgba(var(--rgb-card-background-color), 0.);
alignment: end
But doesnt workā¦ where can I modify?
You dont have an icon defined you need to choose an icon when using the template chip. Almost all you are doing here could he done via the UI which would probably make it easier for you.
Probablyā¦ but I donāt have the choice to use interface
And in my code I have wrote the iconā¦ I donāt understand icon not diefined
EDIT: SOLVED thanks for your advice
You do have a choice.
Move code that you are applying to all chips to the main chip card instead like this:
type: custom:mushroom-chips-card
chips:
- type: template
entity: binary_sensor.portiere_t_crock
icon: mdi:car-door
icon_color: |-
{% if is_state('binary_sensor.portiere_t_crock', 'on') %}
green
{% else %}
red
{% endif %}
tap_action:
action: toggle
- type: template
entity: binary_sensor.t_crock_windows_closed
icon_color: |-
{% if is_state('binary_sensor.t_crock_windows_closed', 'on') %}
green
{% else %}
red
{% endif %}
alignment: end
card_mod:
style: |
ha-card {
--chip-background: rgba(var(--rgb-card-background-color),0.);
background: rgba(var(--rgb-card-background-color), 0.);
}
You can now use the visual editor.
Sure.
type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
primary: Stua
secondary: |-
{{ states('sensor.verisure_rv_stua_temp') }}Ā°C |
{{ states('sensor.verisure_rv_stua_fukt') }} %
icon: mdi:television
entity: light.stua_uten_stuebordlys_dz
icon_color: |-
{% if is_state('light.under_trappa', 'on') %}
orange
{% elif is_state('light.ved_vitrineskapet', 'on') %}
orange
{% elif is_state('light.taklyset_i_spisestua', 'on') %}
orange
{% endif %}
tap_action:
action: toggle
hold_action:
action: navigate
navigation_path: /lovelace-panel/stua
multiline_secondary: false
layout: horizontal
fill_container: false
card_mod:
style: |
ha-state-icon::after {
content: '{{ expand(states.light) |selectattr('state', 'eq', 'on') |selectattr('entity_id', 'in', area_entities('Stua')) |rejectattr('entity_id', 'search', 'dz') |map(attribute='entity_id') |list | count }}';
position: absolute;
top: -11%;
right: -11%;
display: flex;
justify-content: center;
align-items: center;
width: 15px;
height: 15px;
font-size: 9px;
font-weight: 700;
{% if expand(states.light)
|selectattr('state', 'eq', 'on')
|selectattr('entity_id', 'in', area_entities('Stua'))
|rejectattr('entity_id', 'search', 'dz')
|map(attribute='entity_id')
|list | count > 0
%}
background-color: rgba(var(--rgb-disabled), 0.5);
{% else %}
background-color: rgba(var(--rgb-disabled), 0.5);
{% endif %}
border-radius: 50%;
}
{% if states('binary_sensor.aqara_motion_stua_motion_1') == 'on' %}
ha-state-icon::before {
content: 'directions_walk';
position: absolute;
font-family: 'Material Icons';
top: -11%;
left: -11%;
display: flex;
justify-content: center;
align-items: center;
width: 15px;
height: 15px;
font-size: 11px;
background: rgba(var(--rgb-disabled), 0.5);
color: rgba(var(--rgb-red), 1);
border-radius: 50%;
animation: blink 1s linear infinite;
}
{% endif %}
@keyframes blink {
50% {opacity: 0;}
}
- type: custom:mushroom-chips-card
chips:
- type: template
icon: |-
{% if is_state(config.entity, 'on') %}
mdi:radiator
{% else %}
mdi:radiator-off
{% endif %}
entity: switch.hue_kontakt_stua_1
icon_color: |-
{% if is_state(config.entity, 'on') %}
red
{% else %}
blue
{% endif %}
tap_action:
action: toggle
hold_action:
action: more-info
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-icon-size: 0.8em
- type: template
entity: light.over_stuebordet
icon: |-
{% if is_state(config.entity, 'on') %}
mdi:ceiling-light
{% else %}
mdi:ceiling-light-outline
{% endif %}
icon_color: |-
{% if is_state(config.entity, 'on') %}
orange
{% else %}
grey
{% endif %}
content_info: none
tap_action:
action: toggle
hold_action:
action: more-info
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-icon-size: 0.8em
- type: template
entity: light.stua_uten_stuebordlys_dz
content_info: none
icon: |-
{% if is_state(config.entity, 'on') %}
mdi:lamp
{% else %}
mdi:lamp-outline
{% endif %}
icon_color: |-
{% if is_state(config.entity, 'on') %}
orange
{% else %}
grey
{% endif %}
tap_action:
action: toggle
hold_action:
action: more-info
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-icon-size: 0.8em
- type: template
entity: remote.philips_tv_stue_tv_remote
icon_color: green
icon: mdi:remote
hold_action:
action: false
tap_action:
action: call-service
service: script.popup_fjernkontroll_philips
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-icon-size: 0.8em
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: 0;
margin-top: 10px;
alignment: end
And here is one with a slider, because when on mobile you can only see 4 chips, but with the slider you can have more alligned next to eachother.
type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
primary: Benjamin
secondary: |-
{{ states('sensor.verisure_rv_benjamin_temp') }}Ā°C |
{{ states('sensor.verisure_rv_benjamin_fukt') }} %
icon: mdi:face-man
entity: light.rommet_til_benjamin_dz
icon_color: |-
{% if is_state('light.benjamin_lampe', 'on') %}
blue
{% elif is_state('light.taklyset_til_benjamin_1', 'on') %}
blue
{% endif %}
tap_action:
action: toggle
hold_action:
action: navigate
navigation_path: /lovelace-panel/ungene
multiline_secondary: false
card_mod:
style: |
ha-state-icon::after {
content: '{{ expand(states.light) |selectattr('state', 'eq', 'on') |selectattr('entity_id', 'in', area_entities('Benjamin')) |rejectattr('entity_id', 'search', 'dz') |map(attribute='entity_id') |list | count }}';
position: absolute;
top: -11%;
right: -11%;
display: flex;
justify-content: center;
align-items: center;
width: 15px;
height: 15px;
font-size: 9px;
font-weight: 700;
{% if expand(states.light)
|selectattr('state', 'eq', 'on')
|selectattr('entity_id', 'in', area_entities('Benjamin'))
|rejectattr('entity_id', 'search', 'dz')
|map(attribute='entity_id')
|list | count > 0
%}
background-color: rgba(var(--rgb-disabled), 0.5);
{% else %}
background-color: rgba(var(--rgb-disabled), 0.5);
{% endif %}
border-radius: 50%;
}
{% if states('input_boolean.benjamin_motion') == 'on' %}
ha-state-icon::before {
content: 'directions_walk';
position: absolute;
font-family: 'Material Icons';
top: -11%;
left: -11%;
display: flex;
justify-content: center;
align-items: center;
width: 15px;
height: 15px;
font-size: 11px;
background: rgba(var(--rgb-disabled), 0.5);
color: rgba(var(--rgb-red), 1);
border-radius: 50%;
animation: blink 1s linear infinite;
}
{% endif %}
@keyframes blink {
50% {opacity: 0;}
}
layout: horizontal
fill_container: false
- type: custom:mushroom-chips-card
chips:
- type: template
icon: |-
{% if is_state(config.entity, 'heat') %}
mdi:radiator
{% else %}
mdi:radiator-off
{% endif %}
entity: climate.benjamin
icon_color: |-
{% if is_state(config.entity, 'heat') %}
red
{% else %}
blue
{% endif %}
tap_action:
action: toggle
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-icon-size: 0.8em
- type: template
entity: light.taklyset_til_benjamin_dz
icon: |-
{% if is_state(config.entity, 'on') %}
mdi:ceiling-light
{% else %}
mdi:ceiling-light-outline
{% endif %}
icon_color: |-
{% if is_state(config.entity, 'on') %}
orange
{% else %}
grey
{% endif %}
content_info: none
tap_action:
action: toggle
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-icon-size: 0.8em
- type: template
entity: input_boolean.benjamin_nattlys_10
icon: |-
{% if is_state(config.entity, 'on') %}
mdi:weather-night
{% else %}
mdi:weather-night
{% endif %}
icon_color: |-
{% if is_state(config.entity, 'on') %}
purple
{% else %}
grey
{% endif %}
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: 0;
--chip-icon-size: 0.8em
- type: template
entity: input_boolean.benjamin_auto
icon: |-
{% if is_state(config.entity, 'on') %}
mdi:lightbulb-auto
{% else %}
mdi:lightbulb-auto-outline
{% endif %}
icon_color: |-
{% if is_state(config.entity, 'on') %}
green
{% else %}
grey
{% endif %}
hold_action:
action: false
tap_action:
action: toggle
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-icon-size: 0.8em
- type: template
entity: input_boolean.boolean_benjamin_tv_auto
icon: |-
{% if is_state(config.entity, 'on') %}
mdi:television
{% else %}
mdi:television-off
{% endif %}
icon_color: |-
{% if is_state(config.entity, 'on') %}
green
{% else %}
grey
{% endif %}
hold_action:
action: false
tap_action:
action: toggle
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-icon-size: 0.8em
- type: template
entity: media_player.lg_tv_benjamin_tv
icon_color: blue
icon: mdi:remote-tv
hold_action:
action: false
tap_action:
action: call-service
service: script.popup_fjernkontroll_lg_benjamin
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-icon-size: 0.8em
card_mod:
style: |
ha-card {
background: none !important;
height: 40px;
flex-wrap: nowrap;
width: max-content;
align-items: center;
display: flex;
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: 0;
margin-top: 10px;
padding-bottom: 0px;
}
:host {
overflow-x: scroll;
overflow-y: hidden;
direction: ltr;
margin: 0px !important;
padding-left: 12px;
padding-bottom: 0px;
margin-top: 10px;
}
alignment: end
3 Likes