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

[Ildar_Gabdullin]

Your code is not properly formatted to be analysed.

[tc23]

Sorry. I had it as block code. I adjusted.

[Ildar_Gabdullin]

@tc23

color: {% if states('input_text.living_area_helper') | float > 0 %} gold {% endif %};

Btw, you keep posting this. As I told you - it causes errors.

@tc23

- content: >
                        There {% if is_s

I do not see any “h1” text here.

Also, regarding your construction:

                      style:
                        .: |
                          ha-card {
                          }
                        ha-markdown:
                          $: |
                            h1 {
                            }

I do not think it is right.
Check these examples:

type: vertical-stack
cards:
  - type: markdown
    content: |
      # ha-markdown $
    card_mod:
      style:
        ha-markdown $: |
          h1 {
            font-size: 10px;
          }
        .: |
          ha-card {
            background-color: red;
          }
  - type: markdown
    content: |
      # ha-markdown:
      # $:
    card_mod:
      style:
        ha-markdown:
          $: |
            h1 {
              font-size: 10px;
            }
        .: |
          ha-card {
            background-color: red;
          }
  - type: markdown
    content: |
      # ha-markdown $
    card_mod:
      style:
        .: |
          ha-card {
            background-color: red;
          }
        ha-markdown $: |
          h1 {
            font-size: 10px;
          }
  - type: markdown
    content: |
      # ha-markdown:
      # $:
    card_mod:
      style:
        .: |
          ha-card {
            background-color: red;
          }
        ha-markdown:
          $: |
            h1 {
              font-size: 10px;
            }

[tc23]

Thank you. I will review and try and modify per your example. Also, I didn’t update the code, because I wanted to keep the base case, so that’s why you kept seeing the aforementioned error. But thank you for the patience and help and I will try and work through based on your example

[Minsk11]

Hi everyone,

I’m trying to increase the size of my state badge in my glance card using card-mod.

I’m filtering the entities using the entity-filter. I’m trying to target the selector for the state-badge, but i’ve been unsuccessful. Any help would be much appreciated! Please see my code and screenshots below.

- type: entity-filter
  entities:
    - device_tracker.car1
    - device_tracker.car2
  state_filter:
    - home
  card:
    type: glance
    title: Cars at Home
    card_mod:
      style: |
        state-badge.entity.entities {
            height: 100px;
            width: 100px;
            }
  view_layout:
    grid-area: cars

[reste_narquois (Chris Warne)]

This works for me in a standard glance card, so it should hopefully work within an entity-filter card as well:

- type: entity-filter
  entities:
    - device_tracker.car1
    - device_tracker.car2
  state_filter:
    - home
  card:
    type: glance
    title: Cars at Home
    card_mod:
      style:
        div.entity:
          $: |
            state-badge {
              height: 100px;
              width: 100px;
            }

[Minsk11]

Thanks for the reply. I tried this but it didn’t work. I also tried it on a glance card without an entity filter, but that also was unsuccessful. Please see my code below without the entity filter. Would you be able to share your working code for the glance card?

- type: glance
  title: Cars at Home
  entities:
    - device_tracker.car1
    - device_tracker.car2
  card_mod:
    div.entity:
      $: |
        state-badge {
          height: 100px;
          width: 100px;
        }

[reste_narquois (Chris Warne)]

Not sure I can add much here, but here’s the code that works for me on a normal glance card:

type: glance
card_mod:
  style:
    div.entity:
      $: |
        state-badge {
          height: 100px;
          width: 100px;
        }
entities:
  - entity: <etc>

You’ve left out the style keyword in the version you posted - I’ve tried your code with it added in, and it works for me.

[Minsk11]

Thank you, I missed the style on your first reply! It works great now.

[Ildar_Gabdullin]

1st post → link at the bottom → styles for glance

type: glance
entities:
  - entity: sensor.cleargrass_1_co2
  - entity: sensor.cleargrass_1_co2
card_mod:
  style: |
    ha-card {
      --mdc-icon-size: 60px;
    }

or

type: glance
entities:
  - entity: sensor.cleargrass_1_co2
    card_mod:
      style: |
        :host {
          --mdc-icon-size: 60px;
        }
  - entity: sensor.cleargrass_1_co2

[reste_narquois (Chris Warne)]

Assuming you are replying to Minsk11, the problem with that solution is that they appear not to be using Material Design icons for their car entities in this case.

I’ve tried your code, and it doesn’t work for me when the entity has been customized to display an entity_picture instead of an icon.

[Ildar_Gabdullin]

@reste_narquois

ntity has been customized to display an entity_picture instead of an icon.

Good point, using --mdc-icon-size is for MDI icon only.

[Ildar_Gabdullin]

@arganto
Sorry for a delay, finally came back to your issue.

Initially you told about a “margin-top for a conditional card” problem.
As we discussed, it may be solved in 2 ways:

1. Placing the conditional card into a vertical-stack, placing the whole stack into a mod-card, adding a card-mod style to remove margin-top.
   Cons: next card after the “mod-card”-ed card sticks to this card (this may be solved by layout-break - but some people do not want to use it in some cases).

2. Using a stack card WITH a ha-card element like stack-in-card which may be customized to be looking like a conventional vertical-stack - then you do not need a mod-card and then no “sticking cards” problem (as you observed).

3. Using a card-mod-theme (your example).
   Cons:
   – you have to specify all possible conditional cards (as well as their conditions) in the theme;
   – the style may be “lost” (as you observed).

Now I again will suggest to use some kind of “stack” card (stack-in-card, vertical-stack-in-card etc) to build dashboard views.
Pros:
– you can simulate the conventional vertical-stack card (with margins between cards) with required card-mod styles;
– no “sticking cards” problem;
– different cards (entities, logbooks, graphs etc) may be “merged” together w/o margins & borders.

The best way to achieve it - create a decluttering card based on that “stack” card, specify all needed card-mod styles on the template’s level and then activate required styles by using input variables.
Pros: no need to specify a card-mod style for every card, everything is implemented inside the decluttering template.

As for this:

@arganto

why they stick together is, that the mod-card is calculated by HA as 0px height

Please check this issue for the config-template-card - it has a similar problem with sticking.
Like the mod-card, the config-template-card is supposed to be a “wrapping” for another card too.
Then your hypothesis seems to be right.

[arganto]

Thanks for the summery of 1-3 above. I can confirm all of them

@Ildar_Gabdullin

Now I again will suggest to use some kind of “stack” card (stack-in-card, vertical-stack-in-card etc) to build dashboard views.
Pros:
– you can simulate the conventional vertical-stack card (with margins between cards) with required card-mod styles;
– no “sticking cards” problem;
– different cards (entities, logbooks, graphs etc) may be “merged” together w/o margins & borders.

This is what I did alread.

1. vertical-stack-in-card. In this way better than standard stack card, because I like i more to add the margin, where I need them, instead of removing the ones I don’t need. Esp. as the existing margins with hidden elements are currently the standard problem (=bug/design gap). More or less with the parameters below a rebuild of standard stack, but with ha-card.

2. I added the margin now with just a new conditional card with the same condition: gap card. So this is now backend generated and no card mod ingestion is needed.

3. Add background color to vertical-stack card., either with card-mod or with an enhancement of vertical-stack-card, where I introduced another yaml parameter for this. Done. Without card-mod, so sorry for the OT, but as this is the result from the mod-card at the beginning, I wanted to share it nevertheless.

type: custom:vertical-stack-in-card
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) )
bgcolor: var(--primary-background-color)
cards:
  - type: conditional
    conditions:
      - entity: binary_sensor.ui_alert
        state: 'on'
    card:
      type: bla
  - type: conditional
    conditions:
      - entity: binary_sensor.ui_alert
        state: 'on'
    card:
      type: custom:gap-card
      height: 8

