I still have the same problem after update to 0.4.4 version
@DBuit Is there a way to change the color of the ‘popup’ (read: background). It is always black because of the following:
:host {
background-color:#000!important;
}
I’m using this popup (with fullscreen: false) with Browser Mod and I’m showing more than just your popup in there (e.g. entities card). The popup created by Browser Mod uses the color of my theme. The same for the entities card, but your card will always be black.
Can I change that somehow? Without changing the source, because that will get annoying with updates. I tried to overwrite the :host style but it isn’t working or I’m just doing that wrong.
Have you tried overwriting with !important after your CSS rule? I maybe nerd to remove the !important in the default because that might be blocking at the moment not sure why i added that and if it is needed let me know if the important works of not i Will see what i can do
Yeah, I tried it with !important as well. Didn’t work either.
Ok, fixed it. I was trying to use Card Mod and couldn’t get it to work so decided to read the documentation on that:
Note that some cards … as well as some custom cards, like … do not have a
ha-cardelement, andcard-modwill thus not work for those
Your card seems to be one of them. Then I noticed the mod-card section in the Card Mod documentation.The important part in that documentation is as follows:
mod-card sets it’s own
backgroundtotransparent
So, by just placing your card in Card Mod with the mod-card option it works:
type: custom:mod-card
card:
type: custom:light-popup-card
entity: {{ entity }}
fullscreen: false
switchWidth: 150px
switchHeight: 380px
@DBuit As you can see I also set the switchWidth and switchHeight, because I think you’ve switched around their default values. The width is 380px and the height is 150px by default which seems incorrect unless that is actually what you wanted.
2 Likes
it is solved 
thanks any way
Currently playing arround with this card and for some reason i only get a toggle with my template lights. I have two zigbee bulbs (mqtt) which are behind relays so i combined both entities into a template light.
This works good from the normal ui and other cards but i cant get the brightness slider to show up with the popup card.
Addressing the zigbee bulb directly with the popup card works fine tho.
I tried playing arround with the supportedFeaturesTreshold setting but i dont really understand it and so far i couldnt make it work.
@DBuit Hi, is it possible to change the brightness/volume/cover percentage above the slider? I have a white background and can’t read the percentage anymore. I tried some codes by using inspecting elements, but it didn’t work.
I want it to match my text colors in my theme, but the percentages are hardcoded to white.
Also a way to change the icon color when active? It’s yellow now but I’d rather use a color matching my theme.
Is it possible to use Light popup card in a combination with the button card plugin?
Thus, a long hold will show the home kit slider?
If yes, does somebody have a code example? I can’t find any documentation of this.
Hi @DBuit,
Thanks for sharing this with us. I have three qeustions:
- How do I mimic hold_action with tap_action. Basically what would be the action for the popup?
- Is
statePositionToppreset for only certain entities? What would I need to do in order to implement on certain entities? - Buttons only grey-out if they are off but not in other cases (ex. Home vs. Away). Is that something that can be changed?
Thanks in advance!
this is my multimedia page, I made a remote control with an image element, but there are really too many lines of code, so I thought of writing a custom card.
the card works perfectly, but I have limited knowledge. I don’t know how to make pop-ups for the numeric keypad and for the channel list. in the configuration you see, I made the popup cards with browser mod, but I don’t think I can call this service from inside the custom card.
I saw that it can be done with card-tools but I can’t. can anyone help me finish the project?
6 Likes
Very nice
Could you share the code and the element picture?
Thanks
I have been able to use the light-popup card with the HomeKit card successfully. It is amazing.
I am trying to use the light-popup-card with browser_mod. But nothing happens.
In the ui_lovelace.yaml, I have added the popup_cards information.
light.cuisine:
title: "test"
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:
type: custom:light-popup-card
entity: light.cuisine
icon: mdi:led-strip
actionsInARow: 2
brightnessWidth: 150px
brightnessHeight: 400px
switchWidth: 150px
switchHeight: 400px
actions:
- service: scene.turn_on
service_data:
entity_id: scene.ontspannen
color: "#FDCA64"
name: ontspannen
- service: scene.turn_on
service_data:
entity_id: scene.helder
color: "#FFE7C0"
name: helder
- service: scene.turn_on
service_data:
entity_id: scene.concentreren
color: "#BBEEF3"
name: concentreren
- service: scene.turn_on
service_data:
entity_id: scene.energie
color: "#8BCBDD"
name: energie
And I have added this:
- type: custom:button-card
entity: light.cuisine
hold_action:
action: call-service
service: browser_mod.popup
service_data:
title: ‘ ‘
card:
type: custom:light-popup-card
entity: light.cuisine
When I hold the button, nothing happens… 
I think I have misunderstood the concept of popup_cards and browser_mod. Any help ?
@DBuit Hi, if you find the time, can you update the media_player-popup and cover-popup cards so that they show gradual percentages when using the slider? Just like the light-popup supported a few releases ago. Would higly appreciated it !
Hi DBuit,
I am sure you are busy but just wondering if you had the time to check the custom picture instead of the icon?
Thanks.
Hi, anything new, i have the same problem ?
@DBuit great work for homekit style cards and all the extras. I’m trying to use your custom light popup card for my light entity which is dimmable (Shelly Dimmer) but I can’t get brightness slider only switch on/off as you can see on my picture:
When the light is off this entity doesn’t have brightness attribute, but when light is on brightness is present but in popup I’m only have switch?!
I have tried to turn the light on and then activate popup card but still only switch is present no brightness slider…
1 Like