Hi @Stinocon
Check the github of the light popup card there is a part that adds css style for the popup to look good.
I think you are missing this part.
1 Like
Hello @DBuit and thank you for your reply.
I tried to insert the following code in my code:
style:
$: |
.mdc-dialog .mdc-dialog__container {
width: 100%;
}
.mdc-dialog .mdc-dialog__container .mdc-dialog__surface {
width:100%;
box-shadow:none;
}
.: |
:host {
--mdc-theme-surface: rgba(0,0,0,0);
--secondary-background-color: rgba(0,0,0,0);
--ha-card-background: rgba(0,0,0,0);
--mdc-dialog-scrim-color: rgba(0,0,0,0.8);
--mdc-dialog-min-height: 100%;
--mdc-dialog-min-width: 100%;
--mdc-dialog-max-width: 100%;
}
mwc-icon-button {
color: #FFF;
}
But it still doesn’t work. Maybe (actually, probably) I’m wrong either to indent or the position.
Normally I can find the error but this time I’m in trouble, can you show me where to insert the style in my code?
Thank you very much.
You have card mod installed? this is needed to let the style work
Yes, card-mod is installed and it’s working in some other cards…
I’ve tried a code like this:
type: glance
entities:
- entity: light.flos
name: Flos
tap_action:
action: toggle
double_tap_action:
action: more-info
hold_action:
action: fire-dom-event
browser_mod:
command: popup
title: Flos
card:
type: 'custom:light-popup-card'
entity: light.flos
icon: 'mdi:lightbulb'
style: null
$: |
.mdc-dialog .mdc-dialog__container {
width: 100%;
}
.mdc-dialog .mdc-dialog__container .mdc-dialog__surface {
width:100%;
box-shadow:none;
}
.: |
:host {
--mdc-theme-surface: rgba(0,0,0,0);
--secondary-background-color: rgba(0,0,0,0);
--ha-card-background: rgba(0,0,0,0);
--mdc-dialog-scrim-color: rgba(0,0,0,0.8);
--mdc-dialog-min-height: 100%;
--mdc-dialog-min-width: 100%;
--mdc-dialog-max-width: 100%;
}
mwc-icon-button {
color: #FFF;
}
settings: true
settingsCard:
type: 'custom:light-entity-card'
cardOptions:
entity: light.flos
hide_header: true
brightness: false
smooth_color_wheel: true
actionsInARow: 2
brightnessWidth: 150px
brightnessHeight: 400px
switchWidth: 150px
switchHeight: 400px
borderRadius: 12px
actions:
- service: scene.turn_on
color: '#FDCA64'
service_data:
entity_id: scene.scrivania_relax
- service: scene.turn_on
color: '#FDCA64'
service_data:
entity_id: scene.test
- service: scene.turn_on
color: '#FDCA64'
service_data:
entity_id: scene.test
Ok,
I have to try it myself i dont use it like this.
I use it in combination with my homekit card or by setting the popup card to overwrite the more-info.
I will try to get it working like this.
1 Like
In all sincerity I would also be willing to change the working mode so that the more-info is replaced in my case as well.
In fact to be honest my primary goal was that but I couldn’t get it to go 
This is an example tab of course, then I should replicate this code for more entities because formally as you see then there will be more light entities in a glance tab.
Thank you very much for the help
The popup card stopped working a while ago and i just cant get it to work again.
Been pulling my hair for a while now so writing here in hopes some of you can find my mistake.
Browser_mod is installed and set up in configuration.yaml with browser_mod: and nothing else.
I have all my resources for lovelace listed in configuration file also.
Homekit panel card, card mod and light popup card are installed through HACS and resources added.
Below is my config
- type: 'custom:homekit-card'
home: false
title: Hjemme
useBrightness: true
useTemperature: true
titleColor: '#FFF'
statePositionTop: true
style: |
:host
--tile-background: rgba(255, 255, 255, 0.10);
--tile-border-radius: 12px;
--tile-width: 100px;
--tile-height: 100px;
--tile-on-background: rgba(255, 255, 255, 0.7);
--tile-name-text-color: rgba(255, 255, 255, 0.8);
--tile-on-name-text-color: rgba(0, 0, 0, 1);
--tile-state-text-color: rgba(255, 255, 255, 0.8);
--tile-on-state-text-color: rgba(0, 0, 0, 1);
--tile-state-changed-text-color: rgb(134, 134, 134);
--tile-unavailable-state-text-color: rgba(255, 255, 255, 1);
--tile-value-text-color: rgba(255, 0, 0, 1);
--tile-icon-color: rgba(255, 255, 255, 0.8);
--tile-on-icon-color: rgba(255,165,0,1.0);
/* #f7d959; */
font-family: Arial;
}
.top-fav {
background-color: rgba(255, 255, 230,0.5) !important;
}
.off-bg {
background-color: rgba(255, 255, 255, 0.10) ;
}
.fan .icon {
color: rgba(0, 0, 0, 0.5) !important;
}
.hideState .state {
visibility:hidden !important;
}
homekit-button .icon.climate {
background-color: rgba(255,165,0,1.0) !important;
}
entities:
- title: Lys
popup:
type: custom:light-popup-card
scenesInARow: 2
brightnessWidth: 130px
brightnessHeight: 350px
switchWidth: 110px
switchHeight: 300px
entities:
- entity: light.gang
name: Gang
double_tap_action:
action: popup
- entity: light.stue_2
name: Stue
double_tap_action:
action: popup
- entity: light.soverom
name: Soverom
double_tap_action:
action: popup
This is a working example for overwriting the more-info:
popup_cards:
input_number.blindone:
title: ""
style:
$: |
.mdc-dialog .mdc-dialog__container {
width: 100%;
}
.mdc-dialog .mdc-dialog__container .mdc-dialog__surface {
width:100%;
}
.: |
:host {
--mdc-theme-surface: rgba(0,0,0,0);
--secondary-background-color: rgba(0,0,0,0);
--ha-card-background: rgba(0,0,0,0);
--mdc-dialog-scrim-color: rgba(0,0,0,0.8);
--mdc-dialog-min-height: 100%;
--mdc-dialog-min-width: 100%;
--mdc-dialog-max-width: 100%;
}
mwc-icon-button {
color: #FFF;
}
card:
type: custom:blinds-popup-card
name: Luxaflex
entities:
- entity: input_number.blindone
positions:
- 60
- 0
- -45
- entity: input_number.blindtwo
positions:
- 75
- 0
- -50
- entity: input_number.blindthree
positions:
- -65
- 0
- 50
1 Like
Hi @Brolsk ,
When using homekit-card the doubel_tap_action does nothing. Default the hold action will open the more-info which will be overwritten because you set the popup. So it should work by holding action
@DBuit
Hold action does not work either. Removed the double_tap_action from config, when double tapping or holding nothing happens.
When commenting out the popup code, the more_info popup works.
@DBuit so… I’ve tried to integrate the style to substitute the more-info dialog in a glance card with this code:
type: glance
entities:
- entity: light.flos
name: Flos
popup_cards:
light.flos:
title: Test
style:
$: |
.mdc-dialog .mdc-dialog__container {
width: 100%;
}
.mdc-dialog .mdc-dialog__container .mdc-dialog__surface {
width:100%;
}
.: |
:host {
--mdc-theme-surface: rgba(0,0,0,0);
--secondary-background-color: rgba(0,0,0,0);
--ha-card-background: rgba(0,0,0,0);
--mdc-dialog-scrim-color: rgba(0,0,0,0.8);
--mdc-dialog-min-height: 100%;
--mdc-dialog-min-width: 100%;
--mdc-dialog-max-width: 100%;
}
mwc-icon-button {
color: #FFF;
}
card:
type: 'custom:light-popup-card'
entity: light.flos
icon: 'mdi:lightbulb'
settings: true
settingsCard:
type: 'custom:light-entity-card'
cardOptions:
entity: light.flos
hide_header: true
brightness: false
smooth_color_wheel: true
actionsInARow: 2
brightnessWidth: 150px
brightnessHeight: 400px
switchWidth: 150px
switchHeight: 400px
borderRadius: 12px
actions:
- service: scene.turn_on
color: '#FDCA64'
service_data:
entity_id: scene.scrivania_relax
But it doesn’t work, I honestly don’t understand where I’m going wrong. Maybe indent? Or maybe something is missing? This code continues to open the classic more-info view
Hi @Stinocon,
The popup_cards is more global configuration. You put this below your resources and before you start configuring your views. This will overwrite the more-info popup for the entity.
Check out browser_mod there you can find more examples i think.
1 Like
@DBuit Oh yeah! We’re almost there!
Finally the popup is rendered on all devices and the theme works! 
Now another problem has presented itself though… I can not in any way to display the settings part nor the part of actions.
I put all the following code in the lovelace configuration and not in the single card. Suggestions?
title: TEST VIEW
popup_cards:
light.flos:
title: TEST
style:
$: |
.mdc-dialog .mdc-dialog__container {
width: 100%;
}
.mdc-dialog .mdc-dialog__container .mdc-dialog__surface {
width:100%;
box-shadow:none;
}
.: |
:host {
--mdc-theme-surface: rgba(0,0,0,0);
--secondary-background-color: rgba(0,0,0,0);
--ha-card-background: rgba(0,0,0,0);
--mdc-dialog-scrim-color: rgba(0,0,0,0.8);
--mdc-dialog-min-height: 100%;
--mdc-dialog-min-width: 100%;
--mdc-dialog-max-width: 100%;
}
mwc-icon-button {
color: #FFF;
}
card:
type: 'custom:light-popup-card'
entity: light.flos
icon: 'mdi:lightbulb'
settings:
openButton: Altri Colori
closeButton: Chiudi
settingsCard:
type: 'custom:light-entity-card'
cardOptions:
entity: light.flos
hide_header: true
brightness: false
smooth_color_wheel: true
cardStyle: |
background-color:#FFF;
actionsInARow: 4
brightnessWidth: 150px
brightnessHeight: 400px
switchWidth: 150px
switchHeight: 400px
borderRadius: 12px
actions:
- service: scene.turn_on
color: '#ffaa00'
service_data:
entity_id: scene.flos_test1
- service: scene.turn_on
color: '#0191fc'
service_data:
entity_id: scene.flos_test2
- service: scene.turn_on
color: '#f0e479'
service_data:
entity_id: scene.flos_test3
Thank you!
1 Like
Guys, I don’t understand how to show the popup now and how i can use browser-mod
Please give a working example of how to do this inside homekit-card.
This is my code that worked a few days ago
views:
- title: Home
icon: 'mdi:home-outline'
path: home
panel: true
cards:
- type: 'custom:homekit-card'
home: false
title: Info
entities:
- title: Light
popup:
type: custom:light-popup-card
entities:
- entity: light.fibaro_system_fgd212_dimmer_2_level_4
name: Light
Uncaught (in promise) ReferenceError: regeneratorRuntime is not defined in console regarding kiosk-mode, nothing else. BROWSER_MOD 1.3.0 IS INSTALLED also shows.
Pasting the lovelace code in full here to give context.
title: Hjemme
kiosk_mode:
admin_settings:
hide_header: true
views:
- title: Home
panel: true
badges: []
cards:
- type: vertical-stack
cards:
- type: 'custom:mod-card'
style:
swipe-card:
$: |
.swiper-pagination-bullet {
width: 10px;
height: 10px;
background-color: rgba(255,255,255,1.0) !important;
position: relative;
top: 15px
}
.swiper-pagination-bullet-active {
background-color: rgba(255,165,0,1.0) !important;
}
card:
type: 'custom:swipe-card'
start_card: 2
reset_after: 30
parameters:
spaceBetween: 8
autoHeight: true
pagination:
type: bullets
cards:
- type: picture-glance
style: |
ha-card {
margin-bottom: -15px;
background: rgba(255, 255, 255, 0.0);
border-radius: 0;
box-shadow: none;
color: white;
}
aspect_ratio: '16:9'
camera_image: camera.stue
camera_view: live
entities: []
hold_action:
action: call-service
service: script.stuekamera_turn_on
double_tap_action:
action: call-service
service: script.camera_tapoc200_stue_hd
- type: 'custom:homekit-card'
home: false
title: Hjemme
useBrightness: true
useTemperature: true
titleColor: '#FFF'
statePositionTop: true
style: |
:host
--tile-background: rgba(255, 255, 255, 0.10);
--tile-border-radius: 12px;
--tile-width: 100px;
--tile-height: 100px;
--tile-on-background: rgba(255, 255, 255, 0.7);
--tile-name-text-color: rgba(255, 255, 255, 0.8);
--tile-on-name-text-color: rgba(0, 0, 0, 1);
--tile-state-text-color: rgba(255, 255, 255, 0.8);
--tile-on-state-text-color: rgba(0, 0, 0, 1);
--tile-state-changed-text-color: rgb(134, 134, 134);
--tile-unavailable-state-text-color: rgba(255, 255, 255, 1);
--tile-value-text-color: rgba(255, 0, 0, 1);
--tile-icon-color: rgba(255, 255, 255, 0.8);
--tile-on-icon-color: rgba(255,165,0,1.0);
/* #f7d959; */
font-family: Arial;
}
.top-fav {
background-color: rgba(255, 255, 230,0.5) !important;
}
.off-bg {
background-color: rgba(255, 255, 255, 0.10) ;
}
.fan .icon {
color: rgba(0, 0, 0, 0.5) !important;
}
.hideState .state {
visibility:hidden !important;
}
homekit-button .icon.climate {
background-color: rgba(255,165,0,1.0) !important;
}
entities:
- title: Lys
popup:
type: 'custom:light-popup-card'
scenesInARow: 2
brightnessWidth: 130px
brightnessHeight: 350px
switchWidth: 110px
switchHeight: 300px
entities:
- entity: light.stue_2
name: Stue
double_tap_action:
action: popup
hold_action:
action: popup
- entity: light.soverom
name: Soverom
double_tap_action:
action: popup
hold_action:
action: popup
- title: Temp
entities:
- entity: sensor.multisensor_stue
name: Stue
hold_action: none
- entity: sensor.multisensor_gang
name: Gang
hold_action: none
- entity: sensor.temperature_9
name: Loft
hold_action: none
- title: Div
entities:
- entity: sensor.varmepumpe_status
name: Varmepumpe
icon: mdi:air-conditioner
double_tap_action:
action: none
- entity: vacuum.xiaomi_vacuum_cleaner
name: Jeeves
icon: mdi:robot-vacuum
- card: custom:button-card
cardOptions:
entity: alarm_control_panel.verisure_alarm
size: 90%
hold_action:
action: none
tap_action:
action: none
show_name: true
show_state: false
show_label: false
state:
- value: 'armed_home'
icon: mdi:shield-account
color: green
font-size: 5px
name: Skallsikret
- value: 'armed_away'
icon: mdi:shield-home
color: green
name: Helsikret
- value: 'disarmed'
icon: mdi:shield-off
color: red
name: Desarmert
styles:
card:
- '-webkit-box-shadow': none
- box-shadow: none
- background-color: 'rgba(255, 255, 255, 0.0)'
- margin-top: '-8px'
name:
- color: black
- card: 'custom:button-card'
action: toggle
cardOptions:
entity: switch.ventilasjon
size: 90%
show_name: false
show_state: false
show_label: false
state:
- value: 'on'
icon: mdi:hvac
name: På
- value: 'off'
icon: mdi:hvac-off
name: Av
tap_action:
action: call-service
service: switch.toggle
service_data:
entity_id: switch.ventilasjon
hold_action:
action: none
styles:
card:
- '-webkit-box-shadow': none
- box-shadow: none
- background-color: 'rgba(255, 255, 255, 0.0)'
- margin-top: '-2px'
icon:
- color: |
[[[
if (states['switch.ventilasjon'].state == "off")
return "255, 255, 255, 0.8";
return "rgba(255,165,0,1.0)";
]]]
1 Like
Hi @cpsskipper
this should still work…
You got the latest version of the home-kit card? and the light popup card?
Maybe clear the cache of the browser?
Or check if you have any errors in the console?
it work!
i was delete browser_mod from resources