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

arganto · June 1, 2022, 3:42pm

Thanks. I’ll try this. And everything “only”, because of the margins of invisible conditional content (your and my issue in issue list).

arganto · June 1, 2022, 3:58pm

No custom:layout-break is not helping. What a pity.

Until someone has further ideas (or at least some ideas about the “why”, I make it via themes

  card-mod-view-yaml: |
    hui-masonry-view $ div#columns div.column hui-vertical-stack-card $: |
      #root hui-conditional-card:nth-child(2) {
        {% if (states("binary_sensor.ui_alert") == "off") %}
          margin-top: 0px;
        {% endif %}
      }

Ildar_Gabdullin · June 1, 2022, 3:58pm

I got rid of these conditional rows/cards because of that margin)))
Replaced by card_mod or state-switch card.

Ildar_Gabdullin · June 1, 2022, 3:59pm

Give me a minimized code for the problem.

arganto · June 1, 2022, 4:07pm

type: vertical-stack
cards:
  - type: conditional
    conditions:
      - entity: binary_sensor.ui_alert
        state: 'on'
    card:
      type: custom:vertical-stack-in-card
      horizontal: true
      cards:
        - type: conditional
          conditions:
            - entity: input_boolean.alert_xxx
              state: 'on'
          card:
            type: custom:button-card
            [...]
        - type: conditional
          conditions:
            - entity: input_boolean.alert_xxx_fallig
              state: 'on'
          card:
            type: custom:button-card
            [...]
        [etc]
  - type: conditional
    conditions:
      - entity: binary_sensor.dwd_wetterwarnung_aktiv
        state: 'on'
    card:
      type: custom:vertical-stack-in-card
      cards:
        - type: custom:button-card
          [...]
        - type: markdown
          [...]
  - type: weather-forecast

So three “sections” A, B and C. If A and B are hidden, C has a top-margin which is not wanted. As it is a weather card, I can mod it. If Only A is hidden, B has an unwanted top-marging as well, but this is a conditional-card, which I cannot mod. And with mod-card the problem above.

But the one with theme hacking is working indeed as work-around.

Ildar_Gabdullin · June 1, 2022, 5:50pm

@arganto
Check this:

title: test-test-0
path: test-test-0
badges: []
# type: custom:horizontal-layout
cards:

  - type: entities
    entities:
      - entity: input_boolean.test_boolean
      - entity: input_boolean.test_boolean_2
      - entity: input_boolean.test_boolean_3
      - entity: input_boolean.test_boolean_4

  - type: button
    entity: sun.sun
    name: button before the stack

  - type: custom:mod-card
    card_mod:
      style:
        hui-vertical-stack-card $: |
          div#root :nth-child(2) {
            {% if is_state("input_boolean.test_boolean","off") %}
              margin-top: 0px;
            {% endif %}
          }
          div#root :nth-child(3) {
            {% if is_state("input_boolean.test_boolean_4","off") %}
              margin-top: 0px;
            {% endif %}
          }
    card:
      type: vertical-stack
      cards:
        - type: conditional
          conditions:
            - entity: input_boolean.test_boolean
              state: 'on'
          card:
            type: custom:stack-in-card
            title: "test_boolean = ON"
            mode: horizontal
            cards:
              - type: conditional
                conditions:
                  - entity: input_boolean.test_boolean_2
                    state: 'on'
                card:
                  type: custom:button-card
                  entity: person.ildar
                  name: "test_boolean_2 = ON"

              - type: conditional
                conditions:
                  - entity: input_boolean.test_boolean_3
                    state: 'on'
                card:
                  type: custom:button-card
                  entity: zone.home
                  name: "test_boolean_3 = ON"

        - type: conditional
          conditions:
            - entity: input_boolean.test_boolean_4
              state: 'on'
          card:
            type: custom:stack-in-card
            title: "test_boolean_4 = ON"
            cards:
              - type: custom:button-card
                entity: sun.sun
              - type: markdown
                content: aaaaaaa

        - type: weather-forecast
          entity: weather.home_met

  - type: button
    entity: sun.sun
    name: button after the stack

Replaced vertical-stack-in-card with stack-in-card (not using the 1st).
Margins for any cards in stack may be changed from the outer stack’s level (like it was proposed in your card-mod-theme example).
Note the div#root :nth-child(....) using.
Top margins are fixed by card-mod, top cards are horizontally aligned.

Regarding the “cards sticking together” problem.
It presents.
Here the vertical-stack is surrounded by “picture” cards - the stack is sticked to the next card:

If mod-card is removed - no sticking:

How to fix - use layout-card:

title: test-test-0
path: test-test-0
badges: []
type: custom:vertical-layout
cards:
   ...

  - type: custom:layout-break
  
  - type: custom:mod-card
    ....

  - type: custom:layout-break

  ...

e-raser · June 1, 2022, 7:07pm

