Hi @sforrest2020,
the settingsCard part should be under popup, because it’s the configuration for the popup and not the tile. So just give the whole settingsCard section 2 more spaces and it should work.
1 Like
Also, is it possible to string together multiple service calls for a single popupExtend button?
Hi, I’m not an expert but I try to get by, I inserted popup cover, it works but it looks small, how can you enlarge the image? thanks
Hello guys,
I am trying to use DBuits light-popup-card. As you can see in the picture it seems that the "frame does not go all the way down. I have found a work-around by adding a invisible button that calls for browser_mod.close_popup to temporarily solve the problem. But I feel it should be possible to solve with CSS. I have tried to add a padding-bottom without any success.
Does anyone have an idea?
hold_action:
action: call-service
service: browser_mod.popup
service_data:
title: '[[[ return entity.attributes.friendly_name ]]]'
deviceID: this
hide_header: true
# large: true
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.5);
--mdc-dialog-min-height: 100%;
--mdc-dialog-min-width: 100%;
--mdc-dialog-max-width: 100%;
}
mwc-icon-button {
color: #FFF;
}
card:
type: entities
entities:
- type: 'custom:light-popup-card'
entity: '[[[ return entity.entity_id ]]]'
icon: none
fullscreen: false
brightnessWidth: 130px
brightnessHeight: 360px
borderRadius: 1.7em
sliderColor: '#c7c7c7'
sliderTrackColor: 'rgba(25, 25, 25, 0.9)'
- type: 'custom:button-card' ## Temporarily added to solve issue
color_type: card
tap_action:
action: call-service
service: browser_mod.close_popup
styles:
card:
- height: 230px
- width: 400px
- background: rgba(0,0,0,0)
This seems to have stopped working for me
Latest home assistant updates broke it?
EDIT: My bad, my browser mod was not configured correctly, all working now 
I can’t find the file to download the light-popup-card inside my HACS. What will happen?
Hi @DBuit
Hope all is well in your new role 
Is it possible to use a picture instead of a color on the action buttons?
I have gotten hold of the Hue ones and that we be cool to implement
Thanks in advance
Hi,
Nope not possible srry
Ok, should I make a feature request on github or will you never like to implement it?
Is it possible to add a color gradient to a action somehow? I use an action to pop-up the color wheel for a light. And I’d like to add a gradient to that circle instead of a fix color to show that its not a scene.
Newbie question.
I been playing around with the homekit style card. Changing colors, background etc. etc.
Got some cards and some pop up cards working now.
only the pop-up is showing correct in the mobile device but in 3 web browsers it doesn’t.
I can play with the witch en height that is working on the mobile but on my computer still a to small pop up.
the switch of the pop-up scales that i see
In my configurations.yaml i hae thiss
lovelace:
mode: yaml
resources:
[ {url: /hacsfiles/lovelace-xiaomi-vacuum-card/xiaomi-vacuum-card.js, type: module},
{url: /local/slider-entity-row.js, type: module},
{url: /hacsfiles/Homekit-panel-card/homekit-panel-card.js, type: module},
{url: /hacsfiles/light-popup-card/light-popup-card.js, type: module},
{url: /hacsfiles/button-card/button-card.js, type: module} ]
and this is my ui.lovelace.yaml
views:
- title: "Noordwal"
panel: true
cards:
- type: "custom:homekit-card"
style: |
:host {
--tile-background: rgba(125, 125, 125, 0.2);
--tile-border-radius: 8px;
--tile-width: 90px;
--tile-height: 90px;
--tile-on-background: rgba(13, 23, 74, 1);
--tile-name-text-color: rgba(20, 20, 20, 1);
--tile-on-name-text-color: rgba(130, 130, 130, 1);
--tile-state-text-color: rgba(20, 20, 20, 1);
--tile-on-state-text-color: rgba(120, 120, 120, 1);
--tile-state-changed-text-color: rgb(18, 43, 129);
--tile-unavailable-state-text-color: rgba(255, 0, 0, 1);
--tile-value-text-color: rgba(0, 0, 0, 1);
--tile-icon-color: rgba(0, 0, 0, 0.3);
--tile-on-icon-color: #f7d959;
--tile-width-mobile: 90px;
--tile-height-mobile: 90px;
--min-header-height: 150px;
--tile-icon-size: 30px;
--tile-image-radius: 100%
--slider-width: 20px;
--slider-height: 20px;
}
enableColumns: true
statePositionTop: true
rows:
- row: 1
columns:
- column: 1
tileOnRow: 4
entities:
- title: Woonkamer
entities:
- entity: light.woonkamer_light_tv_677
slider: true
name: TV
popup:
type: custom:light-popup-card
- entity: light.woonkamer_light_achter_bank_674
slider: true
name: Bank
popup:
type: custom:light-popup-card
- entity: light.woonkamer_dimmer_woonkamer_mid_664
slider: true
name: midden
popup:
type: custom:light-popup-card
- entity: light.keuken_eetkamer_tafel_654
slider: true
name: Eetkamertafel
popup:
type: custom:light-popup-card
- entity: light.keuken_keuken_659
slider: true
name: keuken
popup:
type: custom:light-popup-card
- entity: light.hal_light_hal_669
slider: true
name: Hal
- entity: switch.bering_20_2_22
name: berging
popup:
type: custom:light-popup-card
- column: 2
tileOnRow: 3
entities:
- title: Tuin
entities:
- entity: light.woonkamer_tuin_verlichting_511
name: Tuin
- entity: cover.woonkamer_zonnenscherm_270
name: Zonnenscherm
- row: 2
columns:
- column: 1
tileOnRow: 4
entities:
- title: 1e Verdieping
entities:
- entity: light.badkamer_badkamer_light_508
name: badkamer
slider: true
popup:
type: custom:light-popup-card
- entity: light.kamer_gooimeer_slaapkamer_gooimeer_639
name: Slaapkamer Gooimeer
slider: true
popup:
type: custom:light-popup-card
- entity: switch.kamer_tuin_tv_slaapkamer_635
name: TV
- entity: light.baby_kamer_babykamer_licht_357
name: Kleine kamer
slider: true
popup:
type: custom:light-popup-card
- row: 3
columns:
- column: 1
entities:
- title: Zolder
entities:
- entity: switch.was_ruimte_droger_252
name: Droger
- entity: switch.was_ruimte_wasmachine_617
name: Wasmachine
- entity: light.zolder_kamer_spanningslof_515
name: Spanningslof
- entity: switch.zolder_kamer_computer_513
name: Computer
- entity: light.was_ruimte_licht_wasruimte_294
name: Wasruimte
popup:
type: custom:light-popup-card
scenesInARow: 2
brightnessWidth: 130px
brightnessHeight: 350px
switchWidth: 110px
switchHeight: 300px
1 Like
Hi Karstensson,
I had the same problem and I solved it with this code:
switch.tkb_front_porch:
title: ""
style:
$: |
.mdc-dialog__scrim {
backdrop-filter: brightness(150%) contrast(90%) blur(20px);
}
.mdc-dialog .mdc-dialog__container {
width: 100%;
}
.mdc-dialog .mdc-dialog__container .mdc-dialog__surface {
width:100%;
box-shadow:none;
}
.mdc-dialog .mdc-dialog__scrim {
background: none;
}
.: |
:host {
--mdc-theme-surface: none;
--secondary-background-color: 'trasperant';
--ha-card-background: none;
--mdc-dialog-scrim-color: rgba(0,0,0,0.3);
--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: switch.tkb_front_porch
icon: mdi:lamp
fullscreen: true
scenesInARow: 2
brightnessWidth: 150px
brightnessHeight: 400px
switchWidth: 150px
switchHeight: 400px
borderRadius: 40px
Thanks, but that did not work out for me still got the same line. I did however solve it by adding padding to the popup-inner class
card:
type: entities
entities:
- type: 'custom:light-popup-card'
entity: '[[[ return entity.entity_id ]]]'
icon: none
fullscreen: false
brightnessWidth: 130px
brightnessHeight: 360px
borderRadius: 1.7em
sliderColor: '#c7c7c7'
sliderTrackColor: 'rgba(25, 25, 25, 0.9)'
style: |
.popup-inner {
padding-top: 100px;
padding-bottom: 235px;
}
hi all, i have a problem with styling (Theme) the service: browser_mod.popup
the normale Popup´s works all fine with the new styling: card-mod-more-info-yaml
But the Pop with service: browser_mod.popup dont work.
this works fine:
dont work:
the Button with the browser popup:
action: call-service
service: browser_mod.popup
service_data:
deviceID: this
title: Wohnzimmer Status
card:
type: custom:mod-card
style: |
$: |
.mdc-dialog .mdc-dialog__scrim {
backgrund: none !important;
}
.: |
:host {
backgrund: none !important;
}
card:
type: horizontal-stack
cards:
- type: entities
state_color: true
show_header_toggle: false
entities:
- entity: media_player.samsung_tv_q9075
tap_action:
action: none
- entity: media_player.denon_avr_x4200w
tap_action:
action: none
- entity: media_player.vu_uno4k_se
tap_action:
action: none
how can i style the browser_mod.popup ? 
Thanks All!
I have the same problem (see below in my post)
Did you find a solution already.
on my phone it’s working good
@DBuit Is it possible to apply styles to the settings button of light-popup-card?
I tried with card-mod but without success.
Thanks!
this is so crazy… simple html/css dont works 
@D-Vine
@KTibow give me the Solution!
Solution:
edit from style: | to style:
action: call-service
service: browser_mod.popup
service_data:
deviceID: this
title: Wohnzimmer Status
card:
type: custom:mod-card
card:
type: horizontal-stack
cards:
- type: entities
state_color: true
show_header_toggle: false
entities:
- entity: media_player.samsung_tv_q9075
tap_action:
action: none
- entity: media_player.denon_avr_x4200w
tap_action:
action: none
- entity: media_player.vu_uno4k_se
tap_action:
action: none
style:
.: |
ha-card {
background: none !important;
--ha-card-background: none;
}
:host {
--ha-card-background: none;
--card-background-color: transparent;
}
very nice.
i search for a nice manual/agenda from the frontend Styling. But i dont fine it 
Firstly, excellent work @DBuit! 
Is it possible to display the slider as a “standard card” without the popup?
I’ve had a look through a few of the forums, but can’t seem to find a solution?