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

[KTibow (Kendell R)]

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

[Ildar_Gabdullin]

@KTibow

That’s because card-mod doesn’t work for custom cards.

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

@KTibow

You could shadow-root into the row instead.

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

[KTibow (Kendell R)]

Shadow-root from the card instead of the row.

[Mariusthvdb (Marius)]

@Ildar_Gabdullin

badge-container

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;
            }

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]

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]

@Mariusthvdb

bit further compressed:

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 (Marius)]

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]

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 (Kendell R)]

@Ildar_Gabdullin

I could not combine these two ways

What were the two ways that worked on their own?

[Ildar_Gabdullin]

@KTibow

What were the two ways

1. 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;
          }        

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

[KTibow (Kendell R)]

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

[Ildar_Gabdullin]

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

[KTibow (Kendell R)]

First original:

style:
  xyz:
    $: |
      bla123

Second original:

style: |
  foo456

Combined:

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

[Ildar_Gabdullin]

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 (Lars Wiklund)]

Great Thx!!

/L

[Mariusthvdb (Marius)]

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;
                }

[KTibow (Kendell R)]

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

[Mariusthvdb (Marius)]

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

[splinter]

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 

[Ildar_Gabdullin]

@splinter

to enlarge the font only of the state

Use search next time please)

Card-mod - Add css styles to any lovelace card

How to change a font-size for Entities card: [image] type: entities title: Size for title card_mod: style: | ha-card .card-header { font-size: 35px; color: red; } entities: - entity: sun.sun name: Standard size secondary_info: last-changed - entity: sun.sun name: Size for whole row secondary_info: last-changed card_mod: style: | :host { font-size: 25px; color: red; } - entity: sun.sun name: Size for …