Perfect. I first thought for this I would need to install https://github.com/thomasloven/lovelace-badge-card first (which I didn’t know it exists before). In the end, using your snippet…

          .badge-container .label-badge .value::after {
            content: "my UoM";
            background-color: var(--ha-label-badge-color, var(--primary-color));
            color: var(--ha-label-badge-label-color, white);
            border-radius: 1em;
            padding: 9% 16% 8%;
            font-weight: 500;
            overflow: hidden;
            position: absolute;
            bottom: -1em;
            left: -0.2em;
            right: -0.2em;
            line-height: 1.05em;
            font-size: 0.5em;
          }

…also works without having https://github.com/thomasloven/lovelace-badge-card installed. But good to know it’s possible to place badges everywhere. So thank you twice (for a factory solution with card-mod and for indirectly pointing me to another of Thomas’ great pieces of software)

Ildar_Gabdullin · June 1, 2022, 7:58pm

But I must advise once again:

e-raser · June 1, 2022, 8:05pm

I can not make this work. I think it’s because your setup is having troubles together with the :host part I use.

Please see my code: So currently

      - entity: sensor.problems_any
        name: Probleme
        icon: mdi:check-circle
        style:
          ha-state-label-badge:
            $:
              ha-label-badge:
                $: |
                  .badge-container .label-badge {
                    border-radius: 20% !important;
                  }
                  .badge-container .label-badge .value::after {
                   {% if is_state('sensor.problems_any','1') %}
                     content: "{{states(config.entity)}}";
                   {% endif %}
                  }  
          .: |
            ha-label-badge ha-state-icon {
              {% if is_state('sensor.problems_any','0') %}
                display: none;
              {% endif %}
            }
            :host {
              {% if states(config.entity) | int(0) == 0 -%}
              --label-badge-text-color: green;
              --label-badge-red: green;
              {% else %}
              color: red;
              --label-badge-text-color: red;
              --label-badge-red: red;
              --label-badge-background-color: yellow;
              {% endif %}
            }

gives

when sensor value is 0 ==> exactly what I want, perfect!
when sensor value is 1 ==> here I still have the icon shown together with the value. How to get rid of the icon?

e-raser · June 1, 2022, 8:08pm

I got you. But there are sensors which don’t have (and can’t have) one, e. g. “zone.home”.
So by simply using your styling I am able to write “persons” on the label badge. Perfect

Ildar_Gabdullin · June 1, 2022, 8:14pm

Compare my original code and yours - wrong indentation.

e-raser · June 1, 2022, 8:32pm

I fixed it. But now this…

      - entity: sensor.problems_any
        name: Probleme
        icon: mdi:check-circle
        style:
          ha-state-label-badge:
            $:
              ha-label-badge:
                $: |
                  .badge-container .label-badge {
                    border-radius: 20% !important;
                  }
                  .badge-container .label-badge .value::after {
                   {% if is_state('sensor.problems_any','1') %}
                     content: "{{states(config.entity)}}";
                   {% endif %}
                  }  
              .: |
                ha-label-badge ha-state-icon {
                  {% if is_state('sensor.problems_any','0') %}
                    display: none;
                  {% endif %}
                }
                :host {
                  {% if states(config.entity) | int(0) == 0 -%}
                  --label-badge-text-color: green;
                  --label-badge-red: green;
                  {% else %}
                  color: red;
                  --label-badge-text-color: red;
                  --label-badge-red: red;
                  --label-badge-background-color: yellow;
                  {% endif %}
                }

…shows:

when value is 0 (error: icon missing)
when value is 1 (error: icon shown)

So: it got even worse.

Ildar_Gabdullin · June 1, 2022, 8:37pm

No, wrong.
Copy/paste my code and then ADD yours.

e-raser · June 1, 2022, 8:44pm

I did! A second time. Step by step. Same result, believe me.
I would be thankful if you could take what I added to show me it works.

grafik

Last version (copy / pasted yours, added my stuff):

      - entity: sensor.problems_any
        name: Probleme
        icon: mdi:check-circle
        card_mod:
          style:
            ha-state-label-badge $:
              ha-label-badge $: |
                .badge-container .label-badge {
                  border-radius: 20% !important;
                }
                .badge-container .label-badge .value::after {
                  {% if is_state('sensor.problems_any','1') %}
                    content: "{{states(config.entity)}}";
                  {% endif %}
                }   
              .: |
                ha-label-badge ha-state-icon {
                  {% if is_state('sensor.problems_any','0') %}
                    display: none;
                  {% endif %}
                }
                :host {
                  {% if states(config.entity) | int(0) == 0 -%}
                  --label-badge-text-color: green;
                  --label-badge-red: green;
                  {% else %}
                  color: red;
                  --label-badge-text-color: red;
                  --label-badge-red: red;
                  --label-badge-background-color: yellow;
                  {% endif %}
                }

Ildar_Gabdullin · June 1, 2022, 9:01pm

