Card-mod: How to hide sub-element in a ha-card?

[wassini (Lars Bo Wassini)]

I’m trying to modify a logbook card to hide the date header, but I can seem to figure out how to do this using the card-mod.

This is (part of) my configuration:

 - type: logbook
    entities:
      - binary_sensor.door_bedroom_opening
    hours_to_show: 200
    card_mod:
      style: |
        ha-card {
          max-height: 120px;
          overflow: hidden;
        } 
        .date {
           background-color: pink;
        }

No matter if I use “.date” or “h4” or “h4.date” - it seems that I cannot target the date block.

Thanks in advance…

[Mariusthvdb (Marius)]

did you search this community?

there’s a huge post on card_mod, and you’ll probably find your answer in Ildars post

hiding is done with:

            .entry-container h4.date {
              display: none;
            }

Ill leave it to you to find the correct path

btw, if you don’t want the date being logged, maybe this card is not the best option…especially since you log for 200 hours and days are an important subdivision for clarity ?

[wassini (Lars Bo Wassini)]

@Mariusthvdb

.entry-container h4.date {
              display: none;
            }

Yes - I spent quite some time reading through the thread, but still haven’t found anything that is working.

The only thing I can get working when adding an additional section is
ha-logbook
without any children. Adding anything else just makes it not work.

I think I have tried with endless combinations without success. None of these finds anything.

ha-logbook-renderer
.date
h4.date
.entry-container
.entry-container h4
div h4
div h4.date
div.container
div.container h4
ha-logbook h4.date
ha-logbook div

[Mariusthvdb (Marius)]

just copy what Ildar does in that specific post, it works perfectly

this is his example:

card_mod:
  style:
    .content ha-logbook $ ha-logbook-renderer $: |
      .entry-container .entry state-badge {
        border-radius: 0px;
      }
      .entry-container .entry .message-relative_time .message {
        color: red;
      }
      .entry-container .entry .message-relative_time .secondary {
        color: cyan;
      }
      .entry-container .entry {
        --divider-color: orange;
      }
      .entry-container h4.date {
        color: magenta;
      }

Add that and see what it does.
see the bottom color: magenta ?

next, replace that with what I suggested above, and you’re set

ofc, leave out all of the other .entry-container lines if you dont want them

[wassini (Lars Bo Wassini)]

Yes - this is partly working, but now I’m not able to add the ha-card setting:

ha-card {
  max-height: 120px;
  overflow: hidden;
}

I simply do not understand how the path is found and what the pipe-thing (|) does.

[wassini (Lars Bo Wassini)]

@Mariusthvdb

btw, if you don’t want the date being logged, maybe this card is not the best option…especially since you log for 200 hours and days are an important subdivision for clarity ?

I want it to show the last log entry only - no matter how far back in time is was logged.
The date and time is already part of the text in the container.

[Mariusthvdb (Marius)]

@wassini

Yes - this is partly working, but now I’m not able to add the ha-card setting:

@Mariusthvdb

card_mod:
  style:
    .content ha-logbook $ ha-logbook-renderer $: |
      .entry-container h4.date {
        color: magenta;
      }

this is the mod by Ildar. now replace the color: magenta with display: none.

@wassini

I simply do not understand how the path is found

you should checkout the huge thread on card_mod, where all of that is explained in detail. Use Inspector in your browser window to reveal the elements, and check what the card-mod repo says about traversing the Dom

@wassini

what the pipe-thing (|) does.

the pipe thing is a multi line indicator, and makes all that goes below it seems as a single string. see

YAML Multiline Strings