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

[Olivier1974 (Olivier Toussaint)]

@Ildar_Gabdullin

Again:

@Ildar_Gabdullin

Why using mod-card?

If “Always need black text and blue icons because of the background image I’ve set” doesn’t answer that question then obviously I did not understand the question. Or, you try to tell me that there is another way to achieve my goal but how then?

Does the vertical-stack-in-card have ha-card element?
Do you see changes in Code Inspector?

I don’t see any change, especially because this was working in 2021.11.5 and no longer in 2021.12.0 (and 2021.12.1, 2021.12.2 and 2021.12.3).
Nothing was updated but HA core (neither mod-card, neither vertical-stack-in-card)

vertical-stack-in-card is just vertical-stack without separators. And replacing it with the regular vertical-stack doesn’t change my issue.

Obviously, mod-card is working, as I’ve the requested background
background-image: url('/local/ww90t554aaw-s2.jpg');

but the text remains white, despite the
--primary-text-color: #000000;

[Ildar_Gabdullin]

@Olivier1974

did not understand the question.

Do you understand a difference between card-mod and mod-card? The latter is supposed to be used only for cards w/o ha-card. That is why I asked you about ha-card.

[reste_narquois (Chris Warne)]

I think you would greatly benefit from re-reading the documentation on GitHub.

Judging from your code, there have been significant changes that you need to catch up with.

[Olivier1974 (Olivier Toussaint)]

Yes, probably, my code is from a very old version of the card/module.
I did the change to “load it as a module” in the frontend section when it was advised.
Using the new way of working, I managed to change my text to black again, keeping my background.
Thanks

[anon36468094]

Is it possible to change the border thickness of the person icon/badge on the maps card? I see it’s in the .marker style but can’t find a way to change it with card_mod.

[Ildar_Gabdullin]

Small tricks for multiple-entity-row, added to the main post.

[Mariusthvdb (Marius)]

haha, thats wild for Sylvester . And yes, Ive been using gifs for buttons since forever, btw, also as entity_picture. use

for my app device_trackers

Was wondering if you could help me fix this glowing Christmas card I tried…

Pulsating lights automation

cleaned that up a bit…: [Dec-18-2021 15-13-07] type: custom:button-card entity: input_boolean.pulsate_light variables: duration: > [[[ return states['input_number.transition_time'].state; ]]] tooltip: > [[[ return entity.state == 'on'? 'Fixed lights' :'Breathing lights'; ]]] show_name: false size: 95% aspect_ratio: 1/1 state: - value: 'on' icon: mdi:hexagram styles: card: - background-color: ivory - animation: > [[[ return 'glow ' + variables…

Id like it to appear glowing from the background of the card, but for now managed to set the box-shadow like this.

[Mariusthvdb (Marius)]

can we at all use word wrap on an individual glance state (3d (last) one, Prediction)?

type: entities
title: Buienradar Iungo
card_mod:
  style: |
    .card-header {
      background-color: var(--background-color-off);
      color: var(--text-color-off);
      padding-top: 0px;
      padding-bottom: 0px;
      margin: 0px 0px 16px 0px;
    }
entities:
  - type: custom:hui-element
    card_type: glance
    card_mod:
      style: |
        ha-card {
          box-shadow: none;
          margin: 0x -16px 0px -16px;
        }
    entities:
      - sensor.temp_current
      - sensor.windspeed
      - sensor.prediction. # <--- needs word-wrap 
  - type: custom:fold-entity-row

I checked the examples for word-wrap but probably missed it, and this is what is actually in the state:

[Ildar_Gabdullin]

@Mariusthvdb

word wrap on an individual glance state

Post

[Mariusthvdb (Marius)]

geez, really did a word search for that… still, doesnt work out of the box (the mod still has the old style though, so I used it as:)

    card_mod:
      style: |
        ha-card {
          box-shadow: none;
          margin: 0x -16px 0px -16px;
        }
        .entities .entity:
          $: |
            div:not(.name) {
              text-overflow: unset !important;
              white-space: unset !important;
            }

no change unfortunately nor does

      - entity: sensor.prediction
        card-mod:
          style: |
            div:not(.name) {
              text-overflow: unset !important;
              white-space: unset !important;
            }

work

[Ildar_Gabdullin]

@Mariusthvdb

no change unfortunately

try this (not tested):

    card_mod:
      style:
        .entities .entity:
          $: |
            div:not(.name) {
              text-overflow: unset !important;
              white-space: unset !important;
            }
        .: |
          ha-card {
            box-shadow: none;
            margin: 0x -16px 0px -16px;
          }

@Mariusthvdb

geez, really did a word search for that…

That post contained examples for wrapped names only, I just added examples for values - specially for @Mariusthvdb )))

@Mariusthvdb

card-mod:

!!!

[Mariusthvdb (Marius)]

better:

though now the last child is shifted upwards …

[Ildar_Gabdullin]

@Mariusthvdb

though now the last child is shifted upwards …

  - type: glance
    title: Wrapped value (1st entity) + aligned
    entities:
      - entity: input_text.test_text
        name: Wrapped
        style: |
          div:not(.name) {
            text-overflow: unset !important;
            white-space: unset !important;
          }
      - entity: input_text.test_text
        name: Not wrapped
    card_mod:
      style: |
        .entities {
          align-items: start !important;
        }

[Mariusthvdb (Marius)]

@Ildar_Gabdullin

        .entities {
          align-items: start !important;
        }

