🔹 Browser_mod - turn your browser into a controllable device, and a media_player

[ASNNetworks]

Did you also reload the theme through services and the refresh Lovelace?

[PickOne]

I just restarted HA. Now I called the Reload themes, but no effect

[ASNNetworks]

1. Make sure you have selected that theme as active via your profile or as service call.

2. Add the lines to theme.yaml

3. Use the service call to reload the themes

4. Refresh Lovelace page (or restart app if on mobile)

Nothing much I can add to this, this is the code everyone uses and works (with both 1.5 and 2.x browser_mod).

[PickOne]

I’ve restarted HA from SSH and now it is working I don’t understand why, but anyway, now it is working good. Thank you!

[PickOne]

BTW, what means these signs from the code?
.: |
and
$

I don’t understand these signs and how to use them, any docs for this? Thank you again

[ASNNetworks]

These are DOM’s in the CSS code, the theme modding is code from ‘card mod’ which you have installed through HACS (otherwise the code I posted wouldn’t have worked on your system)…

thomasloven/lovelace-card-mod: Add CSS styles to (almost) any lovelace card (github.com)

It’s very advanced stuff. I’m not an expert myself and still learning CSS. But those signs are basically navigation points inside the CSS code. I linked the Github of card-mod above. You should also visit the card-mod threads for card mods and themes if you want to explore more.

Modding cards Card-mod - Add css styles to any lovelace card - Share your Projects! / Dashboards & Frontend - Home Assistant Community (home-assistant.io)

Modding themes Card-mod - Super-charge your themes! - Share your Projects! / Themes - Home Assistant Community (home-assistant.io)

[Deckoz2302 (Brad)]

I also have this problem. Can’t figure out why the pop ups are way oversized after this update.

[ASNNetworks]

tagging you here as well @Deckoz2302

Browser_mod 2.x has new styling options, it’s documented at the Github repo: hass-browser_mod/popups.md at c46fcf222bb9b8a893af9d5f0612576359e24f10 · thomasloven/hass-browser_mod · GitHub

You can use them either in the popup-card, in your theme.yaml or style it using card_mod. If you want the popups to look like the old Browser_mod (and like the default more-info dialogs) just change the minimum and maximum width. I upgraded today to V2 finally and fixed it easily for all popups using this in my theme.yaml:

  popup-min-width: 400px
  popup-max-width: 400px

This gives all popups a fixed width of 400px. Change to what you see fit. In the link from Github you can find some other styling options like border-radius, background color etc.

[Deckoz2302 (Brad)]

Interesting, so before, pop ups just auto conformed to the screen size. Now we have to set a width?

Thanks for the tip to fix. But auto conform was a whole lot better

[PickOne]

I have a 100 points question

How can I change the background color of the header (that field where the title and the “X” button are) for a full screen popup?

I added image to be more accurate. That red bordered region, from the popup. I tried everything, nothing works. In the end, I want to put it like position absolute and hide the title, letting only the “X” to be shown

[PickOne]

You can even add a height, if you want. I used --mdc-dialog-min-height: auto; for some “unusual” looking popups

[ASNNetworks]

    ha-header-bar $: |
      .mdc-top-app-bar {
        background: YOUR COLOR VALUE !important;
      }

Under the rest of the code of card-mod-more-info-yaml:

[Protoncek (Pavel)]

I also found out that this centering - for unknown reason - works or not… mostly it works, but it can happen that occasionally on any of my (4) tablets randomly doesn’t and popup again shows at top.

I guess it’s the same behaviour as is with browser mod’s media player and other sensors - they are just too unreliable for use since V2 came out. From browser mod i only use fire-dom-event for popup and that’s it - this works wonderfully.

[PickOne]

Yes, I did this before and it is working, but this is affecting all the popups. Can I achieve the same result only for specific popups? A CSS added into the lovelace card yaml which have the popup?

Thank you!

[PickOne]

With the help of @ASNNetworks , I added this to my themes.yaml and everything is ok on the computer, phone, 6 similar tablets, and another 2 different tablets.

ios-dark-mode:
  card-mod-theme: ios-dark-mode
  card-mod-more-info-yaml: |
    .: |
      ha-dialog {
        --vertical-align-dialog: center !important;
      }

2-3 tablets had the same issue like you say, but after I clean the fully browser cache, everything was ok.

Oh, one more thing, I needed to restart HA completely, I don’t know why. Restart from SSH with reboot now

[ASNNetworks]

Yes, in the browser_mod github link I posted it is explained.

[PickOne]

It is very strange…
I want to hide the title with css and make the “X” button as absolute. I done it, it was working, but after I have refreshed the page, nothing works now.

With this was working in the first place:

      card_mod:
        style:
          ha-dialog$: |
            .mdc-dialog .mdc-dialog__scrim {
              background-color: var(--mdc-dialog-scrim-color, rgba(0, 0, 0, 0.92)) !important;
            }
          ha-dialog: |
            .heading{position:absolute !important}
            .content{margin-top:20px !important}
            .heading ha-header-bar .main-title{display:none !important}

Then, after I have refreshed the page, the code was changed like this:

      card_mod:
        style:
          ha-dialog$: |
            .mdc-dialog .mdc-dialog__scrim {
              background-color: var(--mdc-dialog-scrim-color, rgba(0, 0, 0, 0.92)) !important;
            }
          ha-dialog: >
            .heading{position:absolute !important}

            .content{margin-top:20px !important}

            .heading ha-header-bar .main-title{display:none !important}

And even if I changed the code back, nothing worked. I can’t make the heading as absolute position. Any idea?

Edit: now it is working again, then stops and so on I need to delete cache everytime I want to work, If I make another change, everything will be as initial, then again delete browser cache Very strange

Edit2: Now seems that the code does not changes itself after refresh…

Edit3: Amazingly strange :)) It is still chaning my code, only that sign, from " | " to " > ", but I think I understand why. Seems to work, but I need to delete cache after I finish any editing. I use Firefox

Thanks again, for help

End: I have removed the title and I moved the “X” button to the middle bottom of the screen, in order to have more room from top, this is the code and the result:

Last Edit: Added a little blink effect as well, in order to see it better

          ha-dialog: >
            .heading ha-header-bar, .heading{position:absolute
            !important;width:0px;height:0px} .heading ha-header-bar
            .main-title{display:none !important} .heading ha-header-bar
            ha-icon-button{position:fixed;bottom:0;margin-bottom:30px;left:
            50%;transform: translateX(-50%);animation: ha-icon-button 1.0s
            linear infinite;border-radius:50px;color: #6cbaff;} @keyframes
            ha-icon-button {
                0% {box-shadow: 0 0 40px #6cbaff8c;}
                50% {box-shadow: none;}
                100% {box-shadow: 0 0 40px #6cbaff8c;}
            }

[Protoncek (Pavel)]

That’s what i was talking about. It works, then suddenly it doesn’t, then it works again, and it doesn’t again…
it’s just too unreliable for daily use…

[PickOne]

Yes, it is. A good workaround what I achieved it is like this

1. Delete browser cache
2. Edit (now it will show you your changes in real time, but don’t play into the console browser with changes)
3. Save
4. Delete browser cache again

For me, seems to work good in this way. And BTW, delete browser cache for tablets as well, after editing

[Protoncek (Pavel)]

I’ve done all that thousand times. Usually after that indeed it does work, but sadly it doesn’t last long (at least for me it doesn’t…)