- platform: scrape
name: CAC 40 variation
resource: https://www.boursedirect.fr/fr/marche/euronext-paris/cac-40-FR0003500008-PX1-EUR-XPAR/seance
select: ".main-quotation-body > div:nth-child(2) > strong:nth-child(1)"
Alalala ! 
Il faut reprendre cette définition, clairement.
Comment je dois procéder ?
1 « J'aime »
Non, j’avais pas oublié… 
sensor:
- platform: scrape
name: CAC 40 variation SPlit
resource: https://www.boursedirect.fr/fr/marche/euronext-paris/cac-40-FR0003500008-PX1-EUR-XPAR/seance
select: ".main-quotation-body > div:nth-child(2) > strong:nth-child(1)"
value_template: '{{ value.split()[0] }}' #<- On découpe la valeur récupérer pour ne garder que le nombre
unit_of_measurement: "%" #<- On définit l'unité ici
Ce qui donne :
Et donc, en avant pour règles de calcul :
:host {
--paper-item-icon-color: {% if (states('sensor.cac_40_variation'))| float < 0 } red {% else %} green {% endif %};
}
.state > div:nth-child(1) {
color: {% if (states('sensor.cac_40_variation'))|float < 0} red {% else %} green {% endif %};
}
merci.
J’ai une question concernant Split 0 comment cela fonctionne pourquoi 0 et pas 1 ou 2.
Sa me permettra d’apprendre 
1 « J'aime »
Hello tout le monde,
Tout d’abord merci @Clemalex pour sa vidéo très intéressante !
Alors j’ai créé la carte suivante pour mes volets roulants :
type: vertical-stack
title: Centralisation des volets
cards:
- type: custom:button-card
color: rgba(255, 255, 255.)
name: Tout ouvrir
tap_action:
action: call-service
service: cover.open_cover
service_data:
entity_id: cover.tous
- type: custom:button-card
color: rgba(255, 255, 255.)
name: Ouverture principale
tap_action:
action: call-service
service: cover.open_cover
service_data:
entity_id: cover.piece_principale
- type: horizontal-stack
cards:
- type: custom:shutter-card
name: Bureau
entities:
- entity: cover.bureau_2
name: Bureau
buttons_position: left
title_position: bottom
- type: custom:shutter-card
name: Chambre extension
entities:
- entity: cover.chambre_extension_2
name: Extension
buttons_position: left
title_position: bottom
- type: horizontal-stack
cards:
- type: entity
entity: cover.bureau_2
- type: entity
entity: cover.chambre_extension_2
Le rendu sur l’interface web de mon pc est correct
Mais le rendu sur mon iphone en portrait n’est pas génial alors qu’en paysage si…
Mode portrait iPhone :
Mode paysage iPhone :
Une idée a proposer ?
Pour info j’ai testé l’idée du card-mod avec le mode portrait et paysage mais ça ne change rien…
https://forum.hacf.fr/t/carte-differentes-en-mode-portrait-paysage/4127/5
1 « J'aime »
La réaction est celle qui doit être avec ta combinaison de piles…
Passer par layout-card peut être.
Mais en pratique, il est beaucoup plus dur de maintenir un seul tableau de bord compatible pour tous les appareils plutôt que d’avoir un tableau de bord par type d’écran (pc, tablette, smartphone, tv, etc)
Merci j’essaierai par layout.
Après tu n’as pas tort, autant avoir un Dashboard par type d’appareil.
Merci du conseil
Bonjour à tous,
Savez vous comment ajouter le % du secondary info pour mes capteurs d’humidité (inégré a mes capteurs de temp Aqara). Et en question bonus, peut on colorer la valeur selon un delata de % comme pour les temperatures?
- entity: sensor.temperature_abri_piscine
name: A.Piscine
secondary_info:
name: false
entity: sensor.humidity_abri_piscine
style:
hui-generic-entity-row:
$: |
.secondary {
font-size: 12px;
line-height: initial;
}
.: |
:host .text-content {
color:
{% if states(config.entity) | int < 18 %}
lightblue
{% elif states(config.entity) | int < 20 %}
#5294E2
{% elif states(config.entity) | int < 23 %}
orange
{% elif states(config.entity) | int < 26 %}
red
{% elif states(config.entity) | int < 50 %}
#922B21
{% endif %}
;
}
C’est du card-mod, je déplace ici.
Va faire un tour sur les liens du 1er message 
Salut,
Je planche depuis plusieurs jours maintenant sur une carte custom:multiple-entity-row.
La personnalisation étant réalisée avec card-mod, j’ai regardé attentivement ta vidéo et j’ai pu ainsi réaliser pas mal de changements, mais je bute sur une chose.
carte « cuisine ok »
si je laisse le nom de l’entité principale et que je met les caractères de la couleur du background, les trois toggles sont bien aligné sur la droite et visible sur mon pc et aussi sur mon smartphone.
Mais cette solution ne me semble pas très propre.
carte « cuisine nok »
si j’enlève le « state-badge » les toggles s’alignent sur la gauche et pour les réaligner sur la droite j’applique un padding-left, mais du coup c’est ok sur le pc mais sur le smartphone les toggles sortent de l’écran.
type: entities
title: Cuisine ok
entities:
- type: custom:multiple-entity-row
entity: switch.bouton_entree_center
style:
.: |
:host .entities-row div.entity:nth-child(1) span {
{% if is_state('switch.switch_lampe_veranda', 'unavailable') %}
color: red;
{% else %}
color: blue;
{% endif %}
}
:host .entities-row div.entity:nth-child(2) span {
{% if is_state('switch.lustre_cuisine', 'unavailable') %}
color: red;
{% else %}
color: blue;
{% endif %}
}
:host .entities-row div.entity:nth-child(3) span {
{% if is_state('switch.lumiere_cuisine_1', 'unavailable') %}
color: red;
{% else %}
color: blue;
{% endif %}
}
ha-entity-toggle:
$: |
ha-switch {
--switch-unchecked-button-color: blue;
--switch-checked-button-color: yellow;
}
hui-generic-entity-row:
$: |
state-badge {
display: none;
}
.info {
color: rgba(0,0,0,0);
}
entities:
- entity: switch.switch_lampe_veranda
name: Véranda
toggle: true
- entity: switch.lustre_cuisine
name: Lustre
toggle: true
- entity: switch.lumiere_cuisine_1
name: Absence
toggle: true
show_state: false
icon: 'mdi: null'
name: .
tap_action:
action: none
card_mod:
style: |
ha-card {
padding-left: 0% !important;
padding-right: 0px !important;
padding-top: 0px !important;
color: blue;
background-image: url("/local/icones/ampoule_jaune.png");
background-repeat: no-repeat;
background-color: rgba(0,0,0,0);
background-size: 20%;
font-weight: 500;
}
ha-card .card-header {
padding: 10px;
display: unset;
padding-right: 0%;
padding-left: 40%;
}
ha-card .card-header .name {
color: blue;
text-align: left;
font-weight: 900;
letter-spacing: 3px;
}
type: entities
title: Cuisine nok
entities:
- type: custom:multiple-entity-row
entity: switch.bouton_entree_center
style:
.: |
:host .entities-row div.entity:nth-child(1) span {
{% if is_state('switch.switch_lampe_veranda', 'unavailable') %}
color: red;
{% else %}
color: blue;
{% endif %}
}
:host .entities-row div.entity:nth-child(2) span {
{% if is_state('switch.lustre_cuisine', 'unavailable') %}
color: red;
{% else %}
color: blue;
{% endif %}
}
:host .entities-row div.entity:nth-child(3) span {
{% if is_state('switch.lumiere_cuisine_1', 'unavailable') %}
color: red;
{% else %}
color: blue;
{% endif %}
}
:host .entities-row {
padding-left: 290px;
}
ha-entity-toggle:
$: |
ha-switch {
--switch-unchecked-button-color: blue;
--switch-checked-button-color: yellow;
}
hui-generic-entity-row:
$: |
state-badge {
display: none;
}
.info {
display: none;
}
entities:
- entity: switch.switch_lampe_veranda
name: Véranda
toggle: true
- entity: switch.lustre_cuisine
name: Lustre
toggle: true
- entity: switch.lumiere_cuisine_1
name: Absence
toggle: true
show_state: false
icon: 'mdi: null'
name: .
tap_action:
action: none
card_mod:
style: |
ha-card {
padding-left: 0% !important;
padding-right: 0px !important;
padding-top: 0px !important;
color: blue;
background-image: url("/local/icones/ampoule_jaune.png");
background-repeat: no-repeat;
background-color: rgba(0,0,0,0);
background-size: 20%;
font-weight: 500;
}
ha-card .card-header {
padding: 10px;
display: unset;
padding-right: 0%;
padding-left: 40%;
}
ha-card .card-header .name {
color: blue;
text-align: left;
font-weight: 900;
letter-spacing: 3px;
}
Le champion du code aurait-il un conseil ou une solution à me proposer ?
Merci d’avance,
Je suis loin d’être un champion 
Le positionnement est la chose que je maitrise le moins… 
Essaie de ça :
hui-generic-entity-row {
flex-direction: row-reverse;
}
en lieu et place de ça :
:host .entities-row {
padding-left: 290px;
}
SUPER !
ça marche nickel… tu voit que tu es un champion 
Si je comprend bien, les toggles s’adaptent à la largeur en se réalignant en partant de la droite, alors que moi je les réalignais en partant de la gauche sans les adapter à la largeur de la fenêtre.
Merci et bonne soirée,
Super Vidéo, tu arrive bien a expliquer quelques chose de bien compliquer et de pas facile !
Dans ton exemple de météo, j’arrive pas a faire un dernier détail:
Je souhaite changer le padding de .type-weather-forecast mais comme il est dans un shadow-root, si j’ai bien compris, il faut récuperer le plus proche parent (hui-weather-forecast-card) puis renter via un $ : ( sauf que ce me crée pas le card-mod )
'#hui-weather-forecast-card':
$: |
.type-weather-forecast{
padding: 3px 5px 20px 3px;
}
J’ai sûrement loupé un détail
Tu peux entourer l’élément que tu souhaites modifier pour que ce soit plus parlant ? (et m’éviter une recherche dans le code… 
)
Oui pardon, toujours mettre le contexte …
Par contre, je peut pas entourer car hui-weather-forecast-card c’est le div qui contient toutes la carte et .type-weather-forecast aussi mais sous un shadow-root et celui-ci a des grosses marges que je souhaite réduire
Fait un schema ou modifie meme sous paint pour nous montrer le rendu que tu souhaites même grossièrement car là, je ne comprends pas ce que tu souhaites.
Fais un schéma à la main s’il le faut
En faite, j’aimerais arriver à ce résultat :
Visiblement, il faut que je change cette classe ( .type-weather-forecast) qui a un padding de 14px de partout :
Card-mod commence au ha-card.
On voit bien le champ card-mod dans l’arborescence.
Tu devrais pouvoir y accéder normalement.
14px? Sur la capture c’est 16px c’est ça ?