Try using a Grid with two columns.
1 Like
I donāt get it but that worked perfectly! Thank You Cookie Monster! 
1 Like
Either one works if thatās affecting the font size of both chip cards. Thank you.
Iāve tried to research how to do things like this myself, but keep coming up empty handed. W3 schools explains the concepts with syntax for direct CSS, but often doesnāt translate for use in these Jinja-based dashboards. Do you recommend a resource for understanding things like the use of div, $, ., etc?
Also, why doesnāt your syntax require card_mod:?
Thanks again!
I should be using card_mod:. It is not required but is recommended and apparently provides better performance.
@rhysb Gotcha. Any recommendations for learning Jinja-style CSS?
I tried the syntax you provided. It works for the chip card in the first stack-in-card, but not the rest in the vertical stack. What changes should I make to get that to apply to the entire vertical stack with 4 stack-in-cards containing a mix of mushroom-chips-card, markdown cards, and mushroom-template-card ?
EDIT: Iāve inspected the elements (CTRL-SHIFT-I) to extract this hierarchy:
div #all columns
div #first column
hui-vertical-stack-card #THIS IS THE STACK IN THE SCREENSHOT ABOVE
shadow-root
div #root
stack-in-card
shadow-root
ha-card #custom-stack-in-card
shadow-root
div
hui-vertical-stack-card
shadow-root
div #root
mushroom-chips-card
shadow-root
ha-card #custom-mushroom-chips-card
shadow-root
div
mushroom-weather-chip
shadow-root
mushroom-chip
Using that, Iām trying to reverse your syntax to understand it a little more. From this, it looks like the $ is used any place thereās a shadow-root. If I basically used that same approach, would I be able to start at the lowest div in the hierarchy that contains all of the elements I would want to effect (e.g. all the way up to the column or columns level div)?
Just sitting in a boring Teams meeting so I tinkered around with backgrounds a bit.
Office and bathroom lights are off:
Office light on, bathroom off:
Office off, bathroom on:
Both on:
Mod for the template card alone:
card_mod: null
style: |
ha-card {
background: var(--card-background-color) url('/local/Icons/area_arbeitszimmer.jpg' )
no-repeat center 0px;
background-size: cover;
background-blend-mode: overlay;
background-color: rgba(var(--rgb-card-background-color),
{% if is_state('light.arbeitszimmer', 'on') %}
0.2
{% elif is_state('light.arbeitszimmer', 'off') %}
0.7
{% endif %});
position: relative;
background-position: center;
background-repeat: no-repeat;
}
full code:
cards:
- type: custom:vertical-stack-in-card
cards:
- type: custom:mushroom-template-card
icon: disabled
entity: light.arbeitszimmer
icon_color: disabled
hold_action:
action: toggle
card_mod: null
style: |
ha-card {
background: var(--card-background-color) url('/local/Icons/area_arbeitszimmer.jpg' )
no-repeat center 0px;
background-size: cover;
background-blend-mode: overlay;
background-color: rgba(var(--rgb-card-background-color),
{% if is_state('light.arbeitszimmer', 'on') %}
0.2
{% elif is_state('light.arbeitszimmer', 'off') %}
0.7
{% endif %});
position: relative;
background-position: center;
background-repeat: no-repeat;
}
- square: false
columns: 4
type: grid
cards:
- type: custom:mushroom-chips-card
chips:
- type: template
content: '{{ states(''sensor.temperature_arbeitszimmer'') | float }}Ā°C'
entity: sensor.temperature_arbeitszimmer
tap_action:
action: more-info
card_mod: null
style: |
ha-card {
--chip-box-shadow: 0px 0px;
}
alignment: center
- type: custom:mushroom-chips-card
chips:
- type: template
entity: binary_sensor.fenster_l_arbeitszimmer
icon: >-
{% if is_state('binary_sensor.fenster_l_arbeitszimmer', 'on')
%}
mdi:window-open
{% else %}
{% endif %}
icon_color: red
card_mod: null
style: |
ha-card {
--chip-box-shadow: 0px 0px;
}
alignment: center
- type: custom:mushroom-chips-card
chips:
- type: template
icon: |-
{% if is_state('fan.arbeitszimmer', 'on') %}
mdi:fan
{% else %}
{% endif %}
icon_color: |-
{% if is_state_attr('fan.arbeitszimmer', 'preset_mode',
'Normal')%}
blue
{% elif is_state_attr('fan.arbeitszimmer', 'preset_mode',
'Nature')%}
green
{% else %}
disabled
{% endif %}
tap_action:
action: more-info
entity: fan.arbeitszimmer
card_mod: null
style: |
@keyframes rotation {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
ha-card {
--chip-box-shadow: 0px 0px;
animation: rotation linear infinite;
{% if states('fan.arbeitszimmer') == 'on' %}
animation-duration: 3s;
{%- else -%}
{%- endif %}
}
alignment: center
- type: custom:mushroom-chips-card
chips:
- type: template
entity: media_player.arbeitszimmer
icon: |-
{% if is_state('media_player.arbeitszimmer', 'playing') %}
mdi:music
{% else %}
{% endif %}
icon_color: |-
{% if is_state('media_player.arbeitszimmer', 'playing') %}
#d8a159
{% else %}
{% endif %}
tap_action:
action: more-info
card_mod: null
style: |
ha-card {
--chip-box-shadow: 0px 0px;
}
alignment: center
- type: custom:vertical-stack-in-card
cards:
- type: custom:mushroom-template-card
icon: disbabled
entity: light.badezimmer
icon_color: disabled
tap_action:
action: navigate
navigation_path: /lovelace-mobile/badezimmer
hold_action:
action: toggle
card_mod: null
style: |
ha-card {
background: var(--card-background-color) url('/local/Icons/area_badezimmer.jpg' )
no-repeat center 0px;
background-size: cover;
background-blend-mode: overlay;
background-color: rgba(var(--rgb-card-background-color),
{% if is_state('light.badezimmer', 'on') %}
0.2
{% elif is_state('light.badezimmer', 'off') %}
0.7
{% endif %});
position: relative;
background-position: center;
background-repeat: no-repeat;
}
- square: false
columns: 4
type: grid
cards:
- type: custom:mushroom-chips-card
chips:
- type: template
icon: null
entity: sensor.temperature_badezimmer
content: '{{ states(''sensor.temperature_badezimmer'') | float }}Ā°C'
tap_action:
action: more-info
card_mod: null
style: |
ha-card {
--chip-box-shadow: 0px 0px;
}
alignment: center
- type: custom:mushroom-chips-card
chips:
- type: template
entity: binary_sensor.fenster_l_badezimmer
icon: |-
{% if is_state('binary_sensor.fenster_l_badezimmer', 'on') %}
mdi:window-open
{% else %}
{% endif %}
icon_color: red
card_mod: null
style: |
ha-card {
--chip-box-shadow: 0px 0px;
}
alignment: center
- type: custom:mushroom-chips-card
chips:
- type: template
card_mod: null
style: |
ha-card {
--chip-box-shadow: 0px 0px;
}
alignment: center
- type: custom:mushroom-chips-card
chips:
- type: template
entity: media_player.bad
icon: |-
{% if is_state('media_player.bad', 'playing') %}
mdi:music
{% else %}
{% endif %}
icon_color: |-
{% if is_state('media_player.bad', 'playing') %}
#d8a159
{% else %}
{% endif %}
tap_action:
action: more-info
card_mod: null
style: |
ha-card {
--chip-box-shadow: 0px 0px;
}
alignment: center
Iām not smart enough to hide the icon shadow totally butā¦
6 Likes
try this to remove the shadow:
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: 0;
}
Thanks, but wonāt work because these are not chips. I mean the template card icon shadow that you can see if you zoom in.
do you mean the black-ish background around the icons under the room picture?
mushroom-shape-icon { --shape-color: none !important; }
3 Likes
Nope, no luck.
Nevermind, stupid-me had still an icon color to find it in the code details that of course prevented your code from functioningā¦
Thanks for keeping up!
1 Like
No one? 
Hopefully just a small error from my side but canāt figure it out.
Probably just a limitation as in the normal button card.
Possible solution: put them in a switch group and toggle that entity.
Second option: put both in a script and call that via service and template.
1 Like
Do you mind sharing the code?
Iām trying to put the icons to show the entities states, like you did.
Which part? The room card?
You canāt toggle 2 entities like that. You need to create a group with those 2 entities in it then toggle the group.