Card_mod help needed

Configuration Frontend
1

Could REALLY use some card_mod help. Particularly I’m trying to turn off these two elements in media-control card.

image
image715×496 67.7 KB

I know a little above the div by using dev tools but I have no idea how to translate that path at the bottom to card_mod.

image
image794×496 120 KB

I know if I had it I could do a display: none and be done but how is it formatted? I think the big issue is that #shadow-root

For reference, my config looks like this:

      type: custom:mod-card
      card:
        type: media-control
        entity: '[[[ return variables.var_mediaplayer_device + ''_2'' ]]]'
      style: |
        ha-card {
          width: 95vw !important;
          height: 90vh !important;

          margin: 0 !important;
          padding: 0 !important;
          box-shadow: none !important;
          --paper-card-background-color: transparent !important;
        }

        ha-card.type-media-control div.player div.top-info {
          display: none;
        }

Notice my failed attempt to remove as the last definition in the code.

Can anyone help? Have been pulling what little hair I have out trying to get this to work.

2

These types of questions better to ask in the main card-mod thread instead of creating a new 1000th thread.
Why using mod-card? Not needed for a stock media-player.
A keyword “card_mod” is missing.
Variables can only be used here if this media-player card is a custom field inside button card.

3

Apologies for not putting in the correct space. Sometimes we don’t know what we don’t know.

This is actually in a button card. I guess I should have shared everything. Since I have found I can get rid of the name by setting it to a string with a space in it but that speaker image still remains:

type: custom:button-card
variables:
  infocardversion: 1.0.0
template:
  - variable_template
  - body_template
styles:
  grid:
    - grid-template-areas: |
        "title status"  
        "message message"
        "assist assist"        
    - grid-template-rows: min-content 4fr min-content
    - grid-template-columns: 1fr 1fr
  card:
    - background-color: black;
  custom_fields:
    message:
      - font-size: '[[[ return variables.var_font_size ]]]'
      - position: relative
      - padding: 10px
      - border-radius: 10px
      - text-align: start
      - text-wrap: wrap
      - justify-content: center
      - align-self: bottom
      - padding: 2%
      - top: '-10vh'
custom_fields:
  title: ''
  message:
    card:
      type: custom:mod-card
      card:
        type: media-control
        name: ' '
        entity: '[[[ return variables.var_mediaplayer_device + ''_2'' ]]]'
      style: |
        ha-card {
          width: 95vw !important;
          height: 85vh !important;

          margin: 0 !important;
          padding: 0 !important;
          box-shadow: none !important;
          --paper-card-background-color: transparent !important;
        }
4

I would suggest you:

  1. Find out how to style a particular element of media player card - which is a standalone card, not a part of button card. Go to card-mod thread for details. Btw this thread has a dedicated post for media-player (which may not contain styles you are looking for - but may give you ideas).
  2. Then find out how to apply same style inside button card.