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.
As I already said in an intermediate posting, I later discovered that the best way for this fine tuning are Mushroom Themes. They allow you to control many aspects of the Mushroom Cards.
If you already have a theme in place, you can simply add the relevant mushroom variables to your theme and redefine their values. I.e. one of my own themes is call “AnJoWi Light Theme” and I simply added some mushroom vars to its YAML file:
AnJoWi Light Theme:
# my existing theme settings
primary-color: rgb(26, 115, 232)
...
# my new mushroom settings:
mush-spacing: 5px # was: 12px, i.e. space between Icon+Name and Slider
mush-card-primary-font-size: 18px # was: 14px
mush-card-primary-font-weight: normal # was: bold
And today I found that in conjunction with card-mod 3 of Thomas Lovén it is even possible to add these mushroom theme vars to individual mushroom cards!
To do this you must install card-mod 3 and then add the theme vars to your mushroom card’s yaml definition like this:
type: custom:mushroom-light-card
entity: light.kitchen
card_mod:
style: |
:host {
height: 90px;
--mush-icon-size: 52px;
--mush-icon-symbol-size: 0.8em;
--mush-spacing:5px;
}
This is really VERY helpful.
3 Likes