🔹 fold-entity-row - Hide away stuff in entities cards

JogiL · August 23, 2024, 9:52am

Hi All,

I‘ve read the whole thread (I must admit that I didn‘t understand everything), but I didn’t find a solution to define a card-mod that applies to all entities (head and entities).

Currently I use the following code to define it for each entity separately:


type: entities
entities:
  - type: custom:fold-entity-row
    head:
      entity: cover.alle_markisen
      card_mod:
        style: |
          :host {
          {% if is_state(config.entity,'open') %}
            --paper-item-icon-color: red;
              }
          {%else%}
            --paper-item-icon-color: green
          {%endif%}
               }
    entities:
      - entity: cover.markise_links
        card_mod:
          style: |
            :host {
            {% if is_state(config.entity,'open') %}
              --paper-item-icon-color: red;
                }
            {%else%}
              --paper-item-icon-color: green
            {%endif%}
                 }
      - entity: cover.markise_mitte
        card_mod:
          style: |
            :host {
            {% if is_state(config.entity,'open') %}
              --paper-item-icon-color: red;
                }
            {%else%}
              --paper-item-icon-color: green
            {%endif%}
                 }
      - entity: cover.markise_rechts
        card_mod:
          style: |
            :host {
            {% if is_state(config.entity,'open') %}
              --paper-item-icon-color: red;
                }
            {%else%}
              --paper-item-icon-color: green
            {%endif%}
                 }

Is there a way to define only one card-mod that applies to all entities (head and entities)?

Ildar_Gabdullin · August 23, 2024, 9:54am

main card-mod thread → 1st post → link at the bottom → f-e-r

JogiL · August 23, 2024, 10:47am

Do you mean that one?

Ildar_Gabdullin · August 23, 2024, 10:58am

hmm, not really fantastic, but yes, this one

Ildar_Gabdullin · August 23, 2024, 11:03am

well, it could be not obvious from posted examples - but here is your way:

    type: entities
    entities:
      - type: custom:fold-entity-row
        head:
          entity: sun.sun
        padding: 15
        open: true
        entities:
          - entity: sun.sun
          - entity: sun.sun
        card_mod:
          style: |
            :host {
              --paper-item-icon-color: red;
            }

But what I completely missed - you need to check a state…
My fault, let me think a bit.

Check this one:

    type: entities
    entities:
      - type: custom:fold-entity-row
        head:
          entity: input_boolean.test_boolean
        padding: 15
        open: true
        state_color: true
        entities:
          - entity: input_boolean.test_boolean_2
          - entity: input_boolean.test_boolean_3
        card_mod:
          style: |
            :host {
              --state-input_boolean-on-color: red;
              --state-input_boolean-off-color: green;
            }

This is an example for input_boolean, you will need to write a similar code for covers like:

        :host {
          --state-cover-open-color: red;
          --state-cover-closed-color: green;
          --state-cover-closing-color: cyan;
        }

JogiL · August 23, 2024, 12:38pm

Thank you very much, that helped!

Now this code is working:


type: entities
entities:
  - type: custom:fold-entity-row
    head:
      entity: cover.alle_markisen
    entities:
      - entity: cover.markise_links
        icon: mdi:dock-left
      - entity: cover.markise_mitte
        icon: mdi:dock-top
      - entity: cover.markise_rechts
        icon: mdi:dock-right
    state_color: true
    card_mod:
      style: |
        :host {
          --state-cover-open-color: red;
          --state-cover-closed-color: green;
          --state-cover-closing-color: cyan;
        }

JogiL · August 23, 2024, 1:06pm

Can I ask another question related to this kind of code? How can I hide the state („Aus“ and „Geschlossen“)?:

show_state: false doesn’t work:

  - type: custom:fold-entity-row
    head:
      entity: binary_sensor.alle_fenster
    show_state: false
    state_color: true
    card_mod:
      style: |
        :host {
          --state-binary_sensor-on-color: red;
          --state-binary_sensor-off-color: green;
        }

Ildar_Gabdullin · August 23, 2024, 1:14pm

Do not invent options ).
You may try using “custom:template-entity-row” for customizing/not showing a state.
Also, you may hide a state for a standard entity row by card-mod, there should be a ready example on the link I provided above.

JogiL · August 23, 2024, 2:00pm

I didn‘t invent „show_state: false“, I‘ve found it in other posts!

Can you give me a closer hint where to find that example?

Ildar_Gabdullin · August 23, 2024, 2:05pm

Someone did not read Docs & posted smth, another guy took it “as is” - this is how fake news are spread)).

No, cannot, sorry, follow the link I gave you, it is there…

JogiL · August 23, 2024, 2:10pm

„show_state“ is in the GitHub documentation of lovelace-multiple-entity-row

Ildar_Gabdullin · August 23, 2024, 2:13pm

This option may belong to many cards - & may be absent for some card, it is normal.

JogiL · August 23, 2024, 8:48pm

Now I‘ve found that one…

Hiding an icon or a state

…and it hides the state with this code:

type: entities
entities:
  - entity: binary_sensor.alle_fenster
    card_mod:
      style:
        hui-generic-entity-row:
          $: |
            .text-content:not(.info) {
              display: none;
            }

But when I add „ type: custom:fold-entity-row“…

type: entities
entities:
  - entity: binary_sensor.alle_fenster
    type: custom:fold-entity-row
    card_mod:
      style:
        hui-generic-entity-row:
          $: |
            .text-content:not(.info) {
              display: none;
            }

… it’s back again:

How can I hide the state in this card type?

Ildar_Gabdullin · August 23, 2024, 11:10pm

