Bonjour,
J’essaye d’appliquer une bordure (border: 2px outset darkgrey), une couleur d’arrière plan (background-color: rgba(128,128,128,1.0)) et un border-radius de 1% à une custom:layout-card avec card-mod mais tous mes essais sont infructueux. Quelqu’un saurait comment faire (si c’est possible) ?
Bonjour,
passe par button-card 
edit:
je déconne 
type: custom:layout-card
card_mod:
style: |
ha-card {
border: 2px outset darkgrey;
background-color: rgba(128,128,128,1.0);
border-radius: 1px;
}
Salut, j’essaie justement autre chose car il n’est pas possible de supprimer l’effet lors d’un clic sur une carte custom:button-card avec des custom_fields et le clic sur un custom_fields d’une carte ayant une custom:frigate-card en custom_fields fait disparaitre la carte frigate brièvement.
avec ca ?
styles:
card:
- '--mdc-ripple-press-opacity': 0
C’est le premier truc que j’ai essayé mais aucun changement…
type: custom:layout-card
layout_type: custom:grid-layout
layout:
grid-template-columns: 86px 86px 86px 840px
grid-template-rows: repeat(7, 98px) 686px
grid-template-areas: |
"acces alarme cameras cartes"
"maison entree a6 cartes"
"a7 a8 a9 cartes"
"a10 a11 a12 cartes"
"a13 a14 a15 cartes"
"a16 a17 a18 cartes"
"a19 a20 a21 cartes"
". . . cartes"
card_mod:
style: |
ha-card {
border: 2px solid #1e88e5; /* Bordure bleue de 2px */
box-shadow: 3px 3px 15px rgba(0, 0, 0, 0.2); /* Ombre portée */
background-color: rgba(128,128,128,1.0); /* Couleur de fond gris clair */
border-radius: 10px; /* Coins arrondis */
padding: 16px; /* Espacement intérieur */
}
cards:
- type: custom:button-card
name: Accès
entity: input_number.tableau_de_bord_carte_courante
show_state: false
show_icon: false
custom_fields:
zone_acces:
card:
type: custom:button-card
styles:
card:
- background-color: |
[[[
if (states['input_number.tableau_de_bord_carte_courante'].state == '1.0' || states['input_number.tableau_de_bord_carte_courante'].state == '20.0')
return 'rgba(64,192,64,0.7)';
else
return 'rgba(128,128,128,1.0)';
]]]
- border: 1px solid rgba(0,0,0,0.0)
- box-shadow: 4px 4px 6px 0px inset rgba(32,32,32,0.7)
- aspect-ratio: 1/1
- border-radius: 50%
- width: 88px
tap_action:
action: none
hold_action:
action: none
icone_acces:
card:
type: custom:button-card
icon: mdi:home-lock
styles:
card:
- background-color: rgba(0,0,0,0.0)
- border: none
- aspect-ratio: 1/1
- border-radius: none
- width: 88px
icon:
- width: 60%
- top: 21px
- left: 5px
tap_action:
action: call-service
service: script.tableau_de_bord_menu
service_data:
carte: '[[[ return "1"; ]]]'
hold_action:
action: none
styles:
card:
- background-color: dimgrey
- border: |
[[[
if (states['input_number.tableau_de_bord_carte_courante'].state == '1.0' || states['input_number.tableau_de_bord_carte_courante'].state == '20.0')
return '2px inset rgba(0,255,0,1.0)';
else
return '2px outset darkgrey';
]]]
- box-shadow: |
[[[
if (states['input_number.tableau_de_bord_carte_courante'].state == '1.0' || states['input_number.tableau_de_bord_carte_courante'].state == '20.0')
return '0px 0px 4px 4px rgba(0,128,0,0.3)';
else
return '0px 0px 0px 0px rgba(0,0,0,0.0)';
]]]
- aspect-ratio: 1/1.15
- border-radius: 10%
- width: 78px
- padding-left: 5px
name:
- font-size: 0.9em
- font-weight: bold
- justify-self: start
- align-self: start
- color: rgba(0,0,0,0.6)
custom_fields:
zone_acces:
- position: absolute
- left: 5px
- top: 40px
icone_acces:
- position: absolute
- left: 0px
- top: 0px
tap_action:
action: none
hold_action:
action: none
view_layout:
grid-area: acces
- type: custom:button-card
name: Alarme
entity: input_number.tableau_de_bord_carte_courante
show_state: false
show_icon: false
custom_fields:
zone_alarme:
card:
type: custom:button-card
styles:
card:
- background-color: |
[[[
if (states['input_number.tableau_de_bord_carte_courante'].state == '2.0')
return 'rgba(64,192,64,0.7)';
else
return 'rgba(128,128,128,1.0)';
]]]
- border: 1px solid rgba(182,82,182,0.0)
- box-shadow: 4px 4px 6px 0px inset rgba(32,32,32,0.7)
- aspect-ratio: 1/1
- border-radius: 50%
- width: 88px
tap_action:
action: none
hold_action:
action: none
icone_alarme:
card:
type: custom:button-card
icon: mdi:shield-home
styles:
card:
- background-color: rgba(0,0,0,0.0)
- border: none
- aspect-ratio: 1/1
- border-radius: none
- width: 88px
icon:
- width: 47%
- top: 20px
- left: 5px
tap_action:
action: call-service
service: script.tableau_de_bord_menu
service_data:
carte: '[[[ return "2"; ]]]'
hold_action:
action: none
styles:
card:
- background-color: dimgrey
- border: |
[[[
if (states['input_number.tableau_de_bord_carte_courante'].state == '2.0')
return '2px inset rgba(0,255,0,1.0)';
else
return '2px outset darkgrey';
]]]
- box-shadow: |
[[[
if (states['input_number.tableau_de_bord_carte_courante'].state == '2.0')
return '0px 0px 4px 4px rgba(0,128,0,0.3)';
else
return '0px 0px 0px 0px rgba(0,0,0,0.0)';
]]]
- aspect-ratio: 1/1.15
- border-radius: 10%
- width: 78px
- padding-left: 5px
name:
- font-size: 0.9em
- font-weight: bold
- justify-self: start
- align-self: start
- color: rgba(0,0,0,0.6)
custom_fields:
zone_alarme:
- position: absolute
- left: 5px
- top: 40px
icone_alarme:
- position: absolute
- left: 0px
- top: 0px
tap_action:
action: none
hold_action:
action: none
view_layout:
grid-area: alarme
- type: custom:button-card
name: Caméras
entity: input_number.tableau_de_bord_carte_courante
show_state: false
show_icon: false
custom_fields:
zone_cameras:
card:
type: custom:button-card
styles:
card:
- background-color: |
[[[
if (states['input_number.tableau_de_bord_carte_courante'].state == '3.0')
return 'rgba(64,192,64,0.7)';
else
return 'rgba(128,128,128,1.0)';
]]]
- border: 1px solid rgba(182,82,182,0.0)
- box-shadow: 4px 4px 6px 0px inset rgba(32,32,32,0.7)
- aspect-ratio: 1/1
- border-radius: 50%
- width: 88px
tap_action:
action: none
hold_action:
action: none
icone_cameras:
card:
type: custom:button-card
icon: mdi:cctv
styles:
card:
- background-color: rgba(0,0,0,0.0)
- border: none
- aspect-ratio: 1/1
- border-radius: none
- width: 88px
icon:
- width: 50%
- top: 22px
- left: 2px
tap_action:
action: call-service
service: script.tableau_de_bord_menu
service_data:
carte: '[[[ return "3"; ]]]'
hold_action:
action: none
styles:
card:
- background-color: dimgrey
- border: |
[[[
if (states['input_number.tableau_de_bord_carte_courante'].state == '3.0')
return '2px inset rgba(0,255,0,1.0)';
else
return '2px outset darkgrey';
]]]
- box-shadow: |
[[[
if (states['input_number.tableau_de_bord_carte_courante'].state == '3.0')
return '0px 0px 4px 4px rgba(0,128,0,0.3)';
else
return '0px 0px 0px 0px rgba(0,0,0,0.0)';
]]]
- aspect-ratio: 1/1.15
- border-radius: 10%
- width: 78px
- padding-left: 5px
name:
- font-size: 0.9em
- font-weight: bold
- justify-self: start
- align-self: start
- color: rgba(0,0,0,0.6)
custom_fields:
zone_cameras:
- position: absolute
- left: 5px
- top: 40px
icone_cameras:
- position: absolute
- left: 0px
- top: 0px
tap_action:
action: none
hold_action:
action: none
view_layout:
grid-area: cameras
- type: custom:button-card
name: Maison
entity: input_number.tableau_de_bord_carte_courante
show_state: false
show_icon: false
custom_fields:
zone_maison:
card:
type: custom:button-card
styles:
card:
- background-color: |
[[[
if (states['input_number.tableau_de_bord_carte_courante'].state == '4.0')
return 'rgba(64,192,64,0.7)';
else
return 'rgba(128,128,128,1.0)';
]]]
- border: 1px solid rgba(0,0,0,0.0)
- box-shadow: 4px 4px 6px 0px inset rgba(32,32,32,0.7)
- aspect-ratio: 1/1
- border-radius: 50%
- width: 88px
tap_action:
action: none
hold_action:
action: none
icone_maison:
card:
type: custom:button-card
icon: mdi:home
styles:
card:
- background-color: rgba(0,0,0,0.0)
- border: none
- aspect-ratio: 1/1
- border-radius: none
- width: 88px
icon:
- width: 60%
- top: 21px
- left: 5px
tap_action:
action: call-service
service: script.tableau_de_bord_menu
service_data:
carte: '[[[ return "4"; ]]]'
hold_action:
action: none
styles:
card:
- background-color: dimgrey
- border: |
[[[
if (states['input_number.tableau_de_bord_carte_courante'].state == '4.0')
return '2px inset rgba(0,255,0,1.0)';
else
return '2px outset darkgrey';
]]]
- box-shadow: |
[[[
if (states['input_number.tableau_de_bord_carte_courante'].state == '4.0')
return '0px 0px 4px 4px rgba(0,128,0,0.3)';
else
return '0px 0px 0px 0px rgba(0,0,0,0.0)';
]]]
- aspect-ratio: 1/1.15
- border-radius: 10%
- width: 78px
- padding-left: 5px
name:
- font-size: 0.9em
- font-weight: bold
- justify-self: start
- align-self: start
- color: rgba(0,0,0,0.6)
custom_fields:
zone_maison:
- position: absolute
- left: 5px
- top: 40px
icone_maison:
- position: absolute
- left: 0px
- top: 0px
tap_action:
action: none
hold_action:
action: none
view_layout:
grid-area: maison
- type: custom:button-card
name: Entrée
entity: input_number.tableau_de_bord_carte_courante
show_state: false
show_icon: false
custom_fields:
zone_entree:
card:
type: custom:button-card
styles:
card:
- background-color: |
[[[
if (states['input_number.tableau_de_bord_carte_courante'].state == '5.0')
return 'rgba(64,192,64,0.7)';
else
return 'rgba(128,128,128,1.0)';
]]]
- border: 1px solid rgba(182,82,182,0.0)
- box-shadow: 4px 4px 6px 0px inset rgba(32,32,32,0.7)
- aspect-ratio: 1/1
- border-radius: 50%
- width: 88px
tap_action:
action: input_number.tableau_de_bord_carte_courante
hold_action:
action: none
icone_entree:
card:
type: custom:button-card
icon: phu:rooms-front-door
styles:
card:
- background-color: rgba(0,0,0,0.0)
- border: none
- aspect-ratio: 1/1
- border-radius: none
- width: 88px
icon:
- width: 47%
- top: 21px
- left: 7px
tap_action:
action: call-service
service: script.tableau_de_bord_menu
service_data:
carte: '[[[ return "5"; ]]]'
hold_action:
action: none
styles:
card:
- background-color: dimgrey
- border: |
[[[
if (states['input_number.tableau_de_bord_carte_courante'].state == '5.0')
return '2px inset rgba(0,255,0,1.0)';
else
return '2px outset darkgrey';
]]]
- box-shadow: |
[[[
if (states['input_number.tableau_de_bord_carte_courante'].state == '5.0')
return '0px 0px 4px 4px rgba(0,128,0,0.3)';
else
return '0px 0px 0px 0px rgba(0,0,0,0.0)';
]]]
- aspect-ratio: 1/1.15
- border-radius: 10%
- width: 78px
- padding-left: 5px
name:
- font-size: 0.9em
- font-weight: bold
- justify-self: start
- align-self: start
- color: rgba(0,0,0,0.6)
custom_fields:
zone_entree:
- position: absolute
- left: 5px
- top: 40px
icone_entree:
- position: absolute
- left: 0px
- top: 0px
tap_action:
action: none
hold_action:
action: none
view_layout:
grid-area: entree
- type: custom:button-card
name: Cellule 6
view_layout:
grid-area: a6
- type: custom:button-card
name: Cellule 7
view_layout:
grid-area: a7
- type: custom:button-card
name: Cellule 8
view_layout:
grid-area: a8
- type: custom:button-card
name: Cellule 9
view_layout:
grid-area: a9
- type: custom:button-card
name: Cellule 10
view_layout:
grid-area: a10
- type: custom:button-card
name: Cellule 11
view_layout:
grid-area: a11
- type: custom:button-card
name: Cellule 12
view_layout:
grid-area: a12
- type: custom:button-card
name: Cellule 13
view_layout:
grid-area: a13
- type: custom:button-card
name: Cellule 14
view_layout:
grid-area: a14
- type: custom:button-card
name: Cellule 15
view_layout:
grid-area: a15
- type: custom:button-card
name: Cellule 16
view_layout:
grid-area: a16
- type: custom:button-card
name: Cellule 17
view_layout:
grid-area: a17
- type: custom:button-card
name: Cellule 18
view_layout:
grid-area: a18
- type: custom:button-card
name: Cellule 19
view_layout:
grid-area: a19
- type: custom:button-card
name: Cellule 20
view_layout:
grid-area: a20
- type: custom:button-card
name: Cellule 21
view_layout:
grid-area: a21
- type: custom:button-card
name: cellule large
view_layout:
grid-area: cartes
Ca ça fonctionne en revanche (à priori)
oui.
sans
avec
Je me demande si card-mod est bien installé…
Faut l’installer de HACS et ajouter la ligne dans extra_module_url dans ton configuration.yaml et redémarrer HA.
While card-mod can be installed as a lovelace resource, some functionality will benefit greatly from it being installed as a frontend module instead.
To do that, add the following to your configuration.yaml file and restart Home Assistant:
frontend: extra_module_url: - /local/card-mod.js
You’ll need to adjust that path according to where you have installed card-mod.js. If you installed through HACS, this is probably /hacsfiles/lovelace-card-mod/card-mod.js.
Any resource definitions automatically added by HACS can be kept as is even after adding extra_module_url.
# Load frontend themes from the themes folder
frontend:
themes: !include_dir_merge_named themes
extra_module_url:
- /local/community/custom-brand-icons/custom-brand-icons.js
- /local/community/lovelace-card-mod/card-mod.js
J’ai ça…
C’est bon.
Citation
vous pouvez utiliser les deux/local/community/plugin/plugin.jset/hacsfiles/plugin/plugin.js
/hacsfiles/ = /local/community/
Passe par mod-card ( la carte est inclus avec card_mod ):
type: custom:mod-card
card:
type: custom:layout-card
layout_type: custom:grid-layout
layout:
grid-template-columns: 86px 86px 86px 840px
grid-template-rows: repeat(7, 98px) 686px
grid-template-areas: |
"acces alarme cameras cartes"
"maison entree a6 cartes"
"a7 a8 a9 cartes"
"a10 a11 a12 cartes"
"a13 a14 a15 cartes"
"a16 a17 a18 cartes"
"a19 a20 a21 cartes"
". . . cartes"
cards:
...
card_mod:
style: |
ha-card {
border: 2px solid #1e88e5; /* Bordure bleue de 2px */
box-shadow: 3px 3px 15px rgba(0, 0, 0, 0.2); /* Ombre portée */
background-color: rgba(128,128,128,1.0); /* Couleur de fond gris clair */
border-radius: 10px; /* Coins arrondis */
padding: 16px; /* Espacement intérieur */
}
Purée, je viens d’apprendre un truc là !
Merci pour l’information 
Merci @WarC0zes
Ca fonctionne en mettant une carte card-mod au début. Ce qui est dommage, c’est que du coup, je perds l’interface graphique de la layout-card.
oui. 
