Hi,
Is it just me or is anyone else having issues with the stack-in-card after 2024.3 HA core update? It seems to me that some changes were made that messed up the layout. The stack-in-card now has a gap of 8px just like the HA native stack cards. I know it seems like a long shot, but can there be something done about it? I use it quite a lot in my setup.
A simple rule: if you observe smth unusual with a custom card , check āissuesā in a corr. repo.
In this particular case there is a registered issue.
I didnāt think there will be any new issues opened as it is no longer maintained.
Hello,
I want to ask for help.
Stack-in-card does not work with card-box-shadow configuration.
What should I do? What needs to be changed
type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
card_mod:
style:
mushroom-shape-icon$: |
.shape {
{% if not is_state('climate.nappali_klima', 'off') %}
position: relative;
}
.shape:after {
content: ' ';
position: absolute;
width: inherit;
height: inherit;
border-radius: 500px;
border: 2px solid #ADFF2F;
border-left-color: transparent;
animation: spin 1s linear infinite;
{% endif %}
}
.: |
:host {
{% set sensor_dws_state =
(is_state('binary_sensor.dws_nappali_bal_contact', 'off') or is_state('binary_sensor.dws_nappali_jobb_contact', 'off')) %}
{% set sensor_zone_state =
(is_state('binary_sensor.zone_nappali_bal_abl_open', 'off') or is_state('binary_sensor.zone_nappali_jobb_abl_open', 'off')) %}
{% if sensor_dws_state and sensor_zone_state %}
--ha-card-box-shadow: 0 0 10px red;
{% elif not sensor_dws_state and not sensor_zone_state %}
--ha-card-box-shadow: none;
{% elif sensor_dws_state and not sensor_zone_state %}
--ha-card-box-shadow: 0 0 10px orange;
{% else %}
--ha-card-box-shadow: 0 0 10px grey;
{% endif %}
}
ha-card {
{% if is_state('binary_sensor.zone_nappali_pir_open', 'on') %}
--card-primary-color: red;
{% else %}
--card-primary-color: inherit;
{% endif %}
}
secondary: >-
{{states('sensor.nappali_e6b0_temperature') | float(default=0) |
round(1)}} Ā°C
{{states('sensor.nappali_e6b0_humidity') | float(default=0) | round(1)}} %
icon: mdi:sofa
entity: light.led_driver_nappali_padlo
tap_action:
action: navigate
navigation_path: /dashboard-kezelfelulet/nappali
hold_action:
action: toggle
icon_color: |-
{% if is_state('light.led_driver_nappali_padlo','on') %}
orange
{% endif %}
multiline_secondary: true
badge_color: >-
{% set cover_position = state_attr('cover.redony_nappali',
'current_position') %}
{% if cover_position is defined %}
{% if cover_position == 0 %}
red
{% elif cover_position == 100 %}
green
{% else %}
yellow
{% endif %}
{% else %}
grey
{% endif %}
badge_icon: >-
{% set cover_position = state_attr('cover.redony_nappali',
'current_position') %}
{% if cover_position is defined %}
{% if cover_position == 0 %}
mdi:window-shutter
{% elif cover_position == 100 %}
mdi:window-shutter-open
{% else %}
mdi:window-shutter
{% endif %}
{% else %}
mdi:window-shutter-cog
{% endif %}
primary: Nappali
- type: custom:mushroom-chips-card
chips:
- type: conditional
conditions:
- condition: state
entity: climate.nappali_klima
state_not: 'off'
chip:
type: entity
entity: input_button.press_nappali_klima
content_info: none
icon_color: '#ADFF2F'
tap_action:
action: toggle
hold_action:
action: call-service
service: climate.turn_off
target:
device_id: 2bc7ab9b606c7bf00d2a8bc3deacd372
double_tap_action:
action: more-info
alignment: end
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: 0;
top: -45px;
z-index: 0;
}
- type: conditional
conditions:
- entity: timer.climate_off_timer
state: active
card:
type: entities
entities:
- entity: timer.climate_off_timer
name: ' '
icon: none
state_color: true
card_mod:
style: |
ha-card {
top: -145px;
z-index: 1;
}
.card-content {
color: #ADFF2F;
}
card_mod:
style: |
ha-card {
height: 70px;
}
please only post the relevant bit, and not the huge config so we need to go find your issue ?
I apologize for sharing the long line of code.
My card configuration was working fine before I started using the Stack-in-card. The extension is working properly. The card-box-shadow part from the old configuration does not work.
I am a beginner and I also have language difficulties. I canāt explain it any better. I try to share information according to my knowledge.
The problematic detail, it does not appear:
:host {
{% set sensor_dws_state =
(is_state('binary_sensor.dws_nappali_bal_contact', 'off') or is_state('binary_sensor.dws_nappali_jobb_contact', 'off')) %}
{% set sensor_zone_state =
(is_state('binary_sensor.zone_nappali_bal_abl_open', 'off') or is_state('binary_sensor.zone_nappali_jobb_abl_open', 'off')) %}
{% if sensor_dws_state and sensor_zone_state %}
--ha-card-box-shadow: 0 0 10px red;
{% elif not sensor_dws_state and not sensor_zone_state %}
--ha-card-box-shadow: none;
{% elif sensor_dws_state and not sensor_zone_state %}
--ha-card-box-shadow: 0 0 10px orange;
{% else %}
--ha-card-box-shadow: 0 0 10px grey;
{% endif %}
}
no need to apologize!
first thing I would do I delete the template and make that mod use a fixed color.
that way you can solve your most important quest: which element to target.
Can you post a screenshot of the card, and indicate what you want to colorize?
If it is something for the main stack-card, you will probably need to use custom:mod-card, because stack-cards most of the time do Not have a ha-card element, and mod-card injects that.
If you only want to colorize the border of an individual card, we need to focus on that specific card ofc.
also, in my experience there is nothing we can Not do with stock type entities, vertical-/horizontal-stack or grid card and use card-mod to change some properties and use custom:hui-element to use cards in entities card.
all of the custom stack cards around have their intricacies and they can be unpredictable, or have deeper effect than one might expect.
The card on the left is the original. The card-mod change works. (The box-shadow is red or orange depending on the state of the DW sensor)
The card on the right is the Stack-in-card. Changing the card mod does not work.
if that complet card is the stack-in-card, I believe you could try this
```
type: custom-mod-card
card_mod:
style: |
card:
type: stack-in-card
```
ofc , need to find the correct card for the mod-card, and add that complete template.
I dont use stack-in-card
but, check this Stack-In-Card: Drop-in replacement for vertical-stack-in-card - #258 by Ildar_Gabdullin
hmm, in particular š¹ Card-mod - Add css styles to any lovelace card - #2028 by Ildar_Gabdullin mentions you should be able to see that border style thereā¦
not sure, need more study 
Stack-in-card does not need mod-card.
You can use card-mod explicitly:
type: custom:stack-in-card
...
card_mod:
...
great, as I read in those examples, thanks for confirming,
Ive edited in the post above
then Thomas needs to find the reason his box border doesnt get applied
He needs to look at the keep object. By default, stack in card removes most elements within the stack, including the box shadow:
ā¦ and unfortunately ākeepā may not work after some recent changes in HA frontend, so card-mod should be usedā¦
Chronologically:
ā keep did not work properly for a āstack inside a stackā case,
ā keep MAY not work properly for borders (even after a fix) when shadows were replaced by borders in ~2021.12 (???),
ā keep MAY not work properly after recent changes for stacks (2024.?)
1 Like
Thanks for confirming this - I stopped using it a while back because it wasnāt really being updated. Itās still widely being advocated, especially on the Mushroom thread, which I think is problematic.
Well, I am using stack-in-card mainly inside a decluttering template (define in 1 place, use in many places) - and all issues are fixed by card-mod inside this template.
Iāve already tried this, it doesnāt work, so I turned to the forum for help.
Then I would suggest you to LOCALIZE all issues and continue discussing a PARTICULAR issue in the main card-mod thread. If it can be fixed by card-mod - you will do it.
may I ask, you posted the screenshot of the correctly working card on the left: what card is that, and why dont you want to keep using that?
The card on the left is custom: mushroom template card. I use several such cards on a mobile/tablet dashboard and want to display a lot of information.
I managed to:
- DW sensors: state card box shadow
- Motion sensor: card primary color
- Cover state: badge color, badge icon
- Climate state: icon shape animation
- Lights state: icon color
- Temp/Humidity: secondary
What I would like:
- Climate timer state
- input_button
I would still like to use the mushroom template card with a stack-in-card layout, which allows me to display even more information. That worked. Only, the card-box shadow function, which worked until now, does not work now.
I thought about displaying the states with a chip card, there are several small cards on the mobile display where the chip cards do not fit.
(Sorry if what I write is not visible. Iām not a programmer, I donāt speak English well. )
This card mentions being the replacement for vertical-stack-in-card but hasnāt been updated in quite a long time, while vertical-stack-in-card has been updated just last month.
Iām a bit confused by this - any recommendations as to what is the one that should be used?