🔹 Card-mod - Add css styles to any lovelace card

Ildar_Gabdullin · January 18, 2021, 8:07pm

Here is a problem which I have not solved so far.
I can change a style for some cards.
But cannot do it for cards inside 'custom:config-template-card'.
Let’s make a simple Entities card with 2 rows:

a row inside 'custom:config-template-card';
a usual row.

type: entities
title: config-template problem
entities:
  - type: 'custom:config-template-card'
    entities:
      - sun.sun
    row:
      entity: sun.sun
      style:
        hui-text-entity-row:
          $:
            hui-generic-entity-row: |
              .text-content {
                color: red;
              }
  - entity: sun.sun
    style: |
      :host .text-content {
        color: red;
      }

Note that for the 'custom:config-template-card' there are no variables & templates, it is just a simple example.

So, I cannot change a style for the 1st row.
Any help will be appreciated.

KTibow · January 18, 2021, 8:22pm

That’s because card-mod doesn’t work for custom cards. You could shadow-root into the row instead.

Ildar_Gabdullin · January 18, 2021, 8:26pm

But I used card-mod for multiple-entity-card (which is mainly a row, not a card).

Could you guide me how to do it?
In my example above I did “shadow-root”, I think…

KTibow · January 18, 2021, 8:27pm

Shadow-root from the card instead of the row.

Mariusthvdb · January 18, 2021, 10:20pm

yes, I now do believe you are right, must have been a 1 time glitch…

where are the times we could simply set a theme to a badge:

green_badge:
  label-badge-red: green
  label-badge-background-color: white
  label-badge-color: grey
  label-badge-text-color: green

Lovelace makes all of this so much more difficult

I need to combine:

  - entity: sensor.calltheboss_battery_level
    style:
      ha-state-label-badge:
        $:
          ha-label-badge:
            $:
              .badge-container: |
                .title {color: orange;}
                .value {color: grey;}
                .badge-container .label-badge .label span {color: red;}
          .: |
            ha-label-badge {
              --label-badge-red: green;
              --label-badge-background-color: yellow;
            }

with the coloring and dashing of the example in the docs:

            $: |
              .label-badge {
                border-style: dashed;
                border-color: red;
              }

but cant find the correct order of things… please have another go at it?
thanks

update

this works, now maybe compress the .badge-containers?

  - entity: sensor.calltheboss_battery_level
    style:
      ha-state-label-badge:
        $:
          ha-label-badge:
            $:
              .badge-container: |
                .title {color: orange;}
                .value {color: grey;}
                .badge-container .label-badge .label span {color: red;}
                .badge-container .label-badge {
                  border-style: dashed;
                  border-color: blue;
                 }

                .badge-container .label-badge .label span {
                  border-style: dotted;
                  border-color: pink;
                 }
          .: |
            ha-label-badge {
              --label-badge-red: green;
              --label-badge-background-color: yellow;
            }

Schermafbeelding 2021-01-19 om 10.11.06

bit further compressed:

    style:
      ha-state-label-badge:
        $:
          ha-label-badge:
            $:
              .badge-container: |
                .title {color: orange;}
                .value {color: grey;}

                .badge-container .label-badge {
                  border-style: dashed;
                  border-color: blue;
                 }

                .badge-container .label-badge .label span {
                  border-style: dotted;
                  border-color: pink;
                  color: red;
                 }
          .: |
            ha-label-badge {
              --label-badge-red: green;
              --label-badge-background-color: yellow;
            }

Ildar_Gabdullin · January 19, 2021, 11:12am

Styling a card inside ‘custom:config-template-card’:

1.Styling a row - there are 2 options:

Option 1 - styling must be done from the "config-template-card":

Stopped working - see the issue; was fixed later.

code

type: entities
title: config-template (row)
entities:
  - type: custom:config-template-card
    entities:
      - sun.sun
    row:
      entity: sun.sun
      name: from CTC level
    card_mod:
      style: |
        div#card {
          color: orange;
        }
  - type: custom:config-template-card
    entities:
      - sun.sun
    row:
      entity: sun.sun
      name: from CTC level (many shadowRoots)
    card_mod:
      style:
        div#card :first-child $:
          hui-generic-entity-row $: |
            state-badge {
              color: red;
            }
  - type: custom:config-template-card
    entities:
      - sun.sun
    row:
      entity: sun.sun
      name: from CTC level (:host)
    card_mod:
      style: |
        :host {
          color: orange !important;
        }

Option 2 - styling must be done from the "Entities card":

code

type: entities
title: config-template (row) (outside)
entities:
  - type: custom:config-template-card
    entities:
      - sun.sun
    row:
      entity: sun.sun
      name: config-template
  - type: custom:config-template-card
    entities:
      - sun.sun
    row:
      entity: sun.sun
      name: config-template
card_mod:
  style:
    config-template-card $:
      div#card :first-child $ hui-generic-entity-row $: |
        .text-content:not(.info) {
          color: orange;
        }

2.Styling a card - must be done from the card itself:

code

type: custom:config-template-card
entities:
  - sun.sun
card:
  type: entities
  title: config-template (card inside)
  card_mod:
    style: |
      .card-header {
        color: green;
      }
  entities:
    - entity: sun.sun
      card_mod:
        style: |
          :host {
            color: red;
          }

One more example:

code

type: custom:config-template-card
entities:
  - sun.sun
