Could you maybe share the entire card? I might have a way, but it’s really difficult to explain as it depends on how you have defined your card.
of course but its a test card a button, when its ready its a custom:button-card
what i tested, the card doenst accept any css code…
and when i use it this way i cant add height of the popup to auto , Line 16 in code editor.
show_name: true
show_icon: true
type: button
tap_action:
action: fire-dom-event
browser_mod:
deviceID:
- laptop_julia
- firehd_tablet
command: popup
hide_header: false
title: Treppen Licht
large: false
style:
$: |
.mdc-dialog .mdc-dialog__container {
height: 70%;
width: auto;
}
.mdc-dialog .mdc-dialog__container .mdc-dialog__surface {
width:auto;
height: auto;
border: 1px solid gray;
border-radius: 15px;
background: center / cover no-repeat url("/local/profilbilder/background.jpg");
}
.: |
: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: vertical-stack
cards:
- type: horizontal-stack
cards:
- type: custom:light-popup-card
entity: light.treppenbeleuchtung
brightnessHeight: 200px
brightnessWidth: 100px
displayType: switch
switchWidth: 100px
switchHeight: 200px
settingsPosition: bottom
settings:
openButton: Mehr
closeButton: Zurück
settingsCard:
type: custom:light-entity-card
card_mod:
style: |
ha-card {
box-shadow: none !important;
margin-left: 100px;
}
cardOptions:
entity: light.treppenbeleuchtung
cardStyle: |
background-color:#FFF;
entity: switch.sp220_weihnachtsbaum
name: POPUP HOMEKIT STYLE TEST
Try adding the card mod part under cardOptions, maybe that will work?
You can also try to add the --ha-card-border-radius: none !important under the popup settings. Under :host.
Lastly why not use deviceID: this, that way it won’t open up the popup on multiple devices at the same time.
yes, this works well 
thank you.
you are right, its a test button on my other popups i have :
deviceID:
- this
i had one last problem, on my other popups i can use in the popup style height: auto; but with this configuration it dont work i must give a value.
have you perhaps a idea ?
.mdc-dialog .mdc-dialog__container {
height: 560px;
width: auto;
}
I’m sorry can’t help you there…
okay anyway Thank you for your help
maybe try adding !important to your height?
icon: mdi:fan
spin: true
I’m using this in my config and I’m noticing that the fan icon isn’t rotating exactly around its center axis, so it looks like it’s off balance.
Now I understand the entity_value_path, and what it does. It is responsible for tracking the state of the buttons. Since I’m triggering scripts, I can’t really see a way for my sensor to show the correct value.
i tried height: auto !important ; but the popup is still very very small with auto in height.
and when i try to call as settingscard the same card again with a slider, the position of the settingscard is 50px - 100px under the normal card, have you perhaps a idea why he do this?
- type: custom:light-popup-card
entity: light.deckenlampe_flur_erster_stock
brightnessHeight: 200px
brightnessWidth: 100px
displayType: switch
switchWidth: 100px
switchHeight: 200px
settingsPosition: bottom
settings:
openButton: Helligkeit
closeButton: Zurück
settingsCard:
type: custom:light-popup-card
cardOptions:
displayType: slider
brightnessHeight: 200px
brightnessWidth: 100px
entity: light.deckenlampe_flur_erster_stock
how do you power ON and OFF your shield? i have a shield too, but cant power it on/off ?
can you post your code for the card?
how did you get the swipe effect with the grid card?
i found no documentation that this is possible?
Is there a good resource for how to style cards? I am using a calendar card in my config and want to set the background color to match the other tiles.
Sure thats all the code needed? When i use it i just get a normal switch popup with nothing in it.
- entity: sensor.harmony_activity
name: Media Vardagsrum
icon: mdi:television
offIcon: mdi:power
offStates:
- PowerOff
popup:
type: custom:layout-card
entities:
- type: custom:hui-element
card_type: custom:switch-popup-card
entities:
- sensor.harmony_activity
buttons:
- icon: mdi:power
value: script.tvoff
name: Power
- icon: mdi:apple
value: script.apple_tv
name: Apple Tv
- icon: mdi:playstation
value: script.ps5
name: PS5
- icon: mdi:television-guide
value: script.tv
name: Tv
icon: si:dolby
noActiveState: 'Off'
entity_value_path: attributes.percentage
service: script.turn_on
service_data:
entity_id: value
Just to show what i used in my config.
Ah figured it out. I needed to use the popupExtend: funktion insted of just popup: that you had.
Thx for Sharing the code.
@ Jimmy_Berglund
I have made some changes. This will actually track the state.
- entity: sensor.denon_source
name: Home Theater
icon: mdi:television
offIcon: mdi:power
offStates:
- PowerOff
popup:
type: custom:switch-popup-card
icon: mdi:television
noActiveState: 'Off'
entity_value_path: state
entities:
- sensor.denon_source
buttons:
- icon: mdi:power
value: PowerOff
name: Power Off
service: script.turn_on
service_data:
entity_id: script.turn_off_tv
- icon: si:nvidia
value: SHIELD
name: Shield TV
service: script.turn_on
service_data:
entity_id: script.start_shield_tv
- icon: si:xbox
value: Xbox One
name: XBox One
service: script.turn_on
service_data:
entity_id: script.turn_on_xbox
- icon: si:nintendoswitch
value: Switch
name: Switch
service: script.turn_on
service_data:
entity_id: script.turn_on_switch
1 Like
I’ve added a calendar card, and I would like to make two changes. First, I would like to have it be 4 tiles high on a PC and 3 tiles high on mobile. Is this possible? Second, I need to change the card background so it matches the rest of my tiles (default white color). I use the dark theme so the calendar is displaying dark.
- title: Calendar
entities:
- card: calendar
noPadding: true
wider: true
widerSize: 3
higher: true
higherSize: 4
cardOptions:
entities:
- calendar.family
- calendar.birthdays
- calendar.garbage_collection
Cool! Thx for sharing! Is the value your looking on in the code the sensor you have for your denon?