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

[arganto]

@Ildar_Gabdullin

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:

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]

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

value = 0:
→ right

value = 1:
→ 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]

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

[arganto]

@arganto

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

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]

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]

@e-raser

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

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]

@arganto

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.

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]

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]

@arganto

If I switch 1:1 from vertical-stack-in-card to stack-in-card, 50% of my cards are not working anymore

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]

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:

1. I use exactly your code structure: 2 errors (styling is wrong for both states)
2. 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]

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

[e-raser]

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:

1. My mistake: the missing additional “.: |” line above the :host line
2. All condition checks must be identical (check on the same value)
3. 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]

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.

…where at the same time all other devices (iOS, Android - always running the HA Companion app) show them correctly:

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]

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

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.

[Ildar_Gabdullin]

@e-raser

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

    type: custom:badge-card
    badges:
      - entity: sensor.memory_free
      - entity: sensor.memory_free
        card_mod:
          style:
            ha-state-label-badge $ ha-label-badge $: |
              .badge-container .label-badge .value::after {
                content: "RAM: {{states(config.entity) | float(0) | round(0)}}";
                font-size: 7px;
              }
              .badge-container .label-badge .value {
                font-size: 0px;
              }

[e-raser]

Thank you. Sorry, I was not precisely enough - I was looking for changing this text (the unit, here it is MB):

[arganto]

@Mariusthvdb

Even the odd mod-card to get rid of the gaps in stack cards.

Then you didn’t get the problem. Anyhow, I’m happen now with my setup and I have optimized it, to not having any card-mod now needed for this case. Card mod has unfortunately the problem, that it is sometimes assigned too late and then I have the stuttering, etc. (In some browser, devices, situations) And in this special case it was not pretty, neither to remove gaps or to add them. As said, no improvements here needed.

[Ildar_Gabdullin]

@e-raser

I was looking for changing this text (the unit, here it is MB)

Replacing this may cause glitches (may give different results on different devices).
Seriously - sometimes it is better to create a template sensor.

  - entity: sensor.memory_free
    name: replaced unit
    card_mod:
      style:
        ha-state-label-badge $ ha-label-badge $: |
          .badge-container .label-badge .label span::after {
            content: "xxx";
            color: blue;
            letter-spacing: normal;
          }
          .badge-container .label-badge .label span {
            color: transparent;
            letter-spacing: -8px;
          }

[Mariusthvdb (Marius)]

maybe just to be clear what I meant there:

#type: custom:stack-in-card
#card_mod:
#  style: |
#    ha-card {
#      margin: -16px;
#      box-shadow: none;
#    }
#keep:
#  background: true
#cards:
type: custom:mod-card
card_mod:
  style: |
    ha-card {
      margin: -16px;
      box-shadow: none:
    }
    :host {
      --stack-card-margin: 0px;
    }
card:
  type: custom:hui-element
  card_type: vertical-stack
  cards:

and no further mods required. It tightly knits all enclosed cards together. No gaps. very clean.
if this be done cleaner, Id be interested for sure.

Ill have to lookup you card solution though, because its not easy to find the final card config you ended up with in all posts above…

note the margin and box-shadow here are only used because this card is included in an auto-entities card.

meaning, if you’d use this as a stand alone card, all modding of the core vertical-stack card would be the

    :host {
      --stack-card-margin: 0px;
    }