Card-mod + lovalace-more-info-card CSS styling

Configuration Frontend
1

Hello,

since the standard tile card doesn’t support vertical slider feature for covers I try to use lovelace-more-info-card CSS styling it with Card-mod especially hiding elements of the more-info dialog that are not needed.

So far I was only able to hide the state-card-content element by using:

        - type: horizontal-stack
          cards:
            - type: custom:more-info-card
              entity: cover.reluxa1
              card_mod:
                style: |
                  .type-custom-more-info-card {
                    state-card-content { display: none;}
                  }

            - type: custom:more-info-card
              entity: cover.reluxa2
            - type: custom:more-info-card
              entity: cover.reluxa3

reluxa
reluxa595×776 25.8 KB

Unfortunately the rest of the unneeded elements (ha-more-info-state-header, ha-icon-button-group) simply do not get hidden with similar approach. I’m not sure if it’s because of the #shadow-root(s) with no part attribute defined on the parent level (to be able to use in CSS the ::part solution) or because of something else.

Does anyone have a working solution for this or any hint on what am I doing wrong?

Thanks.

2

Hi

Did you ever find a method of achieving this? I’m having exactly the same issue when trying to use more-info-card with scripts, and can’t find any way to hide the additional sections.

Thanks

3

Unfortunately not, so I gave up on it.

4

Pity, thanks.

5

I’ve got something similar, try it out

CleanShot 2024-12-12 at 13.12.10@2x
CleanShot 2024-12-12 at 13.12.10@2x1900×1428 156 KB

CleanShot 2024-12-12 at 14.12.27@2x
CleanShot 2024-12-12 at 14.12.27@2x5792×3306 876 KB

show_name: true
show_icon: true
name: button
type: button
double_tap_action:
  action: fire-dom-event
  browser_mod:
    service: browser_mod.popup
    data:
      style: >
        --tablet-popup-header-color: rgba(0, 0, 0, 0); 
        --popup-background-color: rgba(0, 0, 0, 0.4);  --popup-border-width: 0; 
        --popup-max-width: 80vw; 
        --ha-card-border-radius: 0px !important; 
        --ha-card-background: none !important; 
        --mdc-theme-surface: rgba(34, 38, 39, 1) !important;
        --ha-card-border-width: 0px !important;
      card_mod:
        style:
          .: |
            @media (max-width: 450px), (max-height: 500px) {
              ha-dialog {
                --mdc-dialog-min-width: 100vw !important;
                --mdc-dialog-min-height: 100vh !important;
                --popup-border-radius: 0 !important;
              }
            }
      content:
        type: horizontal-stack
        cards:
          - type: custom:more-info-card
            entity: cover.hall_window
            card_mod: &shared_card_mod # Define the anchor
              style:
                $: |
                  h1 {
                    display: none !important;
                  }
                .: |
                  state-card-content {
                    display: none !important;
                  }
                  div.action {
                    display: none !important;
                  }
                  ha-card {
                    padding-top: 1vw !important;
                  }
                 ha-card>div>more-info-content$more-info-cover$ha-more-info-state-header$: |
                  * {
                    display: none !important;
                  }
                
                ha-card>div>more-info-content>more-info-cover$: |
                  div {
                    margin: 0 !important;
                  }
                  div.actions {
                    display: none !important;
                  }
          - type: custom:more-info-card
            entity: cover.living_room_window
            card_mod: *shared_card_mod 
          - type: custom:more-info-card
            entity: cover.hall_window
            card_mod: *shared_card_mod
1 Like
6

It took sometime but I figured you can hide elements like with the following:

card_mod:
              style:
                more-info-content$ more-info-light $ ha-more-info-state-header$:
                  |
                  p {
                    display: none;
                  }
                more-info-content$ more-info-light$ div$ light-color-rgb-picker$:
                  |
                  .color-container {
                    native-color-picker {display: none};
                  }
                more-info-content$ more-info-light$: |
                  div {
                    display: none;
                  }
                  .controls {
                    .color-container 
                    {
                      display: none;
                    }
                    ha-state-control-light-brightness { 
                      display: block;
                    }    
                    ha-icon-button-group { display: block;}   
                    light-color-rgb-picker {
                      display: block;
                      width: 50%;
                      padding 0px;
                      margin: 0px;
                    }
                    light-color-rgb-picker .native-color-picker .container {
                      display: none;
                    }             
                  }
                .: |
                  .type-custom-more-info-card {
                    state-card-content { display: none;}
                  }
7

Suggest to avoid using “nested” here, may not work in some browsers.

8

For the sake of completeness (and for future reference) I thought I’d come back and post the code for scripts, based on the good work here. The following hides everything apart from the list of fields (the title “Run script” is also hidden) and the control buttons (Cancel / Run).

type: custom:more-info-card
entity: script.livingroom_say
title: " "
card_mod:
  style:
    more-info-content$ more-info-script $ ha-more-info-state-header$: |
      p {
        display: none;
      }
    more-info-content$ more-info-script $ ha-markdown$: |
      p {
        display: none;
      }
    more-info-content$ more-info-script$: |
      .queue {
        display: none;
      }
      .fields {
        .title {
          display: none;
          }
      } 
    .: |
      .type-custom-more-info-card {
        state-card-content { display: none;}
      }