Card-Mod // Help navigating the DOM Tree

Configuration Frontend
1

I have the following entity card in one of my dashboards:

type: entities
entities:
  - entity: input_text.pi_hole_disable_duration
    secondary_info: none
    name: Duration HH:MM:SS
style:
  div$:
    hui-generic-entity-row$: |
      state-badge {
        display: none;
      }

The DOM Tree looks like this:

DOM

What i would like to achieve is this but using card-mod:

<state-badge class=" pointer " icon="" tabindex="0" style="display: none;">

I’ve got zero experience using the DOM so I’m completely lost here.
Help would be gladly appreciated :grinning:
Thanks in advance!

2

Try to apply style from entity itself like this:

type: entities
entities:
  - entity: input_text.pi_hole_disable_duration
    secondary_info: none
    name: Duration HH:MM:SS
    style:
      hui-generic-entity-row$: |
        state-badge {
          display: none;
        }

Or you apply it from card like this:

type: entities
entities:
  - entity: input_text.pi_hole_disable_duration
    secondary_info: none
    name: Duration HH:MM:SS
card_mod:
  style:
    hui-input-text-entity-row$:
      hui-generic-entity-row$: |
        state-badge {
          display: none;
        }
1 Like
3

Second suggestion worked perfectly!
Thanks!