right!
so this does it all:

  - type: custom:hui-element
    card_type: glance
    card_mod:
      style: |
        ha-card {
          box-shadow: none;
          margin: 0x -16px 0px -16px;
        }
        .entities {
          align-items: start !important;
        }
    entities:
      - sensor.temp_current
      - sensor.windspeed
      - entity: sensor.prediction
        style: |
          div:not(.name) {
            text-overflow: unset !important;
            white-space: unset !important;
          }

is it on purpose we dont use ‘card-mod’ on the entity, or an oversight and I should add it:

  - type: custom:hui-element
    card_type: glance
    card_mod:
      style: |
        ha-card {
          box-shadow: none;
          margin: 0x -16px 0px -16px;
        }
        .entities {
          align-items: start !important;
        }
    entities:
      - sensor.temp_current
      - sensor.windspeed
      - entity: sensor.prediction
        card_mod:
          style: |
            div:not(.name) {
              text-overflow: unset !important;
              white-space: unset !important;
            }

btw, the !important can be deleted, works without it just as fine.

  - type: custom:hui-element
    card_type: glance
    card_mod:
      style: |
        ha-card {
          box-shadow: none;
          margin: 0x -16px 0px -16px;
        }
        .entities {
          align-items: start;
        }
    entities:
      - sensor.temp_current
      - sensor.windspeed
      - entity: sensor.prediction
        card_mod:
          style: |
            div:not(.name) {
              text-overflow: unset;
              white-space: unset;
            }

in the card now, thanks Ildar!

[Ildar_Gabdullin]

@Mariusthvdb

s it on purpose we dont use ‘card-mod’ on the entity, or an oversight and I should add it:

If you are talking about adding a card_mod keyword - that was an old code from card-mod 2.0, I just edited it and forgot to add this keyword… It works w/o it but surely we should add it always.

[Mariusthvdb (Marius)]

since 🔹 Card-mod - Add css styles to any lovelace card - #1522 by Ildar_Gabdullin didnt yet have a mod for the background (which I needed) please have a look at my attempts…

trying to get rid of the default background color which does not match any of my themes at all, and creates a huge dark blob in the interface :

I managed to do something like:

and have it mimics the settings for the headers I use in my frontend:

not sure this is the best code for it, but it seems to work fine for now:

  - type: media-control
    entity: media_player.tv_auditorium
    card_mod: &media
      style: |
        .player {
          background-color: var(--background-color-off);
        }
        .title-controls {
          background-color: var(--background-color-on);
          margin: 16px -16px 0px -16px;
          padding: 0px 8px;
        }
        .title-controls {
          color: var(--icon-color-on);
        }

if this could be optimized, please give me a hint? thx

note the has disappeared completely, not sure where…

[Ildar_Gabdullin]

@Mariusthvdb

has disappeared completely, not sure where…

Try with semi-transparent background

[Mariusthvdb (Marius)]

odd thing is it is no longer in inspector at all…

[Mariusthvdb (Marius)]

@Ildar_Gabdullin

.ha-scrollbar ha-chip:
          $: |
            .mdc-chip {
              border-radius: 4px !important;
            }
            .mdc-chip span {
              text-align: center;
              width: 250px;
            }
            .mdc-chip__ripple {
              border-radius: 4px !important;
            }
        hui-buttons-base $: |
          .ha-scrollbar {
            justify-content: center;
          }

trying to replace my old footer mod:

        .header-footer.footer {
          --mdc-icon-size: 30px;
          padding-bottom: 10px;
          font-weight: bold;
          font-size: 20px;
          color: orange;
        }

and manipulate the chips in the footer at all, I copied your code to:

    card_mod:
      style: |
        .card-header {
          background-color: var(--background-color-off);
          color: var(--text-color-off);
          padding-top: 0px;
          padding-bottom: 0px;
          margin: 0px 0px 16px 0px;
        }
        .header-footer.ha-scrollbar ha-chip:
          $: |
            .mdc-chip {
              border-radius: 4px !important;
            }
            .mdc-chip span {
              text-align: center;
              width: 250px;
            }
            .mdc-chip__ripple {
              border-radius: 4px !important;
            }
          hui-buttons-base $: |
            .ha-scrollbar {
              justify-content: center;
            }

and, ofc, see nothing happening…

while it needs to be something like:

which I now realize with an extra stack of buttons:

      - type: custom:hui-element
        card_type: horizontal-stack
        cards:
          - type: custom:button-card
            entity: script.garage_lamellen_open
            icon: mdi:arrow-up
            <<: &button
              show_name: false
              aspect_ratio: 3/1
              styles:
                card:
                  - box-shadow: none
          - type: custom:button-card
            entity: script.garage_lamellen_my
            name: My
            show_icon: false
            aspect_ratio: 3/1
            styles:
              card:
                - color: orange
                - box-shadow: none
              name:
                - font-weight: bold
                - font-size: 40px
            tap_action:
              action: call-service
              service: script.toggle
              service_data:
                entity_id: entity
              haptic: light
            hold_action:
              action: more-info
              haptic: light
          - type: custom:button-card
            entity: script.garage_lamellen_close
            icon: mdi:arrow-down
            <<: *button

which is ok-ish, but a huge bit of code for 3 little buttons…

how can we manipulate the footer chips?

[Ildar_Gabdullin]

Try this (not tested):

     style:
        .header-footer.ha-scrollbar ha-chip:
          $: |
            ..
        .: |
          .card-header {
            ...
          }