Found it.
action: fire-dom-event
browser_mod:
command: popup
title: My title
card:
type: ...etc...
to
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: My title
content:
type: ...etc...
Only 40 popup left to do…
Thank you. But I see the edges are not perfect. But this is a good first hint. Will do some research.
I have updated browser_mod and popups now appear but they are transparent and all squished up.
Here is my code if anyone can help
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: HOME MODES
style:
.: |
:host {
--mdc-theme-surface: var(--primary-background-color);
--secondary-background-color: var(--primary-background-color);
}
:host .content {
width: 90vw;
height 100vh;
}
#################################################
# #
# MODES #
# #
#################################################
content:
type: custom:layout-card
layout_type: grid
layout_options:
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr
grid-template-rows: auto
grid-gap: 0px 0px
justify-items: stretch
mediaquery:
"(max-width: 800px)":
grid-template-columns: 1fr 1fr 1fr
"(max-width: 1200px)":
grid-template-columns: 1fr 1fr 1fr 1fr 1fr
cards:
- type: custom:button-card
and here is how the popup appears
theme.yaml update
Thanks!
I took the browser_mod part from themes.yaml and that helped with the transparency problem but the popup still appears very small and squished not like before
Your style is not correct anymore, style is only for css variables
card_mod was added in 2.1.1, so you can do any modification you want
That did the trick.
Thanks!
Hmm, with this new card_mod 2.0 , how can i use the hide-header: true to not show the pop-up header?
Like the example:
Before the 2.0 there was a hide-header: true to use on po-ups, now, aparentally can be used just on a global scope.
remove title in data
Thank you @Mattias_Persson . This solve one of my problems. Can you gimme 1 more help?
Im trying to solve the alignment of the “Find my phone” (Achar meu telefone) now:
When im using the card-mod-helper shows this:
And my code looks like that:
- type: custom:button-card
name: Achar meu telefone
card_mod:
style:
hui-vertical-stack-card$: |
#root {
justify-content: space-evenly !important;
padding: 150px;
}
icon: mdi:volume-high
template: icon_name
tap_action:
action: call-service
service: notify.mobile_app_xiaomi_celular
service_data:
title: Encontre meu telefone
message: Estou aqui!
data:
ttl: 0
priority: high
channel: alarm_stream_max
Where im losing this?
Note: the padding 150px it was just for testing purposes.
Yes, that bug is called “user error”
service: browser_mod.popup
Excelente. In my case the background is transparent. I copied a template of yours to later modify it but it looks like this. Is it something from the theme.yaml?
Morning,
why is my font color in popups grey and not visible ?
I am searching for what i did wrong but didn’t get it.
Set Theme to dark.
Thanks a lot 
Hey all
I am trying to integrate the spotify card (Spotify Lovelace Card) in to the media card instead of the PLEX one. I am hoping for some assistance on getting the styling equal to what the rest is like, I tried to modify the direction @Mattias_Persson gave for @chezpaul2 on his picture gallery (A different take on designing a Lovelace UI - #2203 by Mattias_Persson)( but it’s not where i want it to be yet. Anyone able to help? I am missing the round corners, the right amount of spacing inbetween the 4 playlists and the size of the tiles must be a bit larger
- type: conditional
conditions:
- entity: select.conditional_media
state_not: Kantoor
- entity: select.conditional_media
state_not: Keuken
card:
type: custom:spotify-card
account: default
spotify_entity: media_player.spotify_mart
playlist_type: discover-weekly
grid_covers_per_row: '2'
limit: 4
country_code: NL
display_style: grid
card_mod:
style: |
ha-card {
border-radius: calc(var(--custom-button-card-border-radius) / 2) !important; /* card - rounded corners */
aspect-ratio: 2/2 !important; /* card - square */
margin: 0px !important; /* remove card margins to line up with rest of dashboard */
}
.grid{
object-fit: cover !important; /* fill the whole card */
aspect-ratio: 1/1; /* needed for object-fit */
border-radius: calc(var(--custom-button-card-border-radius) / 2) !important; /* card - rounded corners */
margin: 0px !important; /* remove card margins to line up with rest of dashboard */
}
.btn {
top: 50% !important; /* center buttons */
}
.grid-item{
border-radius: var(--button-card-border-radius) !important;
object-fit: cover !important; /* fill the whole card */
aspect-ratio: unset; /* undo image aspect-ratio when clicked */
}
.grid-item-album-image{
border-radius: var(--button-card-border-radius) !important;
object-fit: cover !important; /* fill the whole card */
aspect-ratio: unset; /* undo image aspect-ratio when clicked */
margin: 0px !important; /* remove card margins to line up with rest of dashboard */
}
.grid-item:hover{
box-shadow:none !important;
}
#header{
display:none !important;
}
#footer{
display:none !important;
}
.playback-controls{
display:none !important;
}
#header-track{
display:none;
}
#content{
border: 0px !important;
}