dans le service_data du popup:
tap_action:
action: call-service
service: browser_mod.popup
deviceID:
- tactile
service_data:
title: Thermostat
style: |-
:host .content {
width: 35vw;
height: 37vh;}
card:
...
Merci pour l’info.
Je laisse cela sur le coté pour l’instant car cela me prend la tête…
Merci encore
J’ai également utilisé browser_mod pour redefinir le more-info et c’est fonctionnel depuis mon navigateur. Par contre ca ne marche pas sur mon mobile android depuis l’application officielle. As-tu testé sur mobile et est-ce fonctionnel ?
Merci pour ton retour.
J’ai redemarré le téléphone et ca a marché … peut-être un problème de cache … à suivre 
super topic. J’ai galéré a le trouver mais ca m’a bien aidé merci 
Vous utilisez plusieurs popup sur les memes View ? J’ai l’impression que ca rame si on en met plusieurs (et parfois il affiche la dernière affichée qqes secondes avant d’afficher la bonne)
Ca vous le fait aussi ?
C’est indiqué dans le changelog et dans la doc
Faut modifier toutes les cartes popup, un peu chiant mais ca vaut le coup. Top la v2.0 de Browser_mod 
un exemple si ca peu aider
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
browser_id: THIS
size: wide #normal, wide ou fullscreen
title: Exemple
content:
type: entities
Je pirate un peu le sujet mais quelqu’un a-t-il trouvé un moyen de rendre le titre des popup en template ?
je pense pas.
Je pencherais sur une carte stack in card + mushroom-title-card + ta carte au choix. Ca devrait être pas mal en théorie.
En théorie l’idée est bonne. Par contre j’ai l’impression que le code n’est pas encore bien fini… Rien qui marche chez moi avec Chrome. Wait&See
J’avoue j’ai galéré 2 bonnes heures hier pour arriver à un rendu quasi équivalent à la v1.5.x
Truc tout bête : ne pas afficher de header au popup, avant il y’avait une directive « hide-header » maintenant il suffit de ne pas mettre de « title ».
J’avais aussi ajouté du padding, maintenant ce n’est plus possible et voici la réponse de Thomas Loven sur github :
Because the
--paddingvariables aren’t meant to be user facing.
Add margins to the card itself with card-mod instead.
Bref il y’a encore pas mal d’issues ouvertes, on verra ce que ça donnera dans les jours à venir.
Aperçu de mon popup « Volets » :
Oui j’ai vu ça.
Je vais corriger toutes mes popups avec le title mushroom et l’ancienne version 1.5.3. Quand elles seront toutes ok, alors je rebasculerai
J’ai passé aussi beaucoup de temps mais au final ça marche bien. Popup avec titre mushroom compris
Il faut que je regarde par contre pourquoi les plant sont plantés
Voila qui la fix pour le padding sur la nouvelle version .
Changes in 2.1.1:
--popup-border-radius, add --popup-padding-x, --popup-padding-y style variables for popupsOuais j’ai vu ça on peut noter aussi qu’on peut de nouveau faire mumuse avec card-mod pour personnaliser les popups 
En tout cas Thomas Loven est toujours aussi monstrueux 
bon perso j’arrive pas a modifier les fichiers depuis la mise à jours:
exemple:
type: custom:button-card
entity: camera.camera_entrer_low
name: Caméra
icon: mdi:cctv
styles:
icon:
- top: '-3%'
- left: 8%
- width: 45%
- position: absolute
name:
- top: 80%
- left: 15%
- position: center
- color: rgba(240, 240, 240, 0.8)
card:
- font-size: 100%
- background-color: rgba(240, 240, 240, 0.1)
- border-radius: 15%
- border-style: solid
- border-color: rgba(240, 240, 240, 0.3)
- border-width: 1px
- box-shadow: true
- transition: true
- color: >
[[[ return (entity.state === 'on' || entity.state === 'home') ? 'rgba(0,
0, 0, 0.6)' : 'rgba(255, 255, 255, 0.3)'; ]]]
aspect_ratio: 1/1
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data: null
title: Caméras
styles:
card:
- top: 50px
content:
type: grid
cards:
- type: custom:button-card
entity: camera.camera_entrer_low
size: 100%
show_state: false
show_label: false
show_name: true
name: Entrée
show_entity_picture: true
aspect_ratio: 1/1
color_type: card
styles:
card:
- font-size: 80%
- background-color: rgba(240, 240, 240, 0.1)
- border-radius: 15%
- border-style: solid
- border-color: rgba(240, 240, 240, 0.3)
- border-width: 1px
- box-shadow: true
- transition: true
- color: >
[[[ return (entity.state === 'on' || entity.state === 'home')
? 'rgba(0, 0, 0, 0.6)' : 'rgba(255, 255, 255, 0.3)'; ]]]
name:
- top: 80%
- left: 15%
- position: center
- color: rgba(240, 240, 240, 0.8)
- type: custom:button-card
entity: camera.camera_jardin_low
size: 100%
show_state: false
show_label: false
show_name: true
name: Jardin
show_entity_picture: true
aspect_ratio: 1/1
color_type: card
styles:
card:
- font-size: 80%
- background-color: rgba(240, 240, 240, 0.1)
- border-radius: 15%
- border-style: solid
- border-color: rgba(240, 240, 240, 0.3)
- border-width: 1px
- box-shadow: true
- transition: true
- color: >
[[[ return (entity.state === 'on' || entity.state === 'home')
? 'rgba(0, 0, 0, 0.6)' : 'rgba(255, 255, 255, 0.3)'; ]]]
name:
- top: 80%
- left: 15%
- position: center
- color: rgba(240, 240, 240, 0.8)
- type: custom:button-card
entity: camera.camera_lenzo_low
size: 100%
show_state: false
show_label: false
show_name: true
name: Lenzo
show_entity_picture: true
aspect_ratio: 1/1
color_type: card
styles:
card:
- font-size: 80%
- background-color: rgba(240, 240, 240, 0.1)
- border-radius: 15%
- border-style: solid
- border-color: rgba(240, 240, 240, 0.3)
- border-width: 1px
- box-shadow: true
- transition: true
- color: >
[[[ return (entity.state === 'on' || entity.state === 'home')
? 'rgba(0, 0, 0, 0.6)' : 'rgba(255, 255, 255, 0.3)'; ]]]
name:
- top: 80%
- left: 15%
- position: center
- color: rgba(240, 240, 240, 0.8)
- type: custom:button-card
entity: camera.camera_tiago_high
size: 100%
show_state: false
show_label: false
show_name: true
name: Tiago
show_entity_picture: true
aspect_ratio: 1/1
color_type: card
styles:
card:
- font-size: 80%
- background-color: rgba(240, 240, 240, 0.1)
- border-radius: 15%
- border-style: solid
- border-color: rgba(240, 240, 240, 0.3)
- border-width: 1px
- box-shadow: true
- transition: true
- color: >
[[[ return (entity.state === 'on' || entity.state === 'home')
? 'rgba(0, 0, 0, 0.6)' : 'rgba(255, 255, 255, 0.3)'; ]]]
name:
- top: 80%
- left: 15%
- position: center
- color: rgba(240, 240, 240, 0.8)
columns: 2
que faut-il modifier et comment ?
Merci
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data: # ===> A partir d'ici ta pas les bon espaces.
browser_id: THIS
size: wide
title: Exemple
content:
ton code
data: null
title: Caméras # manque 2 espaces.
Merci pour ton retour j’ai essayer de faire les modif et cela ne fonctionne pas je doit louper quelque chose
voici le code complet de la button card:
type: custom:state-switch
view_layout:
grid-area: camera
entity: mediaquery
states:
'(min-width: 1100px)':
type: custom:button-card
view_layout:
grid-area: camera
tap_action:
action: fire-dom-event
browser_mod:
command: popup
hide_header: true
large: false
animation_card: |
[[[
const animation_speed_ms = 900;
const animation = `card_bounce ${animation_speed_ms}ms cubic-bezier(0.22, 1, 0.36, 1)`;
this.shadowRoot.getElementById("card").style.animation = animation;
window.setTimeout(() => {
this.shadowRoot.getElementById("card").style.animation = "none";
}, animation_speed_ms)
]]]
style: |
ha-dialog {
--mdc-dialog-min-width: 750px !important;
--mdc-dialog-max-width: 900px !important;
}
.content {
width: auto !important;
}
ha-card {
--ha-card-background: rgba(85, 100, 176, 0.8);
card:
type: vertical-stack
cards:
- type: horizontal-stack
cards:
- type: custom:hui-element
card_type: horizontal-stack
cards:
- type: picture-entity
entity: camera.camera_jardin_low
camera_image: camera.camera_jardin_low
show_name: false
show_state: false
- type: picture-entity
entity: camera.camera_entrer_low
camera_image: camera.camera_entrer_low
show_name: false
show_state: false
- type: horizontal-stack
cards:
- type: custom:hui-element
card_type: horizontal-stack
cards:
- type: picture-entity
entity: camera.camera_lenzo_low
camera_image: camera.camera_lenzo_low
show_name: false
show_state: false
- type: picture-entity
entity: camera.camera_tiago_high
camera_image: camera.camera_tiago_high
show_name: false
show_state: false
show_icon: true
entity_picture: /local/neon/cctv.png
show_entity_picture: true
entity: binary_sensor.camera_entrer_motion
extra_styles: |
@keyframes card_bounce {
0% {
transform: scale(1);
}
15% {
transform: scale(0.9);
}
25% {
transform: scale(1);
}
30% {
transform: scale(0.98);
}
100% {
transform: scale(1);
}
}
show_state: true
name: Caméra
styles:
custom_fields:
graph:
- position: absolute
- left: 0px
- top: 143px
grid:
- grid-template-areas: '"i" "n" "s"'
- grid-template-columns: 1fr
- grid-template-rows: 1fr min-content min-content
card:
- border-radius: 10px
- background: rgb(0,0,0,0.2)
- height: 220px
img_cell:
- padding-top: 30px
icon:
- width: 50px
name:
- color: var(--secondary-text-color)
state:
- padding-bottom: 70px
- font-size: 12px
- color: var(--text-primary-color)
'(min-width: 700px)':
type: custom:button-card
view_layout:
grid-area: camera
tap_action:
action: fire-dom-event
browser_mod:
command: popup
hide_header: true
large: false
animation_card: |
[[[
const animation_speed_ms = 900;
const animation = `card_bounce ${animation_speed_ms}ms cubic-bezier(0.22, 1, 0.36, 1)`;
this.shadowRoot.getElementById("card").style.animation = animation;
window.setTimeout(() => {
this.shadowRoot.getElementById("card").style.animation = "none";
}, animation_speed_ms)
]]]
style: |
ha-dialog {
--mdc-dialog-min-width: 750px !important;
--mdc-dialog-max-width: 900px !important;
}
.content {
width: auto !important;
}
ha-card {
--ha-card-background: rgba(240, 240, 240, 0.1);
card:
type: custom:swipe-card
reset_after: 5
parameters:
roundLengths: true
effect: cards
autoplay:
delai: 3000
speed: 650
spaceBetween: 20
threshold: 7
cubeEffect:
slideShadows: false
coverflowEffect:
rotate: 80
depth: 300
start_card: 1
cards:
- type: vertical-stack
cards:
- type: horizontal-stack
cards:
- type: custom:hui-element
card_type: horizontal-stack
cards:
- type: picture-entity
entity: camera.camera_jardin_low
camera_image: camera.camera_jardin_low
show_name: false
show_state: false
- type: picture-entity
entity: camera.camera_entrer_low
camera_image: camera.camera_entrer_low
show_name: false
show_state: false
- type: horizontal-stack
cards:
- type: custom:hui-element
card_type: horizontal-stack
cards:
- type: picture-entity
entity: camera.camera_lenzo_low
camera_image: camera.camera_lenzo_low
show_name: false
show_state: false
- type: picture-entity
entity: camera.camera_tiago_high
camera_image: camera.camera_tiago_high
show_name: false
show_state: false
show_icon: true
entity_picture: /local/neon/cctv.png
show_entity_picture: true
entity: binary_sensor.camera_entrer_motion
extra_styles: |
@keyframes card_bounce {
0% {
transform: scale(1);
}
15% {
transform: scale(0.9);
}
25% {
transform: scale(1);
}
30% {
transform: scale(0.98);
}
100% {
transform: scale(1);
}
}
show_state: true
name: Caméra
styles:
custom_fields:
graph:
- position: absolute
- left: 0px
- top: 143px
grid:
- grid-template-areas: '"i" "n" "s"'
- grid-template-columns: 1fr
- grid-template-rows: 1fr min-content min-content
card:
- border-radius: 10px
- background: rgb(0,0,0,0.2)
- height: 200px
img_cell:
- padding-top: 30px
icon:
- width: 50px
name:
- color: var(--secondary-text-color)
state:
- padding-bottom: 70px
- font-size: 12px
- color: var(--text-primary-color)
Salut @barto_95
Comme l’a dit @WarC0zes les popups ne se déclenchent plus comme avant.
Exemple de code (pas non plus un truc de foufou) :
type: custom:button-card
entity: vacuum.automower
name: Robot
icon: mdi:robot-mower
template: robot
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: Robot
style: |-
--popup-header-background-color: black;
--popup-background-color: black;
--popup-border-radius: 10px;
--popup-border-color: transparent;
--popup-padding-x: 5px;
content:
type: vertical-stack
cards:
- type: entities
entities:
- entity: vacuum.automower
- type: attribute
entity: vacuum.automower
attribute: battery_level
suffix: '%'
name: Automower Battery
icon: mdi:battery-70
- entity: sensor.automower_next_start
card_mod:
style: |
ha-card{
background: rgb(8,68,84);
border-radius: 10px;
box-shadow: 3px 3px rgba(0,0,0,0.4);
--secondary-text-color: white;
border: solid 2px #00FFFF;
}
- type: horizontal-stack
cards:
- type: button
name: Start
tap_action:
action: call-service
service: vacuum.start
service_data:
entity_id: vacuum.automower
icon: mdi:arrow-right
icon_height: 35px
card_mod:
style: |
ha-card{
background: rgb(8,68,84);
border-radius: 10px;
box-shadow: 3px 3px rgba(0,0,0,0.4);
--secondary-text-color: white;
border: solid 2px #00FFFF;
}
- type: button
name: Pause
tap_action:
action: call-service
service: vacuum.pause
service_data:
entity_id: vacuum.automower
icon: mdi:pause
icon_height: 35px
card_mod:
style: |
ha-card{
background: rgb(8,68,84);
border-radius: 10px;
box-shadow: 3px 3px rgba(0,0,0,0.4);
--secondary-text-color: white;
border: solid 2px #00FFFF;
}
- type: button
name: Stop
tap_action:
action: call-service
service: vacuum.stop
service_data:
entity_id: vacuum.automower
icon: mdi:square-outline
icon_height: 35px
card_mod:
style: |
ha-card{
background: rgb(8,68,84);
border-radius: 10px;
box-shadow: 3px 3px rgba(0,0,0,0.4);
--secondary-text-color: white;
border: solid 2px #00FFFF;
}
- type: button
name: Home
tap_action:
action: call-service
service: vacuum.return_to_base
service_data:
entity_id: vacuum.automower
icon: mdi:home-lightning-bolt-outline
icon_height: 35px
card_mod:
style: |
ha-card{
background: rgb(8,68,84);
border-radius: 10px;
box-shadow: 3px 3px rgba(0,0,0,0.4);
--secondary-text-color: white;
border: solid 2px #00FFFF;
}
Ce qui donne en image :
Pour ce qui est de cacher le header, la directive hide_header: true est devenue obsolète. Pour cacher le header il suffit juste de ne plus mettre de title.
Et pour le « styling » du popup ça a pas mal changé au passage à la v2, et ça a encore évolué avec les sous-versions sorties depuis.
Par exemple à la sortie de la v2 on ne pouvait plus faire du card-mod dans le popup.
Ca a finalement été ajouté avec la v2.1.1.
Maintenant que c’est de nouveau possible je crois par contre que les anciennes div (ou selector), ne sont plus utilisables. Bref je pense qu’il faut s’adapter au nouveau frontend
De ce côté là, la doc ici a été mise à jour, mais elle reste un peu succincte.
Je sais pas si je vais t’avoir aider, mais la doc officielle le pourra surement