Wrong indentation for the :host:

            .: |
              :host {

The “.:” must be with the same indent as your 1st selector

stefdewilde · June 2, 2022, 5:08am

With the 3.1.5 update my card doesn’t work properly anymore. So when the light is on in a room it changes the icon color. I see that there is a fix for the icon colors, but it’s not really clear what or what I should change. Any help or tips?

type: custom:button-card
template: kamer_info
icon: mdi:baby-carriage-off
color: rgb(0, 51, 153)
name: Kinderkamer
variables:
  climate_entity: climate.kinderkamer
tap_action:
  action: navigate
  navigation_path: /lovelace-mobile/kinderkamer-mob
card_mod:
  style: |
    :host {
      --card-mod-icon-color: 
          {% if is_state('light.kinderkamer1', 'on') %}
             rgb(255,190,0)
          {% elif is_state('light.kinderkamer2', 'on') %}
             rgb(255,190,0)
          {% elif is_state('light.nachtlicht_kinderkamer', 'on') %}
             rgb(255,190,0)
          {% else %}
             rgb(0, 51, 153)
          {% endif %}
          }

arganto · June 2, 2022, 6:53am

Thanks for your effort. The problem with the margins were not the problem. I did it more ore less 1:1 before. The problem was “only” the sticking when using mod-card to get rid of the first margin. And as this is present here as well and I don’t want to switch to an custom-layout card (did it with horizontal (with assigned comlumn, etc.) already before, but I don’t like, that it is not loading in a streaming way card by card but load everything first and show clack/background until it then appears.

  card-mod-view-yaml: |
    hui-masonry-view $ div#columns div.column hui-vertical-stack-card $: |
      #root hui-conditional-card:nth-child(2) {
        {% if (states("binary_sensor.ui_alert") == "off") %}
          margin-top: 0px;
        {% endif %}
      }

This one was the clue … if you only have one dashboard. Later I saw, that if you go to another dashboard and back, etc. this mod get’s lost and will not be re-apllied. For whatever reason. So, no real solution, but interesting to know.

And then I though. Why not having a vartical stack as the build in, but with an ha-card (really a pitty, that so many helper-cards in HA are build different than all other cards). Like vertical-stack-in-card or stack-in-card. But tweek it that way, that it looks like tthe build in card, that means re-assign the backgrounds, etc.

This is possible with both cards, bat faster (and with less custom modding) with stack-in-card, because of the keep-objekt. Et voila:

type: custom:stack-in-card
card_mod:
  style:
    hui-vertical-stack-card$: |
      div#root { background-color: red; }
keep:
  background: true
  margin: true
  outer_padding: false
  border_radius: true
  box_shadow: true
cards:

No sticking. Behavior like in standard card. Order of cards same. Most probably only until I will see or find another problem with this approach, but it looks promising. And with that I can mod the margins as I want.

BTW Ma assumption, why they stick together is, that the mod-card is calculated by HA as 0px height and therefor more or less not existent for the masonry positioning of the cards. So calculation of the break to the next column will start with the next card. Something like that I think.

e-raser · June 2, 2022, 7:33am

Fixed this. So I’m back from two bugs to one:

value = 0:
grafik → right

value = 1:
grafik → WRONG!

For the 3rd time: how to get rid of the icon when value = 1?

Maybe you want to just try it on your own? All the theoretical looking & directing “without touching” is not very effective

      - entity: sensor.problems_any
        name: Probleme
        icon: mdi:check-circle
        card_mod:
          style:
            ha-state-label-badge $:
              ha-label-badge $: |
                .badge-container .label-badge {
                  border-radius: 20% !important;
                }
                .badge-container .label-badge .value::after {
                  {% if is_state('sensor.problems_any','1') %}
                    content: "{{states(config.entity)}}";
                  {% endif %}
                }   
            .: |
              ha-label-badge ha-state-icon {
                {% if is_state('sensor.problems_any','0') %}
                  display: none;
                {% endif %}
              }
              :host {
                {% if states(config.entity) | int(0) == 0 -%}
                --label-badge-text-color: green;
                --label-badge-red: green;
                {% else %}
                color: red;
                --label-badge-text-color: red;
                --label-badge-red: red;
                --label-badge-background-color: yellow;
                {% endif %}
              }

Ildar_Gabdullin · June 2, 2022, 8:17am

I have already tested it and pointed to the problem with indentation for :host.
You did not corrected it.

arganto · June 2, 2022, 8:20am

For the sake of completes: I switched to vertical-stack-in-card and removed stack-in-card as well completely, because this would be one of the few places for the stack-in-card and I prefer to have only one of these types.

type: custom:vertical-stack-in-card
card_mod:
  style:
    .: |
      ha-card { background-color: red; }
    div hui-entities-card:nth-child(2) $: |
      ha-card {
        margin-top: 4px;
      }
styles:
  border-radius: var(--ha-card-border-radius, 4px)
  box-shadow: >-
    var( --ha-card-box-shadow, 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px
    0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12) )

Reason: The vertical-stack-in-card has fewer problems with stacks inside stacks (a popup with this construction is not working), some button cards were not displayed, etc. etc.