Do not have a ready example.
Go to card-mod thread → 1st post → that link
Find there examples for fold-entity-row & adapt for your needs.

JogiL · August 26, 2024, 11:47am

I‘ve found a solution: I set the the type of the head and the entities to custom:multiple-entity-row and then can use card_mod for them:

      - type: custom:fold-entity-row
        open: true
        head:
          entity: binary_sensor.alle_fenster
          type: custom:multiple-entity-row
          show_state: false
        state_color: true
        card_mod:
          style: |
            :host {
              --state-binary_sensor-on-color: red;
              --state-binary_sensor-off-color: green;
            }
        entities:
          - entity: binary_sensor.fenster_gastebad_contact
            type: custom:multiple-entity-row
            show_state: false
          - entity: binary_sensor.fenster_bad_contact
            type: custom:multiple-entity-row
            show_state: false
          - entity: binary_sensor.fenster_schlafzimmer_contact
            type: custom:multiple-entity-row
            show_state: false
          - entity: binary_sensor.fenster_lilli_contact
            type: custom:multiple-entity-row
            show_state: false
          - entity: binary_sensor.fenster_marie_contact
            type: custom:multiple-entity-row
            show_state: false

JogiL · August 26, 2024, 12:01pm

I have another question: Shouldn’t child elements of a group that are group parents themselves automatically be expandable as well (without listing them as entities)?

Like with this code:

type: entities
entities:
  - type: custom:fold-entity-row
    head:
      entity: light.alle_lichter

I only get this, although all of the children are group parents:

Bobsilvio · September 27, 2024, 8:08am

Hi, I’m trying to move everything to the left, and I have to remove the icons, why doesn’t the style work?

type: custom:fold-entity-row  
head:
  type: section
  label: Aperture
  style: |
    :host div#items {
        margin: -100px -200px -200px -20px;
    }
entities:
  - entity: sensor.conteggio_aperture_posta_giornaliere_lettura
    name: Aperture giornaliere
  - entity: sensor.conteggio_aperture_posta_mensili_lettura
    name: Aperture mensili
  - entity: sensor.conteggio_aperture_posta_annuali_lettura
    name: Aperture annuali

reste_narquois · September 27, 2024, 9:35am

Firstly, left padding on this card is managed via an inbuilt setting. See the documentation for details on the padding: key.

Secondly, it looks like you are trying to apply changes via the custom frontend component card-mod: do you actually have it installed? And which version? Since version 3.4.0, all styles need to be under an explicit card_mod key.

If wanting to remove the display of icons from entities for example, then you are probably better off asking this in the dedicated thread for card-mod, where you find detailed explanations and examples, especially in this excellent post by community member Ildar_Gabdullin.

Mariusthvdb · October 12, 2024, 3:07pm

trying to edit the resource to fix some styling details I want in all cards, Ive managed to decrease the size of the fold icon and set the color to my primary color.

Ive also managed to move the padding of the items to 0.

this way I dont have to set that in all (400+) template-entity-row card configs, nor do I need to card-mod that, which makes it a lot faster.

there are 2 things I want to change still:

move the label heading to the left which I now do with a card_mod:

style: |
  .label {
    margin-left: 0px !important;
  }

second, instead of the hardcoding of the padding with

style=${`padding-left: 0;`}

id like to make that conditional wit something like

style=${this._config.padding ? `padding-left: ${this._config.padding}px;` : `padding-left: 0;`}

meaning to say, if there is a padding set in the config, use that, if no padding is set, use 0.

however, no matter what I try, that never works and the items are moved to the right…

this is what I have it look like right now
more subtle icon size and color, and better aligning for my themes of both head label and items.:

If there is a JS guru around, please dont hesitate…

current yaml:

  - type: custom:fold-entity-row
#     card_mod: !include /config/dashboard/card_mods/fold_arrow_icon.yaml #&toggle #!secret style_toggle_icon
#       style:
#         ha-icon:
#           $: |
#             ha-svg-icon {
#               color: var(--primary-color);
#               width: 24px;
#             }
    head:
      type: section
      label: Details
      card_mod: !include /config/dashboard/card_mods/label.yaml
    group_config:
      secondary_info: last-changed
#     padding: 0
    entities:
      - input_boolean.hide_card_overflow
      - input_number.active_icon_size
      - input_boolean.weer_view_background

fapg · January 5, 2025, 5:17pm

I’m try’ing to open and close based on entity state something like this:

type: custom:fold-entity-row
open: |
  {{ states('sensor.powermeter_phase_a_current') | float > 11 or 
     states('sensor.powermeter_phase_b_current') | float > 11 or 
     states('sensor.powermeter_phase_c_current') | float > 11 }}
head:
  entity: sensor.consumo_rede
  name: Consumo Rede
  icon: mdi:transmission-tower-import
  tap_action:
    action: navigate
    navigation_path: /energy
  hold_action:
    action: more-info
  card_mod:
    style:
      hui-generic-entity-row$: |
        .state {
           color: {{ 'green' if states(config.entity) | int < 1 else 'red' }};
        }
group_config:
  secondary_info: last-changed
  card_mod:
    style: |
      :host {
        color: {% if states(config.entity) | float > 12 %} red {% else %} inherit {% endif %};
      }
entities:
  - entity: sensor.powermeter_phase_a_current
  - entity: sensor.powermeter_phase_b_current
  - entity: sensor.powermeter_phase_c_current

But the enhancement isn’t impemented:

I saw in this thread that it can be doable through card_mod, but I can’t figure out how to. Can someone help me?

Thanks,