[CARTE] Header Cards ( ajouter des badges et des cartes à l'en-tête )

@WarC0zes désolé pour le custom ui, ca doit faire 2 ans qu’il est dans mes customs cards ^^
@Plouf34 j’utilise The iOS Dark Mode Theme by @basnijholt and modified from @kalkih’s apres je modifie la transparence et le radius des bords :slight_smile:

bon, j’y suis presque mais je butte la dessus :
1
j’ai bien mon animation, mais rien n’est aligné. c’est un bout de la carte de meteofrance, modifié avec card mod pour ne garder que le l’animation du logo

voici le code de la header card pour la meteo
    - type: custom:meteofrance-weather-card
      entity: weather.jibiline
      number_of_forecasts: '5'
      current: true
      one_hour_forecast: false
      forecast: false
      alert_forecast: false
      details: false
      detailEntity: sensor.89_weather_alert
      card_mod:
        style: |
          ha-card {
          background-color: transparent;
          box-shadow: none;
          }
          ha-card > ul > li:nth-child(2)
          { 
          display: none;
          }
          ha-card > ul > li:nth-child(1)
          {
           transform: scale(0.5);
          }
          ha-card > ul > li:nth-child(3)
          {
          display: none;
          }

le code entier de la header card
header_cards:
  cards:
    - type: glance
      entities:
        - entity: alarm_control_panel.maison
        - entity: group.grp_portes
        - entity: group.grp_fenetres
        - entity: group.grp_lumineres
          icon: bha:ceiling-lamp
          tap_action:
            action: more-info
      show_name: false
      show_icon: true
      show_state: false
      card_mod:
        style: |
          ha-card {
          background-color: transparent;
          box-shadow: none;
          }
    - type: markdown
      content: >

        {{ states("sensor.day") }} {{ states("sensor.date_fr") }}   

        {{ states("sensor.time") }} {{ states("sensor.temperature_exterieur") }}
        °c
      card_mod:
        style: |
          ha-card {
          background-color: transparent;
          box-shadow: none;
          }
    - type: custom:meteofrance-weather-card
      entity: weather.jibiline
      number_of_forecasts: '5'
      current: true
      one_hour_forecast: false
      forecast: false
      alert_forecast: false
      details: false
      detailEntity: sensor.89_weather_alert
      card_mod:
        style: |
          ha-card {
          background-color: transparent;
          box-shadow: none;
          }
          ha-card > ul > li:nth-child(2)
          { 
          display: none;
          }
          ha-card > ul > li:nth-child(1)
          {
           transform: scale(0.5);
          }
          ha-card > ul > li:nth-child(3)
          {
          display: none;
          }

Je ne maitrise pas du tout card mod, j’ai fait un shadow display sur le texte pour ne garder que l’icone animé, il y a surement plus simple.
mais dans l’état, cela me conviendrait surement si tout était aligné

je ne suis pas contre un coup de main :slight_smile:

il me semble qu’il fallait ajouter:

      name: ''

pour éviter cela.

malheureusement aucun changement :cry:

        ha-card {
          height: 58px;
          width: 58px;
        }

ca diminue la taille de la carte. il manque un petit peu encore en hauteur, faudrais diminuer la taille de l’icone et sa serai bon
météo

    - type: custom:meteofrance-weather-card
      entity: weather.xxxxxxxxxx
      number_of_forecasts: '0'
      current: true
      alert_forecast: false
      details: false
      one_hour_forecast: false
      forecast: false
      style: |
        ha-card > ul > li:nth-child(2)
        { 
        display: none;
        }
        ha-card > ul > li:nth-child(1)
        {
          transform: scale(0.5);
        }
        ha-card > ul > li:nth-child(3)
        {
        display: none;
        }
        ha-card {
          background-color: transparent;
          box-shadow: none;
          height: 58px;
          width: 58px;
        }

après on peu jouer avec la taille des icones de glance

    - type: glance
      entities:
        - entity: alarm_control_panel.54ef44273cc1_alarm
        - entity: group.grp_portes
          style: |
            :host {
              --mdc-icon-size: 27px;
            }
1 « J'aime »

moon3

J’ai réussi a ajouter la lune en image dans la barre, suite a mon tuto Phase de la lune en image.

voici mon code:

header_cards:
  cards:
    - type: glance
      columns: 6
      entities:
        - entity: alarm_control_panel.54ef44273cc1_alarm
        - entity: group.grp_portes
          style: |
            :host {
              --mdc-icon-size: 33px;
            }
        - entity: group.grp_fenetres
        - entity: group.grp_lumieres
          icon: bha:ceiling-lamp
        - entity: sun.sun
        - entity: sensor.moon_phases
          style: |
            state-badge {
              height: 27px;
              width: 27px;
            }
      show_name: false
      show_icon: true
      show_state: false
      style: |
        ha-card {
          background: none;
          box-shadow: none;
        }
        :host {
          --mdc-icon-size: 28px;
        }
1 « J'aime »

header 2

Ajout de la météo et vitesse du vent avec icone ( pas d’animation).
Il faut la carte Mushroom.

code:

header_cards:
  cards:
    - type: glance
      columns: 6
      entities:
        - entity: alarm_control_panel.54ef44273cc1_alarm
        - entity: group.grp_portes
          style: |
            :host {
              --mdc-icon-size: 33px;
            }
        - entity: group.grp_fenetres
        - entity: group.grp_lumieres
          icon: bha:ceiling-lamp
        - entity: sun.sun
        - entity: sensor.moon_phases
          style: |
            state-badge {
              height: 27px;
              width: 27px;
            }
      show_name: false
      show_icon: true
      show_state: false
      style: |
        ha-card {
          background: none;
          box-shadow: none;
        }
        :host {
          --mdc-icon-size: 28px;
        }
    - type: custom:mushroom-chips-card
      chips:
        - type: weather
          entity: weather.xxxxxxxxxxxx
          show_conditions: false
          show_temperature: true
          style: |
            ha-card {
              background-color: transparent;
              box-shadow: none;
              --chip-height: 50px;
              --chip-border-radius: 1px;
              --chip-padding:  0 3px;
              flex-direction: column !important;
            }
        - type: entity
          entity: sensor.xxxxxxxxxxxx_wind_speed
          style: |
            :host {
              --card-mod-icon-color: #44739e;
            }
            ha-card {
              background-color: transparent;
              box-shadow: none;
              --chip-height: 50px;
              --chip-border-radius: 1px;
              --chip-padding:  0 3px;
              flex-direction: column !important;
            }
1 « J'aime »

J’ai bien installé Custom-ui, j’ai rajouté le code dans customize.yaml mais mes icones porte, fenêtre et mouvement sont tout le temps blanc :confused:

Capture

ta bien ajouter dans configuration.yaml ?

homeassistant:
  customize: !include customize.yaml

dans customize.yaml

group.grp_fenetres:
  friendly_name: Fenêtres
  templates:
    icon_color: "if (state === 'on') return '#ff0000'; else return '#00b300';"
    icon: "if (state === 'on') return 'mdi:window-open-variant'; else return 'mdi:window-closed-variant';"
group.grp_portes:
  friendly_name: Portes
  templates:
    icon_color: "if (state === 'on') return '#ff0000'; else return '#00b300';"
    icon: "if (state === 'on') return 'fas:door-open'; else return 'fas:door-closed';"

et custom ui est bien ajouté?

je chercher toujours pour avoir la meteo avec l’animation, mais que soit correctement aligné, j’ai fais plusieurs (beaucoup) essai sans que ce soit aligné correctement. j’ai re ouvert le post sur les badge et leurs animations : Animation Badges - Home Assistant - Tutoriels & Partages / Interface / Lovelace / Thème / Custom Card - Home Assistant Communauté Francophone (hacf.fr) se sera surement une piste :slight_smile:

Pareille, j’ai fais plein de test non concluant appart ce que j’ai poster. J’essaye de comprende le html avec l’outil de développement de chrome mais c’est pas facile.

:gift:
svg

2 « J'aime »

Oups, j’avais oublié d’ajouter

homeassistant:
  customize: !include customize.yaml

Mais maintenant j’ai une erreur:

J’ai bien le fichier customize.yaml avec le même code.

Pour répondre à ta 2ème question, oui j’ai bien installé « custom ui »

montre ton customize.yaml ?

group.all_doors:
  templates:
    icon_color: "if (state === 'on') return '#ff0000'; else return '#00b300';"
    icon: "if (state === 'on') return 'mdi:door-open'; else return 'mdi:door';"
    
    
group.all-windows:
  templates:
    icon_color: "if (state === 'on') return '#ff0000'; else return '#00b300';"
    icon: "if (state === 'on') return 'window-open-variant'; else return 'mdi:window-variant';"
    
group.all_cameras_motions_sensors:
  templates:
    icon_color: "if (state === 'on') return '#ff0000'; else return '#f77300';"
    icon: "if (state === 'on') return 'mdi:motion-sensor'; else return 'mdi:motion-sensor-off';"

bien joué !! de mon coté je me batais avec custom:html-template-card sans succes non plus.

Tu es parti coté html alors? dis nous tout :slight_smile:

group.all-windows:

change en:

group.all_windows:

c’est pas le - qui chie ?

je suis partie sur un sensor template ,je t’es mis le tuto sur ton lien du bagde.

J’ai changé mais ca ne change rien.