Styling Logbook Entries

[elwoodhouse]

Hi,

I think styling elements that have multiple nested shadow-roots that are not ready when the page loads is not supported, but I wanted to check.

I would like to style the individual entries in a logbook card, so in the card yaml I've added:

card_mod:
  style:
    ha-logbook$ha-logbook-renderer$: |
      .entry {
        background-color: var(--chip-background-color);
      }

The entries are not styled on the initial render of the dashboard and I think this is because of what NOTE 2 in the DOM navigate states, as the entries take a bit of time to draw. Eventually, after a while, they do style with the above rule.

I've tried using the multiple step navigation into the shadow-root like:

ha-logbook:
  $: |
    ha-logbook-renderer:
      $: |
        .entry {
          background-color: var(--chip-background-color);
        }

but that doesn't seem to find the right class. I've also tried with different combinations of | at the end of the lines.

Is what I'm trying to do possible on the initial render of the dashboard?

Thanks, and thanks for the module in general, once you get the hang of it, it's quite useful. Leon.

[ildar170975]

Check if this can help you.

[elwoodhouse]

Thanks for the pointer. I've looked at your example and replicated it, but with:

card_mod:
  style:
    .content ha-logbook $ ha-logbook-renderer $: |
      .entry-container .entry {
        background-color: var(--chip-background-color);
      }

I'm still getting the same behavior that the initial render doesn't apply the style, but on the second render (after interacting with the dashboard), the style is applied.

I'm not sure why I would be getting a different behavior to your border-radius example, it seems like we're styling the same area. My core version is 2022.12.8, card-mod 3.2.0 and I'm running HA through a windows VM. Would any of those details make a difference?

[ildar170975]

Have you tried a js solution described in that post?

[elwoodhouse]

No, I'm guessing that will work but if this is the only thing I can't style with card-mod, I would rather not worry about it. Introducing another spot to do CSS mods isn't worth it for this alone, but I will keep it in mind if there is more that I can't do with card-mod.

Thanks for the help though, you've increased my understanding of the selector syntax and the performance of the module.

[ildar170975]

Card-mod may be used to style Logbook card. The js solution is basically to style Logbook page.

type: logbook
entities:
  - sensor.testing_logbook_sensor_with_image
hours_to_show: 24
card_mod:
  style:
    .content ha-logbook $ ha-logbook-renderer $: |
      .entry-container .entry {
        background-color: lightgreen;
      }

[elwoodhouse]

My behavior is:

type: logbook
entities:
  - input_boolean.light_central_light
title: LOGBOOK
hours_to_show: 24
card_mod:
  style:
    .content ha-logbook $ ha-logbook-renderer $: |
      .entry-container .entry {
        background-color: lightgreen;
      }

Initial render:

Second render after interaction:

[ildar170975]

In my setup, refreshing a page usually shows applied styles after less than a second. But sometimes it happens after 3-10 seconds. As for square images (see my example) - they are square immediately w/o any transition, most probably it happens because a square state-badge defined in js-script.

A few months ago there were some changes in the Logbook card; earlier Logbook was filled much faster than now, styles were applied immediately; after these changes (at least in my setup) the Logbook became slow and styles may be applied with some delay. Using js-script allows to style elements on a “deeper level”.