Et moi c'est clemalex

Pas tout à fait, j’ai utilisé plutôt un champ personnel et la coloration du texte se fait en fonction de la valeur du capteur sensor.essence_gazole_best_price :

color_type: icon
custom_fields:
  price: |
    [[[
     return `
       <span><span style="color: var(--text-color-sensor);">${states['sensor.hacf_essence_bordeaux_auchan_gazole_b10_price'].state}</span></span>`
    ]]]
entity: sensor.hacf_essence_bordeaux_auchan_gazole_b10_price 
icon: 'mdi:gas-station-outline'
name: Auchan
show_icon: false
show_last_changed: false
show_name: true
styles:
  card:
    - border: 2px solid var(--primary-color)
    - border-radius: 5px
    - height: 1em
  custom_fields:
    price:
      - background-color: 'rgba(0, 0, 0, 0)'
      - position: absolute
      - bottom: '-10px'
      - right: 5px
      - font-size: 15px
      - line-height: 20px
      - '--text-color-sensor': |
          [[[
            if ( (states['sensor.essence_gazole_best_price'].state == 'Auchan') ) return 'var(--sp95-color)';
            else return 'var(--primary-color)';
          ]]]
  grid:
    - position: relative
    - grid-template-areas: '"n i s"'
  label:
    - font-size: 10px
    - color: 'rgba(0,0,0,0)'
  name:
    - font-variant: small-caps
    - justify-self: start
    - padding: 0 15px
    - color: |
        [[[
          if ( (states['sensor.essence_gazole_best_price'].state == 'Auchan') ) return 'var(--sp95-color)';
          else return 'var(--primary-color)';
        ]]]
type: 'custom:button-card'

image
n’hésite pas à demander des explications.



Pour les popups, j’ai dans un premier temps utilisé une fonction de l’intégration browser_mod:

Je te laisse lire la documentation mais c’est une intégration intéressante.

Cependant, à force d’utilisation je n’étais pas ravi du fonctionnement de l’intégration car (à l’époque) pas de popup more-info à l’intérieure d’une popup.

Du coup, je suis encore une fois passé par la carte custom button card (j’en ai parlé ici) :

En fait, chaque popup que tu vois est en faite une page de mon lovelace.
Chaque croix en haut à gauche est un button card avec comme action la navigation vers la page d’accueil :

color: auto
color_type: icon
entity: sensor.close
icon: 'mdi:close'
layout: icon_name
name: Alarme
show_icon: true
show_label: false
show_last_changed: false
show_name: true
show_state: false
styles:
  card:
    - border-radius: 10px
    - height: 50px
    - width: 200px
    - margin: 5px 5px -10px 0px
    - padding: 0px 0px
    - background-color: 'rgba(0,0,0,0)'
    - box-shadow: none
  grid:
    - position: relative
  icon:
    - position: absolute
    - left: 25px
    - width: 30%
    - top: 12px
    - color: black
  name:
    - position: absolute
    - left: '-20px'
    - font-size: 20px
tap_action:
  action: navigate
  navigation_path: accueil
type: 'custom:button-card'
1 « J'aime »