🔹 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

I got your point, thank you!

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:

github.com/thomasloven/lovelace-card-mod

Styling of rows with custom types stopped working

opened 03:01PM - 24 Oct 21 UTC

ildar170975

My Home Assistant version: 2020.10.6 My lovelace configuration method (GUI or… yaml): GUI, yaml What I am doing: Trying to apply a style to a row (Entities card) with: - `config-template-card` - `restriction-card` - `fold-entity-row`. What I expected to happen: Styles are applied. Earlier it worked: - for `config-template-card`- https://community.home-assistant.io/t/card-mod-add-css-styles-to-any-lovelace-card/120744/1328 - for `restriction-card` - no example - for `fold-entity-row` - https://community.home-assistant.io/t/card-mod-add-css-styles-to-any-lovelace-card/120744/1192 What happened instead: No styles applied. **Minimal** steps to reproduce - for `config-template-card`: ``` type: entities title: config-template (row) entities: - type: custom:config-template-card entities: - sun.sun row: entity: sun.sun name: config-template style: | :host { color: green; } - type: custom:config-template-card entities: - sun.sun row: entity: sun.sun name: config-template style: hui-text-entity-row: $: | hui-generic-entity-row .text-content { color: orange; } ``` ![image](https://user-images.githubusercontent.com/71872483/138599848-5a4fbecf-ecaa-4468-85a5-9bfaf8ead6bf.png) Error messages from the browser console: none --- **By putting an X in the boxes ([]) below, I indicate that I:** - [x] Understand that this is a channel for reporting bugs, not a support forum (https://community.home-assistant.io/). - [x] Have made sure I am using the latest version of the plugin. - [x] Have followed the troubleshooting steps of the "Common Problems" section of https://github.com/thomasloven/hass-config/wiki/Lovelace-Plugins. - [x] Understand that leaving one or more boxes unticked or failure to follow the template above may increase the time required to handle my bug-report, or cause it to be closed without further action.

type: entities
title: config-template (row outside)
entities:
  - type: 'custom:config-template-card'
    entities:
      - sun.sun
    row:
      entity: sun.sun
      name: config-template
    style: |
      :host {
        color: green;
      }
  - type: 'custom:config-template-card'
    entities:
      - sun.sun
    row:
      entity: sun.sun
      name: config-template
    style:
      hui-text-entity-row:
        $: |
          hui-generic-entity-row .text-content {
            color: orange;
          }

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

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:
      $:
        hui-text-entity-row:
          $:
            hui-generic-entity-row:
              $: |
                .text-content:not(.info) {
                  color: orange;
                }

Tried to style from the row itself - with no success.

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

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

One more example:

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.cleargrass_1_pm25
    - entity: sensor.cleargrass_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