Hi all - am really enjoying card-mod. I have successfully used it to modify the flex-horseshoe card to very closely resemble the light entity cards just to keep my dashboard uniform. Most notable to this question, I needed to change the height to 100% on some elements.
However, when I take exactly the same code that works on a flex-horseshoe card and encapsulate it in a declutter template, the height reverts to normal.
In the original, version (card-mod + flex-horseshoe), itās pretty easy to add āheight: 100% !important;ā to the ha-card with card-mod.
However, the addition of declutter (declutter + card-mod + flex-horseshoe) adds a number of encapsulating elements, most notably a div in a higher shadow root that also needs to get that mod. Verified that in developer mode and it works (highlighted below).
So guess, my question is how do I navigate up the shadow DOM to that element and mod it? Have tried various permutationsā¦ :host only goes one level up, and tried various permutations of $ to no avail. Is there a guide anywhere to $, # and the other syntax that I can read?
Try as I might, I am unable to query my way up to that div from inside the declutter template.
Any help for a community member who seems to be developing a case of OCD about this
?
Code below for original
- type: custom:flex-horseshoe-card
style: |
circle {
cx: 50%;
cy: 50%;
r: 40%;
#stroke-linecap: round;
padding-top: -88em;
#transform: rotate(-220deg, 100, 100);
}
circle.horseshoe__scale {
stroke-dasharray: 363.028484, 180;
}
ha-card {
height: 100% !important;
box-sizing: border-box;
position: relative;
overflow: hidden;
}
div.container::after {
content: "Geyser(orig)";
margin-top: -6px;
font-size: 1.2rem;
text-align: center;
}
entities:
- entity: sensor.geyser_power
decimals: 0
name: Geyser
unit: W
tap_action:
action: more-info
- entity: switch.geyser
icon: mdi:water-boiler
tap_action:
action: call-service
service: switch.toggle
service_data:
entity_id: switch.geyser
horseshoe_scale:
min: 0
max: 4000
width: 5
color: var(--text-primary-color)
horseshoe_state:
width: 5
color: var(--primary-color)
animations:
entity.1:
- state: 'on'
icons:
- animation_id: 0
styles:
- color: var(--switch-checked-color);
- state: 'off'
icons:
- animation_id: 0
styles:
- color: var(--switch-unchecked-button-color);
show:
horseshoe_style: fixed
layout:
states:
- id: 0
entity_index: 0
xpos: 50
ypos: 90
uom_font_size: 1.5
styles:
- font-size: 1.5rem;
- opacity: 0.9;
icons:
- id: 0
animation_id: 0
xpos: 50
ypos: 63
entity_index: 1
icon_size: 8.5
styles:
- color: var(--primary-text-color);
color_stops:
'0': var(--primary-background-color)
'90': var(--primary-color)
Code below for declutter template (which renders, but as per above the height is off)
modded_horseshoe:
card:
type: custom:flex-horseshoe-card
card_mod:
style: |
circle {
cx: 50%;
cy: 50%;
r: 40%;
#stroke-linecap: round;
padding-top: -88em;
#transform: rotate(-220deg, 100, 100);
}
circle.horseshoe__scale {
stroke-dasharray: 363.028484, 180;
}
ha-card {
height: 100% !important;
box-sizing: border-box;
position: relative;
overflow: hidden;
}
div.container::after {
content: "Geyser(decl)";
margin-top: -6px;
font-size: 1.2rem;
text-align: center;
}
entities:
- entity: sensor.geyser_power
decimals: 0
name: Geyser
unit: W
tap_action:
action: more-info
- entity: switch.geyser
icon: mdi:water-boiler
tap_action:
action: call-service
service: switch.toggle
service_data:
entity_id: switch.geyser
horseshoe_scale:
min: 0
max: 4000
width: 5
color: var(--text-primary-color)
horseshoe_state:
width: 5
color: var(--primary-color)
animations:
entity.1:
- state: 'on'
icons:
- animation_id: 0
styles:
- color: var(--switch-checked-color);
- state: 'off'
icons:
- animation_id: 0
styles:
- color: var(--switch-unchecked-button-color);
show:
horseshoe_style: fixed
layout:
states:
- id: 0
entity_index: 0
xpos: 50
ypos: 90
uom_font_size: 1.5
styles:
- font-size: 1.5rem;
- opacity: 0.9;
icons:
- id: 0
animation_id: 0
xpos: 50
ypos: 63
entity_index: 1
icon_size: 8.5
styles:
- color: var(--primary-text-color);
color_stops:
'0': var(--primary-background-color)
'90': var(--primary-color)