Adding tap_action to stack-in-card
(probably could be used in some other cases as well - like vertical-stack, horizontal-stack)
Stack-in-card does not support “tap_action”.
Here is a rather cumbersome way:
- Create a wide (500px) but low jpg (to avoid size issues) - let it be of white color for simplicity (next you will realize that for dark themes this is not the best color; probably transparent png should be used instead). Save it in a corresponding folder in “/local”.
- Assume a stack-in-card contains “actionable” child cards like Tile, Entity etc (some could be not “actionable” - like Markdown).
- Use this code:
code
type: custom:mod-card
card:
type: vertical-stack
cards:
- type: picture
image: /local/images/test/white_low.jpg #your "low-profile" image
tap_action: #as an example
action: more-info
entity: sun.sun
- type: custom:stack-in-card
title: some title # up to you
keep: # up to you
background: true
outer_padding: true
border_radius: true
border: true
cards:
- type: markdown #this card is not actionable
content: markdown
- type: entity #this card is actionable
entity: zone.home
card_mod:
style:
hui-vertical-stack-card $: |
div#root {
pointer-events: auto; /* restoring default actions */
}
.: |
ha-card {
pointer-events: none; /* making it transparent */
}
card_mod:
style:
hui-vertical-stack-card $: |
div#root {
display: grid;
}
div#root > * {
grid-column-start: 1;
grid-row-start: 1;
transition: none; /* helps a bit */
}
div#root > :first-child {
--ha-card-background: rgba(0,0,0,0);
--ha-card-border-width: 0px;
--ha-card-box-shadow: none; /* for those who uses box-shadow */
}
As a result, the Entity card has its own “tap_action”, Markdown does not cause any events, and the stack itself “gets” own tap_action.
(of course after making a decluttering card out of this example you will get an “actionable” stack-in-card template)