How to style the fold-entity-row head?

Mariusthvdb · December 3, 2019, 1:26am

  - type: custom:fold-entity-row
    style: |
      ha-card { font-weight: bold; }
    head:
      type: section
      label: Set commands
    entities:
      - !include /config/lovelace/includes/include_alias_set_commands.yaml

doesnt do anything… I simply want the head to be bold, and possibly change color when folded put (down even know if we can template that, but would be cool). Would that be an option @thomasloven, is there such a thing as state for the folded or collapsed fold-entity-row?

please help and have a look?
thanks!

thomasloven · December 3, 2019, 10:56am

There’s no ha-card in an entity row.

The documentation describes how to style rows in entity cards: https://github.com/thomasloven/lovelace-card-mod#styling-entity-and-glance-cards

Mariusthvdb · December 3, 2019, 12:29pm

thanks Thomas, I was aware of the, and, of course had already tried this (ha-card was in fact my nth try…):

  - type: custom:fold-entity-row
    head:
      type: section
      label: Set commands
      style: |
        :host {color: red;}
    entities:
      - !include /config/lovelace/includes/include_alias_set_commands.yaml

and

  - type: custom:fold-entity-row
    style: |
      :host {color: red;}
    head:
      type: section
      label: Set commands
    entities:
      - !include /config/lovelace/includes/include_alias_set_commands.yaml

neither if which have any effect… I can’t seem to find the correct place put the to style section for the fold. Think I checked all other examples also…

secondly, checking the templates section: what would be the variable to template for the folded/collapsed styling?

lastly, as you can see upon closer inspection the thin line goes beyond the cards for each fold-entity-row:

how can I prevent that from happening?

hekm77 · December 3, 2019, 4:25pm

@Mariusthvdb
Is that what you were looking for?

- type: entities
  style:
    .: |
    "#states > div:nth-child(1) > fold-entity-row":
      $:
       "#head > entity-row-maker > hui-section-row":
         $: |
           div.divider {
             height: 0px;
           }
           div.label {
             color: orange;
             font-size: 30px;
             letter-spacing: var(--mcg-title-letter-spacing);
             font-weight: bold;
           }
  entities:
    - type: custom:fold-entity-row
      head:
        type: section
        label: Test fold-entity-row
      entities:
        - sensor.energy_monthly_smart_plug_bedroom
        - sensor.energy_monthly_smart_plug_camera

Mariusthvdb · December 3, 2019, 5:05pm

O dear, thanks! Not really sure tbh… haven’t set any such complex style in my config yet…

What is entity-row-maker? Yet another custom card?

I merely want the head to show bold, or have a color, and maybe change on collapse…

copied this, but again, nothing happens… not even an error, or an empty card…

hekm77 · December 3, 2019, 5:12pm

The code above changes color, header size (div.lavel) and removes the divider (div.divider)

Mariusthvdb · December 3, 2019, 5:25pm

I can see what it does in your card, but I cant read it yet, dont understand what it does and what it all means… secondly the entity-row-maker is not in my config, nor can I find any reference to it at all?

lastly, my full config for this card is in a vertical-stack-in-card. So I am at a loss where to add the style for each head in the fold-entity-row s:

type: custom:vertical-stack-in-card
cards:
  - type: custom:hui-markdown-card
    title: >
      Home-assistant Aliases
    style: |
      ha-card { background: 'var(--paper-card-background-color)'; }
    content: |
      ___
      <b>Ok/Hey Google,</b>
      --> <i>'activity/mode'</i> <b>activeren</b>
      --> <b>turn-on/off</b> <i>'switch/verlichting'</i>
      --> <i>'switch/verlichting'</i> <b>in-/uitschakelen</b>

  - type: custom:fold-entity-row
    head:
      type: section
      label: Set commands
    entities:
      - !include /config/lovelace/includes/include_alias_set_commands.yaml

  - type: custom:fold-entity-row
    head:
      type: section
      label: Switches
    entities:
      - !include /config/lovelace/includes/include_alias_switches.yaml

  - type: custom:fold-entity-row
    head:
      type: section
      label: Activities
    entities:
      - !include /config/lovelace/includes/include_alias_activities.yaml

  - type: custom:fold-entity-row
    head:
      type: section
      label: Lighting
    entities:
      - !include /config/lovelace/includes/include_alias_lighting.yaml

  - type: custom:fold-entity-row
    head:
      type: section
      label: Modes
    entities:
      - !include /config/lovelace/includes/include_alias_modes.yaml

update

ive made it work, by adding a connecting

  - type: entities
    entities:

between the top vertical-stack-in-card and the bottom stack of fold-entity-rows! Changing the bottom section to an entities list makes the section lines behave nicely, and stop them from overflowing the cards also!

now, the coloring only works for the nth card, and not for all. Would there be a * option to have it work on all fold-entity-rows?

hekm77 · December 3, 2019, 5:42pm

Use the element inspector in your browser.
You can find the right path to the element on the card.
For example

("#states > div > fold-entity-row").shadowRoot.querySelector("#head > entity-row-maker > hui-section-row").shadowRoot.querySelector("div.label")

Mariusthvdb · December 3, 2019, 8:13pm

no, the nth finds the correct fold-entity-row alright, but it only finds the one indicated. I would need to format all fold-entity-rows…

update

found it!

  - type: entities
    style:
      .: |
      "#states > div:nth-child(n+1) > fold-entity-row":
        $:
         "#head > entity-row-maker > hui-section-row":
           $: |
             div.divider {
               height: 0px;
             }
             div.label {
               font-weight: bold;
             }

does the trick.

read: :nth-child | CSS-Tricks - CSS-Tricks and test on :nth Tester

half way there thanks @hekm77 ! a lot

now how to style conditionally based on folded or collapsed. Is that at all an option?

glyn · December 7, 2019, 1:23pm

Someone please help me!

I have the following yaml which displays a fold-entity-row.

  - title: Test Card Mod
    cards:
      - type: entities
        entities:
          - type: custom:fold-entity-row
            head:
              type: section
              label: Test Card Mod
            entities:
              - light.lounge
              - light.dining

What I would like to do is change the font and color of the head label. I have read through all the threads and tried the examples given but I am unable to get anything to work. Any ideas would be gratefully accepted.

Thanks