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…
Je pense que tu voulais cet emoji
------------>
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
Il manque le code de la carte ou une capture de l’arborescence dans la vue des outils de développement…
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) :
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
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
Quelque chose comme ça :
card_mod:
style: |
ha-icon{
color: yellow;
--mdc-icon-size: 232px;
position: absolute;
top: 15px;
left: -95px;
}
type: custom:bar-card
entities:
[...]
YES!!! Exactement comme ça !
T’est un vrai chef
Merci pour la vidéo ! 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)
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
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
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…
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.