card:
  type: entities
  title: config-template (card inside)
  card_mod:
    style:
      hui-sensor-entity-row:
        $ hui-generic-entity-row $: |
          state-badge {
            color: cyan;
          }      
  entities:
    - entity: sensor.xiaomi_cg_1_pm25
    - entity: sensor.xiaomi_cg_1_co2

More examples are described here.

Ildar_Gabdullin · January 19, 2021, 11:14am

Magical !!)))

Also there is one more way to shorten the style - we can use "--label-badge-text-color" for icon & state.
Something like this:

      - entity: sensor.cleargrass_1_co2
        name: combined short 4 (+ 2 colors)
        style:
          ha-state-label-badge:
            $:
              ha-label-badge:
                $:
                  .badge-container: |
                    .title {color: orange;}
                    .badge-container .label-badge .label span {
                      color: blue;
                      border-style: dotted;
                      border-color: cyan;
                    }
                    .badge-container .label-badge {
                      border-style: dashed;
                      border-color: red;
                    }
              .: |
                ha-label-badge {
                  --label-badge-red: green;
                  --label-badge-background-color: yellow;
                  --label-badge-text-color: magenta;
                }

Mariusthvdb · January 19, 2021, 10:49pm

a yes, I had been trying that but couldnt find a valid spot for it… It’s a little less obvious, so we need to keep both these examples available somewhere.maybe set the color to grey, to have it stand out more from the border

Ildar_Gabdullin · January 20, 2021, 8:11am

You can put "--label-badge-text-color" inside “:host” if used alone without these “$:” and “.:” - at least I could not combine these two ways.

KTibow · January 20, 2021, 2:45pm

What were the two ways that worked on their own?

Ildar_Gabdullin · January 20, 2021, 3:33pm

Using “:host” - I can set these colors:

      - entity: sun.sun
        name: colored back
        style: |
          :host {
            color: red;
            --label-badge-background-color: yellow;
            --label-badge-text-color: green;
            --label-badge-red: magenta;
          }

But for other colors I need to use the hierarchy described above. And I cannot combine these two ways.

KTibow · January 20, 2021, 3:35pm

Put the :host stuff and whatever underneath the .: | part.

Ildar_Gabdullin · January 20, 2021, 4:20pm

Any example?
Or is it same as described above like here: 🔹 Card-mod - Add css styles to any lovelace card

KTibow · January 20, 2021, 8:36pm

First original:

style:
  xyz:
    $: |
      bla123

Second original:

style: |
  foo456

Combined:

style:
  xyz:
    $: |
      bla123
  .: |
    foo456

Ildar_Gabdullin · January 20, 2021, 10:01pm

OK, thank you)))

Then a new short version for Badge:

      - entity: sensor.cleargrass_1_co2
        name: combined short 5 (+ 2 colors)
        style:
          ha-state-label-badge:
            $:
              ha-label-badge:
                $: |
                  .badge-container .label-badge .label span {
                      color: blue;
                      border-style: dotted;
                      border-color: cyan;
                  }
                  .badge-container .label-badge {
                    border-style: dashed;
                    border-color: red;
                  }
          .: |
            :host {
              color: orange;
              --label-badge-text-color: magenta;
              --label-badge-red: green;
              --label-badge-background-color: yellow;
            }

lawi75 · January 25, 2021, 11:37am

Great Thx!!

/L

Mariusthvdb · January 25, 2021, 1:13pm

though nice we can now use the color variable names, I don’t feel this is as clear as in what one is doing. eg this seems more intuitive considering the layout of the badge (a circle on top, the actual badge, than an attached .label, and below that we set the style for the name, and below config represents that better imho:

    style:
      ha-state-label-badge:
        $:
          ha-label-badge:
            $: |
              .badge-container .label-badge {
                border-style: dashed;
                border-color: blue;
                color: grey;
                background-color: yellow;
               }

              .badge-container .label-badge .label span {
                border-style: dotted;
                border-color: pink;
                color: red;
                background-color: green;
               }
          .: |
            :host {
              color: orange;
            }

in fact, this might even be better yet:

    style:
      ha-state-label-badge:
        $:
          ha-label-badge:
            $: |
              .badge-container .label-badge {
                border-style: dashed;
                border-color: blue;
                color: grey;
                background-color: yellow;
               }

              .badge-container .label-badge .label span {
                border-style: dotted;
                border-color: pink;
                color: red;
                background-color: green;
               }
 
              .badge-container .title {
                color: orange;
              }

and seeing the last version here, makes me wonder if we couldn’t level up the .badge-container?

apparently yes:

    style:
      ha-state-label-badge:
        $:
          ha-label-badge:
            $: |
              .badge-container
                /* Top circle of the Badge (State) */
                .label-badge {
                  border-style: dashed;
                  border-color: blue;
                  color: grey;
                  background-color: yellow;
                }
                /* Label of the Badge (Unit) */
                .label-badge .label span {
                   border-style: dotted;
                   border-color: pink;
                   color: red;
                   background-color: green;
                 }
                /* Below the Badge (Name) */
                .title {
                   color: orange;
                }

Schermafbeelding 2021-01-25 om 15.45.16

KTibow · January 25, 2021, 2:32pm

You could use comments as well. In the format /* Color circle */.

Mariusthvdb · January 25, 2021, 2:36pm

yes, that’s a great idea, edited the final styling above this one.

splinter · January 26, 2021, 12:42pm

In the following entity is it possible to enlarge the font only of the state? (in this case the temperature)

type: entities
entities:
  - entity: sensor.snzb_02_corridoio_temperature
    name: Room

Lovelace