K4k0u
Juin 30, 2023, 1:18
1
Mon problème
Hey, je suis en train de voir pour mettre en place une carte pour les profils de la maison, et je voudrais ajouter un button-card à un endroit précis, mais il ne veux pas se déplacer (le vilain ).
Pouvez-vous m’aider svp, car je ne comprends pas le problème?
Ma configuration
elements:
- type: custom:button-card
entity: sensor.tel_titi_battery_level
size: 18px
show_name: false
show_label: false
styles:
card: null
icon:
- color: |
[[[
if (entity.state < 20) return 'red';
if ((entity.state >= 20) && (entity.state < 80)) return 'orange'
if (entity.state >= 80) return 'cyan';
]]]
style: |
ha-card {
border-width: 0px !important;
}
image: /local/card_persons/empty_frame.png
type: picture-elements
Hello
Regarde la doc => top/left
Abel
Juin 30, 2023, 2:28
3
Bonjour,
Si c’est pour avoir l’état de la batterie en plus, on peut également le faire avec:
Example ci-dessous avec changement de couleur et d’icône en fonction de 3 niveaux de batterie (>75, <25 et entre les deux)
type: custom:mushroom-person-card
entity: person.abel
layout: vertical
secondary_info: none
icon_type: entity-picture
primary_info: none
card_mod:
style: |
mushroom-badge-icon:before {
{% if states('sensor.abels_iphone_xr_battery_level') | int > 75 %}
content: "battery_full";
background: rgb(var(--rgb-green));
{% elif states('sensor.abels_iphone_xr_battery_level') | int < 25 %}
content: "battery_1_bar";
background: rgb(var(--rgb-red));
{% else %}
content: "battery_4_bar";
background: rgb(var(--rgb-orange));
{% endif %}
font-size: 0.9em;
font-family: 'Material Icons';
position: absolute;
display: flex;
justify-content: center;
align-items: center;
right: 40px;
width: var(--mush-badge-size, 16px);
height: var(--mush-badge-size, 16px);
border-radius: var(--mush-badge-border-radius, 50%);
}
Cordialement,
Abel
K4k0u
Juin 30, 2023, 3:34
4
Salut,
J’ai fait la modif en ajoutant:
style:
top: 12%
left: 12%
Cependant, l’icone a une bordure que je ne souhaite pas
j’ai vu pour ajouter cela, mais rien y fait…
.: |
:host {
--border-width: 0px !important;
}