Spartacus
November 21, 2025, 9:15pm
1
Hi all,
I’m struggling with a cover entity. I’m trying to change the color of the text in the second row and the first arrow (up). child(1) is being ignored. What’s my mistake?
type: entities
entities:
- entity: cover.wohnzimmer_links
name: Wohnen links
secondary_info: position
card_mod:
style:
hui-generic-entity-row ha-cover-controls:
$: |
.state ha-icon-button:nth-child(1) {
color: blue;
}
.state ha-icon-button:nth-child(2) {
color: white;
}
.state ha-icon-button:nth-child(3) {
color: yellow;
}
.: |
:host {
color: green;
}
jeffcrum
November 21, 2025, 9:35pm
2
So, I pasted your code into my test dashboard and updated to one of my covers.
Of course, mine is light instead of dark. But, I get the blue and not the yellow. Grrrr
Spartacus
November 21, 2025, 9:49pm
3
thanks you! I found the issue. If the cover is in endposition, the color of the arrow is ignored. sorry for confusion.
jeffcrum
November 21, 2025, 9:59pm
4
Don’t be sorry. Glad to help identify the issue!!!
Luckily, mine was closed and yours was open. LOL
Spartacus
November 21, 2025, 10:43pm
5
btw,
this is how it currently looks. It’s not final yet, but it’s slowly coming together… Have a nice evening!
The ring shows the position of the cover. Next, I’ll work on the buttons. I don’t have a good idea for that yet…
type: entities
state_color: false
show_header_toggle: false
card_mod:
style:
.: |
ha-card {
--ha-card-border-radius: 0px;
--ha-card-border-color: #3c3c3c;
--ha-card-border-width: 1px;
}
entities:
- entity: cover.wohnzimmer_links
name: Wohnen links
secondary_info: position
icon: mdi:window-shutter-open
card_mod:
style:
hui-generic-entity-row ha-cover-controls:
$: |
.state ha-icon-button:nth-child(1) {
color: blue;
}
.state ha-icon-button:nth-child(2) {
color: white;
}
.state ha-icon-button:nth-child(3) {
color: yellow;
}
hui-generic-entity-row$: |
/* Primärtext (erste Zeile) */
.info {
font-size: 14px;
color: orange;
}
/* Sekundärtext (zweite Zeile) */
.secondary {
font-size: 12px;
--secondary-text-color: lime;
}
/* Badge/Icon selbst – Farbe bleibt orange */
state-badge {
position: relative;
z-index: 2;
color: white;
--mdc-icon-size: 14px;
}
/* Dynamischer Ring mit Transparenzlogik */
state-badge::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: var(--ring-size, 32px);
height: var(--ring-size, 32px);
transform: translate(-50%, -50%);
border-radius: 50%;
pointer-events: none;
z-index: 1;
/* Ringdicke über Mask */
mask: radial-gradient(
closest-side,
transparent calc(100% - var(--ring-thickness, 2px)),
#000 0
);
/* Winkel:
100% (offen) => 0°, 0% (geschlossen) => 360° */
{% set pos = state_attr(config.entity, 'current_position') | float(0) %}
{% set angle = ((100 - pos) / 100 * 360) | int %}
/* Zwei Transparenzphasen in einem conic-gradient:
- 0..angle: opak (Transparenz 0%)
- angle..360: sehr transparent (90% Transparenz) */
background: conic-gradient(
rgba(255,191,0,1) 0deg,
rgba(255,191,0,1) {{ angle }}deg,
rgba(255,191,0,0.1) {{ angle }}deg,
rgba(255,191,0,0.1) 360deg
);
}
.: |
:host {
/* allgemeine Zeilen-Styles */
}
1 Like
VietNgoc
November 22, 2025, 9:10pm
6
Because when the cover is fully open or fully closed, the up or down controls are inactive. Therefore, the icon will have a disabled class, which has a gray color. In your case, the cover is in position 100, so the up button is disabled.
jeffcrum
November 22, 2025, 10:07pm
7
I understand that clicking at 0%/100% should be disabled. But, color change should be changeable in my opinion.
I prefer these buttons I am using:
- type: custom:button-card
entity: cover.big_garage_door
tap_action:
action: call-service
service: script.garage_doors
data:
which_garage: cover.big_garage_door
state:
- value: open
icon: mdi:garage-open-variant
styles:
icon:
- color: red
- value: opening
icon: mdi:arrow-up-box
styles:
icon:
- color: purple
- value: closing
icon: mdi:arrow-down-box
styles:
icon:
- color: purple
- value: closed
icon: mdi:garage-variant
styles:
icon:
- color: lime
show_name: false
show_state: false
- type: custom:button-card
entity: cover.small_garage_door
tap_action:
action: call-service
service: script.garage_doors
data:
which_garage: cover.small_garage_door
state:
- value: open
icon: mdi:garage-open
styles:
icon:
- color: red
- value: opening
icon: mdi:arrow-up-box
styles:
icon:
- color: purple
- value: closing
icon: mdi:arrow-down-box
styles:
icon:
- color: purple
- value: closed
icon: mdi:garage
styles:
icon:
- color: lime
show_name: false
show_state: false
And, the wife just yelled at me. ARE YOU OPENING AND CLOSING THE GARAGE??? LOL. Yup, taking screenshots!!!
I have dark background tablets where the purple is yellow.
And, the script is …
alias: Garage Doors
sequence:
- choose:
- conditions:
- condition: template
value_template: "{{ states(which_garage, 'state') in ('open','opening','on') }}"
sequence:
- action: cover.close_cover
metadata: {}
data_template:
entity_id: "{{ which_garage }}"
- conditions:
- condition: template
value_template: "{{ states(which_garage, 'state') in ('closed','closing','off') }}"
sequence:
- action: cover.open_cover
metadata: {}
data_template:
entity_id: "{{ which_garage }}"
description: ""
It allows for tapping to make it go the ‘other’ direction at any time.
ETA: If I have a need to stop the door at a specific spot, i am not using the app. I am at the controller. So i don’t account for it.
Spartacus
November 23, 2025, 7:11pm
8
Hi,
thank you for your reply and for sharing the code! I will test it !
Have a nice evening!
