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

[AleXSR700 (Alex)]

Yes, and I seemingly am not looking in the right places or getting the syntax right if I am.
Tried asking Bard and Bing AI but they were equally as useless as myself

I am giving up on that test and trying to go for something simpler: entities card.

I checked the examples by Ildar but could not find an option there or in dev tools to minimize the spaces between entities.

The distance between the scripts/automations is quite big. I would happily go without the icons, too. But mainly I want to make the card as tight as possible.

padding and margin did not seem to solve it or I did not find the right place to do so.
Anybody know if it is possible?

[Ildar_Gabdullin]

@AleXSR700

checked the examples by Ildar but could not find an option there or in dev tools to minimize the spaces between entities.

Same: 1st post → link t the bottom → space between rows

[AleXSR700 (Alex)]

Apologies, I went through your posts on entities cards because a lot of things are specific to cards (or so it always seems to me).

I tried adjust the row height but I am seeing weird behaviour when combining it with auto-entities. Only the first entity row is being styled.

type: custom:auto-entities
filter:
  include:
    - entity_id: script.climate*
    - entity_id: automation.climate*
card:
  type: entities
  state_color: true
  card_mod:
    style:
      hui-toggle-entity-row $: |
        hui-generic-entity-row {
          color: magenta;
          height: 25px;
        }
      hui-script-entity-row $: |
        hui-generic-entity-row {
          color: green;
          height: 25px;
        }          

[DanTimu]

Hi @arganto, I have tried the mentioned code regarding the slider with pointer-events: none. It’s not working for me.

[Ildar_Gabdullin]

@AleXSR700

Only the first entity row is being styled.

You will see same w/o auto-entities as well.
That example was for “one row of type” case.
1st post → link … → other → important notes about navigation
Use this

        hui-simple-entity-row:
          $: |
            hui-generic-entity-row {
              color: red;
              height: 25px;
            }

instead of

        hui-simple-entity-row $: |
          hui-generic-entity-row {
            color: red;
            height: 25px;
          }

for all types.

[Ildar_Gabdullin]

Example of using card-mod with picture-elements
Show a charging process:

here

[arganto]

@DanTimu

Hi @arganto, I have tried the mentioned code regarding the slider with pointer-events: none. It’s not working for me.

Hm, no clue. Perhaps browser dependend? Your icon looks different than mine. Which one are you using?

Can you double-check these parts

If you select/cklick on the input-element, is the css of the style part look like the two arrows at the bottom of my screenshot, so is the style is applied?

Basis for this is, that the sytle is ingested correctly ar right spot. Blue arrows.

Ah, sorry perhaps I missed the !important in my posting, which you can see in my screenshot as well. Try to add it as well.

[dtpugh (David Pugh)]

I am having issues when using a more-info-card. I don’t seem to be able to path to the h1.card-header no matter what I do.

This is my code (I have spent hours on this, trying all sort of combinations)

Is there 2 shadow-root here? as I notice there are 2 <!–… underneath the ha-card shadow-root and is that causing the issue?

Many thanks

[Ildar_Gabdullin]

@dtpugh

don’t seem to be able to path to the h1.card-header no matter what I do.

1st post → link at the bottom ->other → combining

[dtpugh (David Pugh)]

Thanks.

For anybody else reading, it is because of the vertical bar “|” after style: Removing that, it then works!

You then get the card-mod element inserted in the shadow-root.

[Ildar_Gabdullin]

@dtpugh

it is because of the vertical bar “|” after style: Removing that, it then works!

wrong. check again.

[dtpugh (David Pugh)]

Ok I was a bit quick to post, not working completely. I reduced it down to

So that’s why it worked, and the below doesn’t

To add the other styles, I needed to change to

From the documentation, this is the key line

By adding the | after style: I am making it a string. Am I correct?

[Ildar_Gabdullin]

@dtpugh

By adding the | after style: I am making it a string. Am I correct?

Not exactly.
By adding “|” after ANY option you make it a string.
In your case you made a dictionary (what is needed):

style: {
'xxx $': 'xxxx',
'.': 'xxxx'
}

[dtpugh (David Pugh)]

Thanks for your help.

Got there in the end, inserting that | has cost me so many hours.

[AleXSR700 (Alex)]

