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

[LiQuid_cOOled]

I am self taught and do not have a specific guide to point you in the right direction. I started with W3Schools and a few other sites. The robust info provided by @Ildar_Gabdullin, @Mariusthvdb and @dimitri.landerloos taught me how to apply code to HA. In addition, the recent contributions from @dcapslock have fast tracked my education.

I mention these folks so you can search for their posts when researching topics.

I’ll DM you an example, but I’d suggest starting a new JS module thread separate from this Card Mod thread.

That would all a lot more folks to answer your future JS inquiries.

[LiQuid_cOOled]

We had that conversation here

The methods below worked before, just not with card_mod v3.5.0.

- type: entity
          card_mod:
            style: |
              ha-card {
                --chip-background: red;
                 }

- type: entity
          card_mod:
            style: |
              ha-card {
                --chip-background: green;
              }

[vincusmalincus]

I created gif buttons using card-mod.

[Mariusthvdb (Marius)]

@LiQuid_cOOled

The methods below worked before, just not with card_mod v3.5.0.

yes, that was it. glad to report the methods work in 4.0.0

[Mariusthvdb (Marius)]

yet another new card hadn’t yet heard of that.

can you show the yaml for that please?

so do you say the card-mod modifications we can do back again now on the top view type: custom:hui-state-badge-element is blocked in the custom:badge-card but not in this custom:badge-horizontal-container-card ?

[Mariusthvdb (Marius)]

ok now find a mod to move stuff

Custom JS plugin to modify elements (and not use card-mod)

[Placeholder post to move posts from card-mod thread and other topics concerning modifying the Frontend in a custom JS resource] as briotefly discussed in Card-mod - Add css styles to any lovelace card - #9202 by Mariusthvdb

[dcapslock (Darryn Capes-Davis)]

@Mariusthvdb

custom:badge-horizontal-container-card

… wraps each badge in <hui-badge> just like Frontend.

@Mariusthvdb

custom:badge-card

… does not.

[dcapslock (Darryn Capes-Davis)]

@Mariusthvdb

can you show the yaml for that please?

YAML (Browser Mod test stuff removed)

type: custom:badge-horizontal-container-card
badges:
  - type: custom:hui-state-badge-element
    entity: sun.sun
    card_mod:
      style:
        ha-state-label-badge:
          $:
            ha-label-badge:
              ha-state-icon $ ha-icon $: |
                ha-svg-icon {
                  animation: rotate 2s infinite;
                }
                @keyframes rotate {
                  0% {transform: rotate(0);}
                  50% {transform: rotate(3.142rad);}
                  100% {transform: rotate(0);}
                }          
              $: |
                .badge-container
                  /* Top circle of the Badge (State) */
                  .label-badge {
                    border-style: dashed;
                    border-color: blue;
                    color: gray;
                    background: yellow;
                    animation: colorize 2s infinite;
                  }
                  @keyframes colorize {
                    0% {background-color: yellow;}
                    25% {background: brown;}
                    50% {background: purple;}
                    75% {background: green;}
                    100% {background: pink;}
                  }
badges_align: center
badges_wrap: wrap

[Mariusthvdb (Marius)]

But you could fix that

[dcapslock (Darryn Capes-Davis)]

Use custom:badge-horizontal-container-card. Seems pretty neat. Nothing special about custom:badge-card.

[Mariusthvdb (Marius)]

yeah, probably, always hard to say goodbye to what one has been using for years…

then again, the unmaintained badge-card doesnt handle the new style badges properly, so seems time for the new kid on the block and archive the badge-card because of that malfunction

of course, we really should have this in stock Frontend, show badges anywhere, not only in the badges section

cant we set that using a ‘custom’ syntax maybe…

yes we can:

type: horizontal-stack
cards:
  - type: custom:hui-entity-badge
    entity: sun.sun
  - type: custom:hui-entity-badge
    entity: sun.sun
  - type: custom:hui-entity-badge
    entity: sun.sun

