what ccs style could I use for example? thx in advance
@mvanlijden that is right the homekit card creates the popup for you so you do not need to add it in the popups section of browser mod.
If you always want to overwrite the more-info popup that hass uses than you should use the popups section so no matter where you get the more-info popup it shows your custom popup
1 Like
Hello there!
I’m having an issue with the light-pop up-card. I followed the instructions but maybe I installed it wrong?
Custom element doesn't exist: light-popup-card.
Hello Everyone,
I have started to play around with this card type. Everything looks fine. However, the popup slider is always displayed as a switch, not a dimmer, although the light entities I am testing with are dimmable (a HUE bulb through HUE bridge and HUE integration, and a Tradfri bulb through DeConz dongle and ZHA integration).
I have been searching on the forum and I have found people who have had issues the other way around (the slider is displayed as a brightness dimmer but they don’t manage to display it as a switch). Can you guys please help how to make the slider dimmable?
My simple testing code:
type: custom:homekit-card
title: Home
home: false
useBrightness: true
useTemperature: true
useRGB: true
titleColor: '#FFF'
enableColumns: true
statePositionTop: true
rows:
- row: 1
columns:
- column: 1
tileOnRow: 4
entities:
- title: Iluminación
popup:
type: custom:light-popup-card
scenesInARow: 2
brightnessWidth: 130px
brightnessHeight: 350px
switchWidth: 110px
switchHeight: 300px
entities:
- entity: light.pie_negro
name: Pie Negro
icon: hue:bulb-classic
The way the slider is displayed:
Force slider by using: displayType: slider as extra option. Something is broken with latest release. I had the same issue with all my lights. Forcing to slider fixes it.
1 Like
Hey! That worked! Thanks for the prompt response. 
Looking forward to the next release then.
In the meantime, a couple of questions:
- Is is possible that the slider works “live”, I mean that it works while sliding instead of after releasing the finger/cursor?
- Is it possible to slide just with the button, something similar to what the
custom:slider-button-carddoes?
-
No, I haven’t seen a custom card that does this. I don’t think it’s ideal either, since that means every few milliseconds a service call will be envoked. I have seen third party apps that do this, but they are native and don’t use Lovelace (which is webview). I believe HomeHabit does this, but I haven’t used it anymore (only tested briefly).
-
No idea, I don’t use this button so have no experience with all possibilities of his card. I only use the popup slider card
Thanks for your feedback! Understood, and makes absolutely sense your thought about point one. For point two, it is not very important. Just wanted to know whether it was something already implemented or feasible for future releases. I can live without that. 
Great work by the developer by the way. It works really great. Cheers!
1 Like
Can someone explain how this works? I dont get it! I want a popup expand if i hold a custom button card! I already installed browser mod and light pop up card. I tried a few examples but dont get it how it works 
For example a custom button card - how i can i get the pop up working with the hold action?!
type: custom:button-card
entity: light.vorhaus_decke
icon: mdi:ceiling-light
name: Vorhaus
state_color: true
styles:
card:
- height: 100px
state:
- styles:
card:
- border: solid 1px rgba(100,100,100,0.3)
- box-shadow: 0px 0px 10px 3px var(--paper-item-icon-active-color)
value: 'on'
- styles:
card:
- border: solid 1px rgba(100,100,100,0.3)
- box-shadow: 3px 3px rgba(0,0,0,0.4)
value: 'off'
style: |
ha-card {
background-color: rgba(50,50,50,0.3);
}
I am very frustrated
I’ve been styling CSS for days but nothing works.
I installed the thermostat popup and it just pops up.
but the css styling doesn’t work!
this is what i have and i have tried 100 things but the pop up is not responding to anything.
I can apply custom styles to the standard cards.
this is what i have and i hope i get help here on other forums i have no luck.
popup_cards:
climate.lyric_156684:
title: hello
style:
position: fixed
z-index: 999
top: 0
left: 0
height: 100%
width: 100%
display: block
align-items: center
justify-content: center
background: rgba(0, 0, 0, 0.8)
flex-direction: column
margin: 0
‘–iron-icon-fill-color’: ‘#FFF’
card:
entity: climate.lyric_156684
type: custom:thermostat-popup-card
Hey guys.
I am really sorry, but I’m not really sure on how to install this card…
I installed light-popup-card via HACS and in the github readme it says I have to add
resources:
url: /hacsfiles/light-popup-card/light-popup-card.js
type: module
to my ui-lovelace.yaml file.
The problem is, I currently don’t have the ui-lovelace.yaml file and when I add the code to my configuration.yaml file like this:
lovelace:
resources:
- type: module
url: /hacsfiles/light-popup-card/light-popup-card.js
my whole dashboard is messed up and all my tabs/views are gone.
Do I have to add a ui-lovelace.yaml file manually? And if yes, what happens to my current dashboard?
Is there currently a built-in way to change the on state icon color on the popup instead of the default yellow?
never mind, figured it out by going through the JS code
For anyone interested, simply add
color_on: '#yourColor'
to the cards portion of the config under popup_cards
OK one last question now that I solved my last one, ha.
If I have 6 light buttons, do I really have to copy this code 6 times for each button? Is there not a more efficient way? I wasn’t sure.
popup_cards:
my.light:
title: my light
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: #myColor;
}
card:
type: custom:light-popup-card
entity: my.light
icon: my:icon
brightnessWidth: 150px
brightnessHeight: 400px
switchWidth: 150px
switchHeight: 400px
color_on: '#myColor'
Hey
…isn’t it somehow possible to include a color wheel instead of the “rgb” button (bottom right). almost as further “action”
and then I would like to know how to get the “Effect List” into the “RGB Map”.
I’ve been searching here for hours now^^ it can’t really be that difficult 
here is the code as i have it in my button_card_template
popup_light_rgb:
hold_action:
action: fire-dom-event
browser_mod:
command: popup
title: '[[[ return entity.attributes.friendly_name ]]]'
hide_header: true
auto_close: false
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: '[[[ return entity.entity_id ]]]'
icon: mdi:led-strip
actionSize: 60px
settings:
openButton: RGB
closeButton: CHIUDI
settingsCard:
type: custom:light-entity-card
cardOptions:
entity: '[[[ return entity.entity_id ]]]'
brightness: false
full_width_sliders: true
hide_header: true
show_slider_percent: true
smooth_color_wheel: true
consolidate_entities: true
actions:
- service: light.turn_on
service_data:
entity_id: '[[[ return entity.entity_id ]]]'
color_temp: 153
color: '#d8d9e1'
- service: light.turn_on
service_data:
entity_id: '[[[ return entity.entity_id ]]]'
color_temp: 326
color: '#d5b08d'
- service: light.turn_on
service_data:
entity_id: '[[[ return entity.entity_id ]]]'
color_temp: 500
color: '#ce944b'
```add the following at the end of your code
- action: fire-dom-event
image: >-
data:image/svg+xml,%3Csvg
xmlns="http://www.w3.org/2000/svg" viewBox="0 0
50
50"%3E%3Cstyle%3Esvg%7Bbackground:radial-gradient(circle,rgba(255,255,
255,1) 0%25,rgba(255,255,255,0)
80%25),conic-gradient(%237827e6,%23e622e7,
%23e40588,%23e41919,%23e5691e,%23e8e22e,%237de629,%2334e828,%2333e75c,
%2334e8e0,%23207de5,%231227e5,%237827e6)%7D%3C/style%3E%3C/svg%3E
browser_mod:
command: popup
title: '[[[ return entity.attributes.friendly_name ]]]'
card:
type: custom:light-entity-card
entity: '[[[ return entity.entity_id ]]]'
brightness: true
color_temp: true
white_value: true
full_width_sliders: false
hide_header: true
show_slider_percent: true
smooth_color_wheel: true
persist_features: true
consolidate_entities: true
this is going in a good direction! 
but that doesn’t quite fit…
do you happen to know how to get the “effects” in here?
Please send me PM in german.
I have the same problem the padding at the bottom and top can be a little more