More-Info Style (browser-mod)

Hi!

I searched everywhere, I don’t find this information… Can anyone please help me?
I use browser mod to open a more-info service and I want to know how to change the style of this more-info popup. I want to hide the header and put a blue background color to the popup.

Any idea?

Thanks!

Nobody changed the style of more-info or wanted to achieve this?

Yes, me. I want to change the more-info card the same way you want, hide the top buttons. Started looking for the answer, didn’t find it, yet.

I’ve done it like this

      card_mod:
        style:
          ha-dialog$: |
            div.mdc-dialog__scrim {
              backdrop-filter: blur(15px) !important;
              -webkit-backdrop-filter: blur(15px) !important;
            }
          ha-dialog: |
            .content{
              border: 1px solid #013896 !important;
              background-color: rgba(15,15,36,1);
              padding-top: 10px;
              padding-left: 10px;
              padding-right: 10px;
            }

Blur behind popup, border, background, no top header, everything I wanted.

Tried your solution, but it’s not what I want. My solution is based on the custom:more-info-card, the custom:popup-card and four helper toggles ( input_boolean). This way I can switch the four parts like this:

The yaml code:

views:
  - title: VIJF
    path: vijf
    icon: mdi:dice-5-outline
    badges: []
    cards:
      - type: button
        entity: light.z03_tiffany_lamp_buiten_achter_light
        name: schuur lampje
        tap_action:
          action: fire-dom-event
          browser_mod:
            service: browser_mod.popup
            data:
              title: custom more-info card
              content:
                type: custom:more-info-card
                entity: light.z03_tiffany_lamp_buiten_achter_light
              card_mod:
                style:
                  .: |
                    ha-dialog {
                      --popup-border-radius: 12px 0px       !important;
                      --ha-card-header-font-size:   24px    !important;
                      text-align: center                    !important;
                    }
                  div.content: |
                    :host([card])
                      .content .container {
                        padding: {{'8px' if is_state('input_boolean.hide_more_info_attributes','on')}} !important;
                      }
                  ha-dialog-header$header: |
                    .header-bar {
                      padding: 0px 36px 0px 0px !important;
                      display: {{'none' if is_state('input_boolean.hide_more_info_infoheader','on')}} !important;
                    }
                    .header-title {
                      line-height: 38px                     !important;
                      padding: 10px 0px 0px                 !important;
                    }
                  ha-dialog>div>div>more-info-card$ha-card:
                    $: |
                      h1 {
                        display: {{'none' if is_state('input_boolean.hide_more_info_cardheader','on')}}    !important;
                      }
                    .: |
                      state-card-content {
                        display: {{'none' if is_state('input_boolean.hide_more_info_state_card','on')}}    !important;
                      }
                      div {
                        margin-top: {{'20px' if is_state('input_boolean.hide_more_info_cardheader','on')}} !important;
                      }
                    div>more-info-content$: |
                      more-info-cover {
                        margin: {{'20px 0px -20px' if is_state('input_boolean.hide_more_info_cardheader','on')}} !important;
                      }
                      more-info-light {
                        margin: {{'20px 0px -20px' if is_state('input_boolean.hide_more_info_cardheader','on')}} !important;
                      }
                    div>more-info-content$more-info-cover$div: |
                      ha-attributes {
                        display: {{'none' if is_state('input_boolean.hide_more_info_attributes','on')}} !important;
                      }
                    div>more-info-content$more-info-light$div: |
                      ha-attributes {
                        display: {{'none' if is_state('input_boolean.hide_more_info_attributes','on')}} !important;
                      }
        hold_action:
          action: more-info
      - type: custom:popup-card
        entity: light.z03_tiffany_lamp_buiten_achter_light
        card:
          type: custom:more-info-card
          entity: cover.tz3000_qa8s8vca_ts130f_cover
        title: this is a cover entity
        size: normal
        timeout: 15000
        dismissable: true
        card_mod:
          style:
            .: |
              ha-dialog {
                --popup-border-radius: 12px 0px       !important;
                --ha-card-header-font-size:   24px    !important;
                text-align: center                    !important;
              }
            div.content: |
              :host([card])
                .content .container {
                  padding: {{'8px' if is_state('input_boolean.hide_more_info_attributes','on')}} !important;
                }
            ha-dialog-header$header: |
              .header-bar {
                padding: 0px 36px 0px 0px !important;
                display: {{'none' if is_state('input_boolean.hide_more_info_infoheader','on')}} !important;
              }
              .header-title {
                line-height: 38px                     !important;
                padding: 10px 0px 0px                 !important;
              }
            ha-dialog>div>div>more-info-card$ha-card:
              $: |
                h1 {
                  display: {{'none' if is_state('input_boolean.hide_more_info_cardheader','on')}}    !important;
                }
              .: |
                state-card-content {
                  display: {{'none' if is_state('input_boolean.hide_more_info_state_card','on')}}    !important;
                }
                div {
                  margin-top: {{'20px' if is_state('input_boolean.hide_more_info_cardheader','on')}} !important;
                }
              div>more-info-content$: |
                more-info-cover {
                  margin: {{'20px 0px -20px' if is_state('input_boolean.hide_more_info_cardheader','on')}} !important;
                }
                more-info-light {
                  margin: {{'20px 0px -20px' if is_state('input_boolean.hide_more_info_cardheader','on')}} !important;
                }
              div>more-info-content$more-info-cover$div: |
                ha-attributes {
                  display: {{'none' if is_state('input_boolean.hide_more_info_attributes','on')}} !important;
                }
              div>more-info-content$more-info-light$div: |
                ha-attributes {
                  display: {{'none' if is_state('input_boolean.hide_more_info_attributes','on')}} !important;
                }

One can only see the second custom:popup-card in Edit mode on the Lovelace UI and it shows a cover entity while it is in fact the ‘hold_action’ of the button (which is a light entity).

Next step is to convert this to a decluttering_template; saves a lot of copy-paste actions and makes the yaml file smaller.