BTW and because I’m forgetting this too often: transition. @ all card-mod users: Switch transition off for more or less every css attribute you are modding. To avoid ugly fading from standard to modded values if there is a pre-assigned fading in standard for these values. Here e.g. background-color or margin.

vs. directly

with

card_mod:
  style:
    .: |
      ha-card { background-color: blue;
        transition: background-color 0s;
      }
    div hui-entities-card:nth-child(2) $: |
      ha-card {
        margin-top: 40px;
        transition: margin-top 0s;
      }

[Mariusthvdb (Marius)]

@Ildar_Gabdullin

Placing the conditional card into a vertical-stack, placing the whole stack into a mod-card, adding a card-mod style to remove margin-top.
Cons: next card after the “mod-card”-ed card sticks to this card (this may be solved by layout-break - but some people do not want to use it in some cases).

can not confirm the Cons here… on none of the cards, either vertical-stack, grid or entities (with embedded mod-card) in my config inside a mod-card, the next card ‘sticks’ to it.

heck, we can even do this:

        .: |
         :host {
           --stack-card-margin: 0px;
           --grid-card-gap: 0px;
         }

in a vertical-stack, (embedding a grid card, as final card) and still have nothing stick at the bottom the that stack…?

[Mariusthvdb (Marius)]

@arganto

