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

[venca.kratky]

Unfortunately, although I have ‘secondary-text-color: #FFFFFF’
the label is still dark

[arganto]

Isn’t it mdc-select-label-ink-color

[boheme61]

and is FFFFFF what you want to have ? … you are not being very specific, …just saying …
maybe try : to add your “desired” color to new line:

“mdc-select-label-ink-color”: …secondary…

[venca.kratky]

YES!!! That’s it. It’s finally working! THANK YOU

[arganto]

All this is not related to card-mod. Can you ask/discuss all this in a seperate topic?

[WarC0zes]

Hello,
I would like to change the size of the moon icon with glance card, it’s a png image and not an icon.

with this code don’t work:

        - entity: sensor.moon_phases
          style: |
            ha-card {
              --mdc-icon-size: 20px;
            }

code:

header_cards:
  cards:
    - type: glance
      columns: 6
      entities:
        - entity: alarm_control_panel.54ef44273cc1_alarm
        - entity: group.grp_portes
          style: |
            ha-card {
              --mdc-icon-size: 33px;
            }
        - entity: group.grp_fenetres
        - entity: group.grp_lumieres
          style: |
            ha-card {
              --mdc-icon-size: 27px;
            }
        - entity: sun.sun
        - entity: sensor.moon_phases
          style: |
            ha-card {
              --mdc-icon-size: 20px;
            }
      show_name: false
      show_icon: true
      show_state: false

help please?

[parautenbach (Pieter Rautenbach)]

@WarC0zes

it’s a png image and not an icon.

That’s your hint. Did you inspect the HTML?

Without the relevant HTML it’s very hard to offer any advice, but I’m fairly sure that CSS variable are only relevant to ha-icon tags and your PNG sits in some img tag — hence my quote above. You need to find the correct path to that PNG image and set the style on that element.

[WarC0zes]

does it help you?

<state-badge style="background-image: url(&quot;https://homeassistant.local:8123/local/moon_phases/waxing_gibbous.png&quot;);"></state-badge>

edit:
I’ve found with:

            state-badge {
              height: 27px;
              width: 27px;
            }

Thanks for directing me where.

[agneev]

Hello!

Does anyone know if the row-gap and the column-gap properties can be individually styled?

[arganto]

Most propably exactly as you have shown. Set it accordingly. row-gap and column-gap.

[agneev]

So far I have tried:

card_mod:
  style: |
    .modes {
      gap: 8px;
# ---
      row-gap: 8px;
      column-gap: 8px;
    }

[arganto]

@agneev

card_mod:
  style: |
    .modes {
      gap: 8px;
# ---
      row-gap: 8px;
      column-gap: 8px;
    }

Use

 column-gap: 8px !important;

[agneev]

Thanks. I guess I was looking for padding.

This is how I styled the card:

card_mod:
  style: |
    ha-card {
      --st-font-size-xl: 45px;
      --st-spacing: 3.5px;
    }
    .modes > .mode-item {
      border-radius: 12px;
    }
    .modes > .mode-title {
      padding: 0px 5px;
      font-weight: 400;
    }
    .modes.heading {
      padding: 1px 5px 1px 5px;
    }

This is without styling:

[klogg]

Has something changed with the use of mod-card since 2022.3 or a recent card-mod upgrade?

Yes, I’ve read the instructions and as the read-me says “I know what I’m doing”. In fact I have been using this successfully for well over a year.

Now I have upgraded to 2022.03 and I get this error

I have this in my configuration.yaml

frontend:
  themes: !include_dir_merge_named themes/
  extra_module_url:
    - /hacsfiles/lovelace-card-mod/card-mod.js

and have tried with and without this in my resources.yaml (Do I need it or not?)

- url: /hacsfiles/lovelace-card-mod/card-mod.js
  type: module

card-mod is obviously installed and working everywhere else.

Usual restarts, refreshes and clearing cache have been tried.
Any help please!

PS Edge browser desktop and phone if that makes a difference.

[Mariusthvdb (Marius)]

see: mod-card 'doesnt exist' on first load · Issue #185 · thomasloven/lovelace-card-mod · GitHub and please chime in…

[reste_narquois (Chris Warne)]

I saw this with update to 2022.03 as well.

I took it as a sign that with constant changes to the frontend, the writing is likely on the wall for the mod_card trick (I should underline of course that this is not official in any way), so I ended up replacing all my styled horizontal-stack and vertical-stack cards with Custom Stack In Card

It has a ha-card element so can be more easily styled with the standard card_mod approach.

[Recte]

I use a picture-glance (in a vertical stack card) for my camera and am pleased with the result in general.
The only downer is that it takes a short while before the image is loaded, but just enough to be annoying.
The picture-glance is the top card and just when you want to tap a button, the image is loaded and so the button jumps to a lower position in the screen.

I am wondering if it’s possible to somehow set a predefined height. Unfortunately am too new to the Card-mod to figure it out by myself. Anyone a suggestion how to solve it?

[Ildar_Gabdullin]

@Recte

picture-glance

Try to find your solution here:
1st post -> link at the bottom -> post with styles -> post for Picture Glance card
If no solution is present then come back with a more detailed description.

[Recte]

I added (your) code for a picture-elements: Styling elements in Picture elements card: a small tutorial - #2 by Ildar_Gabdullin

That seemed to work.

[danielschuessler (Daniel)]

Hi,
thanks for this mod.
I want to create a simple card with big time numbers.

What I’ve tried is very simple. Color and weight change is working, but font and size don’t work. Increasing the font size does result in a bigger space at the top of the card, but the size of the numbers stay the same. Any suggestion?

type: entity
entity: sensor.time
card_mod:
  style: |
    ha-card {
        font-size: 150px;
        font-family: Helvetica;
        color: yellow;
        font-weight: bold;
        }
state_color: false
name: Bechtolsheim