though we need some setting (card-mod… ? ) to not have a single badge use the full width there…

btw…

fwiw, we can use the same card_mod settings on the state-badge-elements in a regular view section, in a stock horizontal-stack

    - type: horizontal-stack
      title: Stack with modified state badge
      cards:
        - type: custom:hui-state-badge-element
          card_mod:
            style: |
              :host {
                color: orange;
                --label-badge-text-color: red;
                --label-badge-red: cyan;
                --label-badge-background-color: yellow;
                --ha-label-badge-label-color: blue;
              }
          entity: light.alarm
          tap_action:
            action: toggle
          hold_action:
            action: more-info

        - type: custom:hui-state-badge-element
          entity: device_tracker.ha_main
        - etc

and get:

update

that card_mod styling to get the badges to fit content is rather straightforward …

type: horizontal-stack
cards:
  - type: custom:hui-entity-badge
    show_name: false
    show_state: true
    show_icon: true
    entity: sun.sun
    card_mod:
      style:
        ha-badge:
          $: |
            .badge {
              width: fit-content !important;
              border: 2px solid gold !important;
              box-shadow: var(--box-shadow-badges) !important;
            }

which means we can drop any badge anywhere now. just add this 1 card_mod yeey

[Mariusthvdb (Marius)]

wrote-up a community guide, for the users of badges old and new

[Ildar_Gabdullin]

Community guide is always good, but is there a need in an additional guide? We have fantastic post with list of mods for badges and we can just add anything missing, including nice implementation.

Update: I see, it is about “place a badge everywhere”, but in this case may be you should just MENTION a card-mod to avoid an impression “card-mod is needed for this”.

[Mariusthvdb (Marius)]

I’ve changed from community guide to regular post…

@Ildar_Gabdullin

Update: I see, it is about “place a badge everywhere”

exactly that. and many users asked for that, before and after the introduction of new style badges.

@Ildar_Gabdullin

you should just MENTION a card-mod to avoid an impression “card-mod is needed for this”.

not sure I understand what you say here.

I refer users to this thread, even with a link in that post on some card_mod specific.

and I also show the 1 required card_mod, to be able to use the new style badges with their fit-content modification.

[Ildar_Gabdullin]

I meant that you should specify that using badges do not need card-mod (and perhaps remove “card-mod” from a title). And mention card-mod like “btw, card-mod may be used to tune up smth” and then provide your mods. Otherwise beginners may think like “card-mod needed for badges”.

[Mariusthvdb (Marius)]

@Ildar_Gabdullin

perhaps remove “card-mod” from a title)

sure, I did that now.

@Ildar_Gabdullin

using badges do not need card-mod

the 1 card_mod is required for using modern style badges in a stack card, and that is stressed explicitly

all other modifications are with links, and not explored further in the post itself.

if you have another link to a specific post that explains styling badges without mod-card, just let me know and Ill add it.

it was Not possible until now (card-mod 4.0.0) , so my post seems to be alone for that matter…

[Ildar_Gabdullin]

@Mariusthvdb

f you have another link to a specific post that explains styling badges without mod-card, just let me know and Ill add it.

No, I do not. Will read again your guide a bit later. Cannot test it myself though.
Do you mind adding that post to the fantastic post to the badges part as “not about card-mod but useful”?

[Mariusthvdb (Marius)]

@Ildar_Gabdullin

Do you mind adding that post to the fantastic post to the badges part as “not about card-mod but useful”?

don’t think I can, I dont get a pencil on that post.

besides, it might need some re-ordering, the badges posts are now outdated, and really justify a new indexing.

Ill let you do the honors when you have more time

[jmfargas]

I know, I’m also learning a lot through all your posts! What I mean is to continue with the discussion, what shall I do? Is there any open topic I could join? Thanks

[arganto]

@jmfargas

what shall I do? Is there any open topic I could join?

Start perhaps with reading the posts. afaik Mariusthvdb opened a topic for this and it is not that far away to find this links some posts above.