Personnaliser ses cartes avec Card-mod

en français aussi bien expliquer que card-mod ?

Non…

Button-card est tellement permissif… Tu n’imagine s pas le boulot d’explication.

Peux être que quelqu’un d’autre que moi le fera…

:disappointed_relieved:

1 « J'aime »

Je pense que tu voulais cet emoji

:cry:

:upside_down_face:

------------> :sleepy: :cry: :sob: :weary:

1 « J'aime »

Utilisation de card-mod pour le thème Minimalist :

animate

1 « J'aime »

Bonjour à tous,
J’aurais besoins d’un peut d’aide… je bloque pour changer la taille d’une icone (type: « hass:quelquechose ») a l’intérieur d’une carte…
J’y parviens depuis la fenêtre de développement mais pas possible de le faire avec card-mod… Pour la couleur c’est bon, ça prend, mais la taille, que nenni !!!

help please :sob:

Il manque le code de la carte ou une capture de l’arborescence dans la vue des outils de développement… :sweat_smile:

:kissing_closed_eyes:

pour l’exemple > avec ça, ça marche :

mais pas avec ça : (seul la couleur est bien modifier -ici elle passe du blanc au gris foncer-)

  bar-card-iconbar {
    color: #0e0e0e;
    height: 250px;
    width: 250px;
  }

ni ça :

 ha-svg-icon {
    color: #0e0e0e;
    height: 250px;
    width: 250px;
  }

et bien d’autres essais…

Le but étant d’arriver a ceci (sur custom:bar-card) :
Sans titre

Et en ajoutant !important ?

bar-card-iconbar {
    color: #0e0e0e;
    height: 250px !important;
    width: 250px !important ;
  }

Idem pour l’autre.

Et si tu regarde ce qui est appliqué, la taille de l’icône est contenu dans la variable mdc-icon-size.

Du coup, peut être que :

ha-card{
var(--mdc-icon-size): 150px;
}

fonctionnerait.

Partage le code de la carte si ça ne fonctionne pas

non, rien de tout cela ne fonctionne :frowning:

la carte :

type: custom:bar-card
entities:
  - entity: sensor.pylon_custom_content_batterie
    positions:
      name: inside
      value: inside
      icon: inside
    icon: mycons:battery-solar
direction: up
max: '7400'
min: '800'
unit_of_measurement: Wh
positions:
  icon: 'off'
  indicator: 'off'
  name: outside
  value: outside
animation:
  state: 'on'
height: 250px
width: 250px
severity:
  - to: '1500'
    from: '0'
    color: red
  - from: '1500'
    to: '4000'
    color: orange
  - from: '4000'
    to: '5500'
    color: gold
  - from: '5499'
    to: '7000'
    color: green
  - from: '6999'
    to: '8000'
    color: blue
style: |-
  bar-card-iconbar {
    color: #0e0e0e;
    height: 250px !important;
    width: 250px !important ;
  }

tu me rend oufff… merci pour l’exemple

1 « J'aime »

Quelque chose comme ça :

image

card_mod:
  style: |
    ha-icon{
      color: yellow;
      --mdc-icon-size: 232px;
      position: absolute;
      top: 15px;
      left: -95px;
    }
type: custom:bar-card
entities:
[...]
1 « J'aime »

YES!!! Exactement comme ça ! :grin:
T’est un vrai chef :+1:t2:

1 « J'aime »

Merci pour la vidéo :slight_smile: ! Ca rend les shadow roots un peu moins obscurs !
J’essaye d’utiliser card-mod pour modifier mon thème, et notamment supprimer ces chevrons qui apparaissent sur une fenêtre étroite (smartphone notamment, alors qu’il y a la place pour ne pas les afficher)
image

j’ai suivi les explications de ce thread (🔹 Card-mod - Super-charge your themes! - #49 by KTibow - Themes - Home Assistant Community) pour supprimer les chevrons, mais je ne suis pas sûr qu’ils parlent bien des mêmes chevrons.
Le code dans le thème devrait être celui qui suit, mais il ne se passe rien pour moi après avoir rechargé le thème :

  # Hide chevrons
  card-mod-root-yaml: |
    .: |
      app-toolbar {
        display: none;
      }
    paper-tabs$: |
      .not-visible {
        display: none;
      }

En inspectant avec la console, les chevrons sont plutôt ces éléments-ci, mais je n’arrive pas à les cacher.

 card-mod-root-yaml: |
    $: |
      'paper-icon-button:nth-child(4)'  {display: none !important;}
      'paper-icon-button:nth-child(2)' {display: none !important;}

une idée ?
Merci !

Même une réponse :wink:

animate

Afficher le code
      card-mod-theme: minimalist
      card-mod-root-yaml: |
      
        .: |
          /* Cacher le bouton d'ouverture de la barre latérale */
          ha-menu-button {
            display: none !important;
          }

          /* Cacher le bouton du menu (modification du tableau de bord, etc.) */
          ha-button-menu   {
            display: none !important;
          }
          
        "#layout":
          app-header:
            app-toolbar:
              ha-tabs:
                $: |
                   /* Cacher le chevron de droite */
                    paper-icon-button[icon="paper-tabs:chevron-right"] {
                      display: none;
                    }

                   /* Cacher le chevron de gauche */
                    paper-icon-button[icon="paper-tabs:chevron-left"] {
                      display: none;
                    }

C’est la même chose que les explications de la vidéo. Le seul détail qui change c’est de bien commencer par :

card-mod-root-yaml: | 

→ Le -yaml et | sont très important

1 « J'aime »

Merci pour la solution !
Comme les autres exemples de modification de thème n’avaient pas de shadow-root, je n’ai pas pris la peine de remonter plus haut.
Y a-t-il une raison particulière pour avoir choisi paper-icon-button[icon="paper-tabs:chevron-right"] au lieu de paper-icon-button:nth-child(4) comme donné par le selector ?

Parce que c’est ciblé plus précisément.

Le selecteur donne les informations de l’architecture donc si elle évolue, ça peut ne plus fonctionner (dans les deux cas mais moins rapide dans le cas que je présente).

Et je crois que je l’avais vu dans la doc de card-mod à l’époque… Faut lire les docs, elles sont écrites par les sachant… :innocent:

J’ai bien lu les docs, mais pour card-mod, je trouve ça assez indigeste ! En tout cas, ta vidéo est très utile pour illustrer son utilisation.

1 « J'aime »