Comment personnaliser une carte avec card mod

[cedric1]

Bonjour,
Je souhaiterais personnalisé mes cartes avec différentes couleurs
J’ai réussi a changer la couleur de l’cône mais je comprend pour changer la couleur de l’heure / date / menu déroulant + le centrer

Merci pour votre aide

square: false
type: grid
cards:
  - type: custom:digital-clock
    dateFormat:
      weekday: long
      day: 2-digit
      month: long
      year: 2-digit
    timeFormat:
      hour: 2-digit
      minute: 2-digit
      second: 2-digit
    card_mod:
      style: |
        :host {
          --card-mod-icon-color: orangered;
        }
        ha-card {
          background: #1C1C1C;
          font-weight: bold;
        }
    tap_action:
      action: navigate
      navigation_path: /lovelace/Home
    value_override: 0
  - show_name: false
    show_icon: true
    type: button
    tap_action:
      action: navigate
      navigation_path: /lovelace/0
    icon: mdi:home
    show_state: true
    icon_height: 40px
    card_mod:
      style: |
        :host {
          --card-mod-icon-color: orangered;
        }
        ha-card {
          background: #1C1C1C;
          font-weight: bold;
        }
  - type: custom:collapsable-cards
    title: Temperature Du Salon
    card_mod:
      style:
        ha-markdown$: ''
    cards:
      - type: vertical-stack
        cards:
          - type: custom:mini-graph-card
            entities:
              - sensor.thermometre_salon_humidity
            line_color: blue
            line_width: 8
            font_size: 75
          - type: custom:mini-graph-card
            entities:
              - sensor.thermometre_salon_device_temperature
            line_color: '#e74c3c'
            line_width: 8
            font_size: 75
          - type: custom:mini-graph-card
            entities:
              - sensor.thermometre_salon_pressure
            line_color: var(--accent-color)
            line_width: 8
            font_size: 75
  - type: custom:collapsable-cards
    title: Temperature Chambre Léa
    cards:
      - type: vertical-stack
        cards:
          - type: custom:mini-graph-card
            entities:
              - sensor.thermometre_lea_humidity
            line_color: blue
            line_width: 8
            font_size: 75
          - type: custom:mini-graph-card
            entities:
              - sensor.thermometre_lea_device_temperature
            line_color: '#e74c3c'
            line_width: 8
            font_size: 75
          - type: custom:mini-graph-card
            entities:
              - sensor.thermometre_lea_pressure
            line_color: var(--accent-color)
            line_width: 8
            font_size: 75
  - type: custom:collapsable-cards
    title: Temperature Notre Chambre
    cards:
      - type: vertical-stack
        cards:
          - type: custom:mini-graph-card
            entities:
              - sensor.thermometre_nous_humidity
            line_color: blue
            line_width: 8
            font_size: 75
          - type: custom:mini-graph-card
            entities:
              - sensor.thermometre_nous_device_temperature
            line_color: '#e74c3c'
            line_width: 8
            font_size: 75
          - type: custom:mini-graph-card
            entities:
              - sensor.thermometre_nous_pressure
            line_color: var(--accent-color)
            line_width: 8
            font_size: 75
columns: 1

[WarC0zes]

Bonjour,
pour la carte digital-clock, la couleur ce fait dans ha-card:

    card_mod:
      style: |
        ha-card {
          color: #44739e;
        }

Pour callapsable-cards , la couleur faut ajouter buttonStyle: 'color: green;'

[cedric1]

Salut,

Merci mon sauveur
Et comment fais-tu pour modifier la couleur la petite flèche a cote? et pour agrandir le texte stp ?
Je galère et j’ai du mal a comprendre …

[WarC0zes]

@WarC0zes

buttonStyle: ‹ color: green; ›

pour la taille de la police buttonStyle: 'color: green; font-size: 20px;'

pour la couleur de la flèche avec card_mod.
code card_mod a rajouter.

card_mod:
  style: |
    :host {
      --paper-item-icon-color: yellow;
    } 

Exemple carte complete:

type: custom:collapsable-cards
cards:
  - type: entities
    entities:
      - sensor.bluetooth_proxy_statut_count
buttonStyle: 'color: green; font-size: 20px;'
card_mod:
  style: |
    :host {
      --paper-item-icon-color: yellow;
    } 

[cedric1]

Merci;
je vois que cela fonctionne
J’ai réussi même à centrer le texte.
Je pense avoir un min piger

[WarC0zes]

Ca dépends des cartes utiliser, y en a qui ont directe des options styles et d’autre sans ou il faudras passer par card_mod.

Si le sujet est clos , mets le en résolue.