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

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.

e-raser · June 2, 2022, 8:40am

Where EXACTLY is the issue? I spend 1 hour of trying for things you are able to SHOW in 10 seconds. Please, use my code and mark which part needs to be shifted where to the left or the right. That would be great.

Ildar_Gabdullin · June 2, 2022, 9:01am

Who told you I have not tried it by myself??? I tested - I pointed you to the error clearly - you have not corrected it.
I am not very good in English, my native language is Russian - cannot express myself now; in short, change your attitude, please. I tried to help you, honestly).

The code:

        card_mod:
          style:
            ha-state-label-badge $:
              ha-label-badge $: |
                .badge-container .label-badge .value::after {
                }   
              .: |
                ha-label-badge ha-state-icon {
                }
            .: |
              :host {
              }

That was the error.
The “:host” part ONLY was misplaced. The “:host” is a root-level (do not know how to say it better) thing, so you need to put it on the 1st level.

Ildar_Gabdullin · June 2, 2022, 9:08am

I will check your long post a bit later.

Meanwhile - regarding the vertical-stack-in-card.
I got some issues with stack-in-card. For me, it seems that the card is not maintained any more.
But first I used the vertical-stack-in-card and then switched to the stack-in-card - because some people on the forum complained like “the card is not maintained any more” )))).
If you really advise to use the vertical-stack-in-card instead - I will start testing it.

arganto · June 2, 2022, 9:14am

Both of them have more or less the same number of open issues. The vertical-stack-in-card has a slightly newer update.

If I switch 1:1 from vertical-stack-in-card to stack-in-card, 50% of my cards are not working anymore. And I didn’t do special stuff. Esp. that nested stack didn’t work (anymore) and some popups and some button cards either, let me go back to vertical-stack-in-card as the preferred solution.

AFAIR Marius has excatly to opposite problems of this and moved to stack-in-card.

So it depends most probably and as always on the needs. But at least I have not a singe problem (till now) with vertical-stack-in-card.

Ildar_Gabdullin · June 2, 2022, 9:24am

All my issues with the stack-in-card may be treated by “card-mod”:
one
two
three
four
I use the stack-in-card inside a decluttering template ONLY. On this level I may apply a required card-mod style to fix a bug in the whole HA setup.

e-raser · June 2, 2022, 6:17pm

Ok Ildar, here comes the funny thing. And that’s what’s so frustrating: it’s a constant try and error (for hours) without success, for one single change. Sorry if I bothered you - I only want to make this finally work after two days and learn something while doing so.

So: There is a second “.: |” in your full code snippet (which I didn’t know/see before). I entered it. Now I have exactly the same code (or: code structure) as you.

Here’s a text comparison, 1:1:

left is your code from 🔹 Card-mod - Add css styles to any lovelace card - #3309 by Ildar_Gabdullin
right is mine as actually used
red sections are the differences (the actual content missing in your code structure of course)
indention is e-x-a-c-t-l-y the same

And that code (mine) still gives:

value = 0: → where’s the icon? that was a step backwards again *1
value = 1: → still buggy. Please go away you bad icon, please

So question #1: what does your badge look like with your code for states 0 and 1?

*1 So because of this, I change the code back to what I had before (more precisely: I remove the line “ .: |” before the “:host {” line), now we - again - have:

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

…which gives:

value = 0: → perfect!
value = 1: → again: still buggy. Please go away you bad icon, please

So to sum up:

I use exactly your code structure: 2 errors (styling is wrong for both states)
I use the same code without the “ .: |” on top of the “:host” line/section: 1 error remaining

I can not tell you what is wrong here. You are the styling guru expert, tell me
I really can’t.
I don’t know what else I can do.
I closely follow your instructions, use the same code and repeatingly get the wrong result.
Can it be a browser issue maybe?
Or a HA version mismatch (I’m on 2022.4.7)?

Ildar_Gabdullin · June 2, 2022, 6:33pm

Please contact me via PM, we’ll finalize this case

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

To everyone potentially interested: together we sorted this out and finally fixed it, everyone spotted things and alltogether formed a working solution (only minor, but very important changes). To sum things up:

My mistake: the missing additional “.: |” line above the :host line
All condition checks must be identical (check on the same value)
If it’s not a binary_sensor (or binary input_helper) but a sensor with various possible numbers, the if condition checks need to be adjusted.

This is working now:

      - 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 states(config.entity) | int(0) > 0 %}
                    content: "{{states(config.entity)}}";
                  {% endif %}
                }   
              .: |
                ha-label-badge ha-state-icon {
                  {% if states(config.entity) | int(0) > 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 %}
              }

Gosh this was a tricky one!
I learned a lot👨‍🎓
Big props to Ildar the of styling

e-raser · June 2, 2022, 9:30pm

Small note on this: there seems to be a browser issue. My Firefox on my (Windows) notebook randomly (okay, tbh most of the time, maybe 5 % of the time it is shown correctly) just shows the default icon (not the dynamic one), e. g.
grafik
…where at the same time all other devices (iOS, Android - always running the HA Companion app) show them correctly:
grafik

I have no idea if maybe some privacy addon of Firefox is blocking something or why it doesn’t work - but I’ll try to further investigate this so this will give a consistent user experience on all devices and browsers. Will report back if I tracked this down.

e-raser · June 4, 2022, 12:42pm

I try to change the actual label text (as provided by the entity, so not add a new but change the existing one).

Is that done in this section (not working)?

                .badge-container .label-badge {
                  border-radius: 20% !important;
                  content: "My label"; <-- this line has no effect
                }

I checked 🔹 Card-mod - Add css styles to any lovelace card - #1310 by Ildar_Gabdullin twice which is all about the look, but not the content.

Mariusthvdb · June 4, 2022, 1:24pm

I use core cards wherever possible. type: entities/grid/horizontal-stack/vertical-stack.

to embed any other card, I use the custom:hui-element as the custom card that makes all possible.
Ofc card_mod styling that allows me to do anything I need with those. Adjust card margins, delete grid gaps. Even the odd mod-card to get rid of the gaps in stack cards. Works perfectly.

If I cant make it with those, I rethink my wishes… There have been too many issues/incompatibility with the other cards.

#type: custom:state-switch
#entity: binary_sensor.meteoalarm_brabant
#states:
#  'on':
type: conditional
conditions:
  - entity: binary_sensor.meteoalarm_brabant
    state: 'on'
card:
  type: entities #custom:stack-in-card
#    keep:
#      background: true
#    cards:
  entities:
    - type: custom:hui-element
      card_type: markdown
      card_mod:
        style: |
          ha-card {
            margin: -16px;
            box-shadow: none;
         }

some indenting needs to be adjusted when uncommenting the other cards, but this is the idea. Use core when core is available and working correctly…

Not a single stack-in-card left.