Styliser les entités, badges, éléments et marqueurs d'entité
Dans les cartes entities, glance et map, chaque entité peut avoir ses propres options. Pour styliser individuellement ces éléments, ajoutez un paramètre uix à la configuration de l'entité.
Dans ces cas, les styles sont injectés dans un shadowRoot ; l'élément le plus profond est donc ciblé avec :host.
Cela s'applique également aux badges de vue et aux éléments des cartes picture-elements.
type: entities
entities:
- entity: light.bed_light
uix:
style: |
:host {
color: red;
}
- entity: light.ceiling_lights
uix:
style: |
:host {
color: green;
}
- entity: light.kitchen_lights
uix:
style: |
:host {
color: blue;
}
Styliser les lignes conditionnelles des entités
Les lignes conditionnelles d'une carte Entities peuvent être stylisées directement. Si vous stylisez la configuration conditionnelle elle-même, soyez prudent : son conteneur n'est pas dans un shadowRoot et les styles peuvent déborder sur d'autres lignes ou éléments.
::: example Exemples de lignes conditionnelles Styliser directement une ligne conditionnelle, uniquement la ligne de l'entité :
type: entities
entities:
- entity: light.ceiling_lights
- type: conditional
conditions:
- condition: state
entity: input_boolean.test_boolean
state: 'on'
row:
entity: light.bed_light
uix:
style: |
:host {
color: red;
}Styliser la configuration d'une ligne conditionnelle en utilisant le shadowRoot (méthode réservée aux anciennes configurations) :
type: entities
entities:
- entity: light.ceiling_lights
- type: conditional
conditions:
- condition: state
entity: input_boolean.test_boolean
state: "on"
row:
entity: light.bed_light
uix:
style:
hui-toggle-entity-row $ hui-generic-entity-row $: |
.row {
color: red;
}Les deux exemples précédents produisent le résultat suivant :
Styliser une configuration conditionnelle dont les styles « débordent » sur toutes les lignes :
type: entities
entities:
- entity: light.ceiling_lights
- type: conditional
conditions:
- condition: state
entity: input_boolean.test_boolean
state: "on"
row:
entity: light.bed_light
uix:
style: |
:host {
--primary-text-color: red;
}
:::
Styliser les éléments conditionnels de picture-elements
Les éléments d'une condition dans picture-elements peuvent être stylisés directement. Si vous stylisez la configuration conditionnelle elle-même, soyez prudent : son conteneur n'est pas dans un shadowRoot et les styles peuvent déborder sur d'autres lignes ou éléments.
::: example Exemple de condition dans picture-elements Styliser directement un élément conditionnel, et lui seul :
type: picture-elements
image:
media_content_id: https://picsum.photos/id/870/200/100?grayscale&blur=2
elements:
- type: state-badge
entity: light.ceiling_lights
style:
left: 25%
top: 50%
- type: conditional
conditions:
- entity: input_boolean.test_boolean
state: "on"
elements:
- type: state-badge
entity: light.bed_light
style:
left: 75%
top: 50%
uix:
style: |
:host {
color: white;
}Styliser la configuration conditionnelle (méthode réservée aux anciennes configurations) :
type: picture-elements
image:
media_content_id: https://picsum.photos/id/870/200/100?grayscale&blur=2
elements:
- type: state-badge
entity: light.ceiling_lights
style:
left: 25%
top: 50%
- type: conditional
conditions:
- entity: input_boolean.test_boolean
state: "on"
elements:
- type: state-badge
entity: light.bed_light
style:
left: 75%
top: 50%
uix:
style:
hui-state-badge-element $ ha-state-label-badge $: |
:host {
color: white;
}Les deux exemples précédents produisent le résultat suivant :
Styliser la configuration conditionnelle dont les styles « débordent » sur tous les éléments :
type: picture-elements
image:
media_content_id: https://picsum.photos/id/870/200/100?grayscale&blur=2
elements:
- type: state-badge
entity: light.ceiling_lights
style:
left: 25%
top: 50%
- type: conditional
conditions:
- entity: input_boolean.test_boolean
state: "on"
elements:
- type: state-badge
entity: light.bed_light
style:
left: 75%
top: 50%
uix:
style: |
:host {
--primary-text-color: white;
}
:::
Styliser les marqueurs d'entité sur une carte
Depuis Home Assistant 2026.10.0, les marqueurs et leurs images peuvent être stylisés via les parts CSS exportées par ha-map. marker et picture s'appliquent à tous les marqueurs et images. Les parts propres à une entité s'appellent marker-<css-safe-entity_id> ; remplacez le point de l'identifiant par un tiret.
Styliser tous les marqueurs d'une carte :
type: map
show_all: true
auto_fit: true
uix:
style: |
ha-map::part(marker) {
border: red solid 4px !important;
}Styliser uniquement le marqueur de person.dev :
element:
type: map
show_all: true
auto_fit: true
uix:
style: |
ha-map::part(marker-person-dev) {
border: red solid 4px !important;
}Styliser les marqueurs d'entité sur une carte (ancienne méthode)
La méthode utilisée avant Home Assistant 2026.10.0 fonctionne toujours.
Les marqueurs d'entité d'une carte peuvent être stylisés individuellement dans la configuration de la carte ou dans un thème. Les deux exemples stylisent également l'image.
Style défini dans la configuration :
type: map
entities:
- entity: device_tracker.uix_test_person
uix:
style: |
div.marker {
border-color: red !important;
border-width: 5px;
}
theme_mode: autoStyle défini dans le thème. Le sélecteur hôte & permet de cibler l'attribut entity-id de ha-entity-marker.
uix-entity-marker-yaml: |
"&[entity-id='device_tracker.uix_test_person']": |
:host {
--uix-image: /local/media/person_grey.png
}
div.marker {
border-color: red !important;
border-width: 5px;
}Les deux exemples précédents produisent le résultat suivant :