Ildar, I am a bit stuck.
Marius tried helping me on Discord and he had a cool approach for cards that are more similar to each other where you use the options section of auto-entities.

But I am trying to use your approach with the generic rows.

However, I habe not been able to omplement if expressions.

type: custom:auto-entities
filter:
  include:
    - entity_id: script.climate*
    - entity_id: automation.climate*
card:
  type: entities
  state_color: true
  card_mod:
    style:
      hui-toggle-entity-row:
        $: |
          hui-generic-entity-row {
          color: {% if states(config.entity) == "on" %} red {% else %} blue {% endif %};
          height: 20px;
          }
      hui-script-entity-row:
        $: |
          hui-generic-entity-row {
          color: green;
          height: 20px;
          }          

Do you know why the if expression for color does not work there and if there is a fix for this?
It is the same approach as it would be in options using states(config.entity).

Thank you, once again

[Ildar_Gabdullin]

@AleXSR700

hui-generic-entity-row {
          color: {% if states(config.entity) == "on" %} red {% else %} blue {% endif %};
          height: 20px;

1. Ofc, it will not work ))). config.entity is defined on a row level!
2. I do not think there is any reason to use “style a row from a card’s level” in case of using “auto-entities”. It is only worth using in a “normal” Entities card to avoid repeating a code for each row. And even in this case i would not recommend it. Use yaml-anchors etc for EACH row, do not try to save your time with this “style a row from a card’s level” way.
3. Although many people using

color: {% if ... %} red {% else %} blue {% endif %};

syntax, I never do it and never recommend people doing it.
This one is better:

{% if ... -%}
color:  red;
{%- else -%}
color: blue;
{%- endif %}

[efaden (Eric Faden)]

Using the Bubble Card (Popup), layout card, and card_mod I have these “blank spots” for lack of a better term. I cannot for the life of me figure out what to modify to make them go away. Basically you make a vertical stack and the bubble card “hides” it until you ask for the popup. That all works fine, except at the bottom of my layout there is blank area. Trying to use card_mod to get rid of it but cannot seem to figure out what to modify.

I tried using show: hidden in the layout card, but that makes the popup not work. Using dev tools I set the element.style: margin to 0 and that seemed to make them vanish. But I can’t seem to get it with card_mod.

They seem to be “hui-vertical-stack-cards”.

Any assistance?

[tanderson1992]

My first attempt at using card mod works, sort-of. I’m trying to modify a horizontal stack card to reduce the left pane to 25% and increase the right to 75%. When I reload HA, it’s a normal horizontal stack card with two squares. I have to click Edit Dashboard and then the card immediately looks like I want it to be. The same goes on mobile, where it’s initially two squares until I rotate the phone and then rotate it back. What do I need to change? Code and screenshots:

type: custom:mod-card
card_mod:
  style:
    hui-horizontal-stack-card $: |
      div#root > :first-child {
        width: 25%;
        flex: auto; 
      }
      div#root > :last-child {
        width: 75%;
        flex: auto; 
      }
card:
  type: horizontal-stack
  cards:
    - type: custom:card-templater
      card:
        type: picture
        image_template: '{{ states.sensor.life_100_icon.state }}'
        tap_action:
          action: none
        hold_action:
          action: none
      entities:
        - sensor.life_100_image
    - type: markdown
      content: >-
        {{ states('sensor.life_100_artist') | trim }} -
        {{states('sensor.life_100_song') | trim }}
      title: Life 100 Now Playing

On reloading HA, it looks like this:

Choosing Edit Dashboard causes it to immediately change to this:

It stays like this until the next time I reload the browser.

[Ildar_Gabdullin]

@tanderson1992

When I reload HA, it’s a normal horizontal stack card with two squares. I have to click Edit Dashboard and then the card immediately looks like I want it to be.

Read docs:

Means:

        hui-horizontal-stack-card:
          $: |

[dave-parsons (David Parsons)]

Struggling to change font-size on the name of area card. One of my many attempts below. Anyone help with what I’m doing wrong?

type: area
area: 056a34cf83614ddd95d9d81e1d0dcf7b
navigation_path: /config/areas/area/056a34cf83614ddd95d9d81e1d0dcf7b
card-mod:
  style:
    ha-card:
      $: |
        .name {
          font-size: 12px;
        }