@ all card-mod users: Switch transition off for more or less every css attribute you are modding.

Ive been wondering about that! What I experience mostly upon first loading of a card is the widening to the set margins on mods like:

          type: entities
          card_mod:
            style: |
              ha-card {
                box-shadow: none;
                margin: 0px -16px;
              }

this wasnt always the case btw, I remember seeing it after a certain card_mod update, unfortunately dont remember which one it was… was it the lazy loading? I do know we had it in fold-entity-row dropdown, but Thomas took that out after it turned out to not work correctly…

would a transition there fix that too? And, if yes, it would be awesome if we could set that in card-mod-theme, because hundreds of the same lines in the Dashboard config would be a bit much…

Did a quick test, but adding

transition: all 0s;

is not really much of a difference. and reload of the page makes for a new transition.
shorthand transition: 0s; seems to be a bit faster, but the transition is still visible upon opening a fold-entity-row.

Always figured it to be caused by my browsers, but now realize this is on purpose?? Maybe we ought to hack the card_mod resource Or file a FR…

update

Thomas pointed me to the source for this behavior:

It’s been there forever frontend/src/components/ha-card.ts at dev · home-assistant/frontend · GitHub

and suggested we do:

transition: none !important; 

which should should work.

After some initial testing (and no 100% succesrate tbh) I added these to my card-mod-theme:

  card-mod-card: |
    ha-card {
      transition: none !important;
    }

and

  card-mod-glance: |
    :host {
      transition: none !important;
    }

hoping this wil be a cure for all.
Would be cool if you fellow modders could test too?

[arganto]

@Mariusthvdb

Always figured it to be caused by my browsers, but now realize this is on purpose??

It depends on how the browser is acting, loading, etc. E.g. Mobile safari has less problems here as Windows desktop chrome. If the browser loads in a way, that the modded attributes are e.g. assigned before it is displayed at the end of whatever happening, you will not see a transition. If it is slow or the another browser will first show the standard and milliseconds or seconds later apply the modded values and a transition is in place, you will see the transition. But if you have some cases (as I do) where the standard value is in place, but the modded value is assigned before displaying the card, sometimes you will still see the transition to the new, because there is a standard transition in place.

Can you share the yaml example from the case?

[arganto]

@Mariusthvdb

and still have nothing stick at the bottom the that stack…?

Then it is perhaps sometimes the case and sometimes not. Here it was the case. A mod-card around stack-card in a standard layout view (important!) gave this unwanted behavior and showed the next card always below instead of right to the one. And I assume, that the mod-card tell standard view a wrong card height as it is without and therefor the layout takes the next one into account for this calculation. But this is only gut feeling until now.

[Mariusthvdb (Marius)]

please see my edited/updated post above?

[arganto]

Great that the master Thomas confirmed. qed.

In general I like the transition in fka Lovelace, but for modded values it is sometimes a pain and because of that I wanted only to share again, what forget too often as well.