šŸ”¹ Card-mod - Add css styles to any lovelace card

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.

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

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ā€¦

Shadow-root from the card instead of the row.

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

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":
image
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":
image

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.

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

1 Like

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 :wink:

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

What were the two ways that worked on their own?

  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;
          }        
  1. But for other colors I need to use the hierarchy described above. And I cannot combine these two ways.

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

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

First original:

style:
  xyz:
    $: |
      bla123

Second original:

style: |
  foo456

Combined:

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

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

Great :slight_smile: Thx!!

/L

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

:wink:

Schermafbeelding 2021-01-25 om 15.45.16

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

yes, thatā€™s a great idea, edited the final styling above this one.

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