[CARTE] text-divider-row - Titre pour vos Carte

Bonjour à toutes et à tous,

Je partager aujourd’hui un petit bout de code réaliser récemment avec cette ce Frontend

Option 1: utiliser Declutering-card (que j’ai présenter ici)

###################################
####        DIVIDER             ###
###################################
divider:
  card:
    type: entities
    card_mod:
      style: |
        ha-card {
        background: none;
        box-shadow: none;
        margin-top: -30px;
        margin-bottom: -30px;
        }  
        .card-content {
         padding: 0 0 0 0px;
         margin: 0 0 0 0px;
         box-shadow: none;
         }
    show_header_toggle: false
    entities:
      - type: 'custom:text-divider-row'
        text: '[[text]]'
        card_mod:
          style: |
            :host {
            font-size: 17px;
            text-primary-color: 'var(--primary-text-color)' 
            }   
            .text-divider {
            padding: 0 0 0 0px;
            margin: -5 0 -5 0px;
            box-shadow: none;
            height: 17px;
            }   

Dans ce cas il vous suffira simplement de coller dans vos lovelace:


          - type: custom:decluttering-card
            template: divider
            variables:
              - text: CALENDRIER FAMILIAL #a remplacer par le Titre que vous souhaité.

Option 2:coller ce code dans votre lovelace.yaml la ou vous souhaiter avoir un titre

  - type: entities
    card_mod:
      style: |
        ha-card {
        background: none;
        box-shadow: none;
        margin-top: -30px;
        margin-bottom: -30px;
        }  
        .card-content {
         padding: 0 0 0 0px;
         margin: 0 0 0 0px;
         box-shadow: none;
         height: 20px;
         }
    show_header_toggle: false
    entities:
      - type: 'custom:text-divider-row'
        text: '[[text]]' #### A remplacer par le titre souhaité !
        card_mod:
          style: |
            :host {
            font-size: 17px;
            text-primary-color: 'var(--primary-text-color)' 
            }   
            .text-divider {
            padding: 0 0 0 0px;
            margin: -5 0 -5 0px;
            box-shadow: none;
            height: 17px;
            }               

Voici un exemple en image:

5 J'aime

Merci pour le partage

J’ai corrigé quelque erreurs de style non visible au premier regard mais qui peuvent décaler certaines card.

Bonne journée :slight_smile: