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

[voicelex (Frank)]

Howdy, I am stumped after days of trying to change the “ha-tile-badge” icon on a Tile card (the small gray clock in the attached image).

The example I’m using is a climate sensor (thermostat). The badge changes based on the hvac action but I want to change it with card-mod depending on different situations.

I’ve had great success changing the main icon with if/else statements in the card-mod style, but can do nothing but hide the badge icon. To hide it, I used:

ha-tile-badge { display: none; }

I’m wondering if it has something to do with the shadow DOMs but can’t quite decipher what to do.

Thanks for any help.

[Mariusthvdb (Marius)]

thanks to @arganto I learned today we can mod the view badges after all (I had repeatedly posted we couldn’t, so sorry for that), using mod card and the hui- version of the ha card to mod

- type: custom:mod-card
    card:
      type: custom:hui-entity-badge
      show_name: false
      show_state: true
      show_icon: true
      entity: sensor.processor_use
    card_mod:
      style:
        hui-entity-badge:
          $: |
            ha-state-icon {
              --mdc-icon-size: 28px;
            }

and can even colorize the icon using

              color: {{'var(--ok-color)' if states('sensor.processor_use')|int(0) < 14 
                       else 'var(--alert-color)'}};

inside the same mod.
which is very nice.
I dod blow up my processor with several syntax errors there, so be careful…

now looking for a way to

use the config.entity in those templates and make the mod easily transferable to other badges

a way to set this icon size in card-mod- theme, so we dont have to adjust each and every individual badge.
(aware that is for the other thread, but so intricately related, I keep it here first…)

[Ildar_Gabdullin]

You seem to miss a post where it was described how to style badges w/o mod-card.

[Mariusthvdb (Marius)]

I am not sure. at all. anymore…
I figured it was not possible at all, then Arganto told me it is with mod card, and I had known that, and had posted about that (I really truly didnt remember, still dont…) and now you tell me there is a post without mod-card…?

for now I have to go with this

    card_mod:
      style:
        hui-entity-badge:
          $: |
            ha-state-icon {
              --mdc-icon-size: 28px;
              color: {{'var(--success-color)' if states('sensor.processor_use')|int(0) < 24
                       else 'var(--error-color)'}};
            }
            state-display {
              color: pink;
            }

and am looking for a way to set the background

if all of the above can be done without mod-card, and with the release version of card-mod, I really want to know…

[Ildar_Gabdullin]

Arganto’s way is nice & does not need manual edit of card-mod.js.
My way needs manual edit of card-mod.js, probably both ways have pro & contra.

[Mariusthvdb (Marius)]

wait I now found this 🔹 Card-mod - Super-charge your themes! - #1765 by Ildar_Gabdullin

  card-mod-view-yaml: |
    hui-masonry-view:
      $:
        hui-view-badges $:
          hui-badge:
            hui-entity-badge $: |
              .badge {
                background-color: cyan !important;
                --badge-color: red !important;
                --mdc-icon-size: 32px !important;
                --primary-text-color: orange !important;
              }

does that rely on your hacked version too? I could set the view to sections view, and only use the --mdc-icon-size (that is, until they respond to my FR/Discussion and add a theme variable for the icon size )

talking about theming, it would be cool if we could also limit the horizontal space (width) of the complete badge area to a single column. maybe a nice challenge for card-mod themes too…

[Ildar_Gabdullin]

@Mariusthvdb

oes that rely on your hacked version too?

No, it is a “normal” way with addressing a badge from a hui-view level.
Can be used in a theme and this is a very hard way (difficult to use for a particular entity).

[Mariusthvdb (Marius)]

@Ildar_Gabdullin

Arganto’s way is nice

I sure is (though be careful).

would you know how to set the background of the badge?
we can set background on that state-display, but not yet found the correct element to colorize the badges background completely

on hui-entity-badge ha-badge .badge

[Ildar_Gabdullin]

as usual - 1st post → … → badges 2024.8
but it needs a “hack”

[PickOne]

@Sirez

scrollbar

This is working on chrome, but not Firefox and Fully Kiosk Browser. Any idea how to achieve this into these two? At least in FKB, would be great.

[Mariusthvdb (Marius)]

aarghh, had hoped to be able to do with mod-card in Arganto style…

and the config.entity, do we have another variable here too (like the other day in the row entity)?

          hui-generic-entity-row {
            {% set alert = states(config.row.entity)|int(0) %}
            --card-mod-icon:
              mdi:{{'shield-check' if alert == 0 else 'alert'}};
            --card-mod-icon-color:
              var(--{{'ok' if alert == 0 else 'alert'}}-color);
          }

looking for the badge entity…

[arganto]

@Mariusthvdb

would you know how to set the background of the badge?

e.g. (short way via variables)

type: custom:mod-card
card:
  type: custom:hui-entity-badge
  show_name: false
  show_state: true
  show_icon: true
  entity: sensor.processor_use_percent
  color: amber
card_mod:
  style:
    hui-entity-badge:
      $: |
        ha-state-icon {
          --mdc-icon-size : 50px;
        }
    .: |
      hui-entity-badge {
        --ha-card-background: red;
      }

[Ildar_Gabdullin]

Erm, what is a difference? Either use mod-card, or apply card-mod directly.
Also, with a hack you can use themes with “card-mod-badge”:

test_badge:
  card-mod-theme: test_badge
  card-mod-badge-yaml: |
    ha-badge $: |
      span.label {
        color: magenta;
      }
      .badge {
        background-color: lightblue !important;
        border: 2px solid red !important;
      }
    .: |
      :host {
        --primary-color: green;
      }
      state-display {
        color: blue;
      }

[Ildar_Gabdullin]

@Mariusthvdb

nd the config.entity, do we have another variable here too (like the other day in the row entity)?

Ofc:

type: custom:mod-card
card:
  type: custom:hui-entity-badge
  show_name: true
  show_state: true
  show_icon: true
  entity: input_boolean.test_boolean
  name: xxxx
card_mod:
  style:
    hui-entity-badge:
      $: |
        ha-state-icon {
          {% if is_state(config.card.entity,'on') -%}
          --mdc-icon-size: 28px;
          {%- else -%}
          --mdc-icon-size: 8px;
          {%- endif %}
        }          

[Mariusthvdb (Marius)]

@Ildar_Gabdullin

config.card.entity

bingo! thx

      style:
        hui-entity-badge:
          $: |
            ha-state-icon {
              --mdc-icon-size: 28px;
              color: {{'var(--success-color)' if states(config.card.entity)|int(0) < 24
                       else 'var(--error-color)'}};
            }

is what I was after
getting better now…

only looking for the border element now

on that same .badge element

ehrm…

    .: |
       hui-entity-badge {
        --ha-card-background: {{'var(--success-color)'
          if is_state('binary_sensor.werkdag','off') else 'var(--card-background-color)'}};
        border: 2px solid red;
       }

how peculiar

adding:

    .: |
       ha-card {
         border: 2px solid red;
         border-radius: 24px;
       }

seems to work, but I had hoped to find the element so that I dont have to also set the border radius again

       ha-card {
         border: 2px solid purple;
         border-radius: 24px;
         --ha-card-background: green;
         --primary-text-color: white;
         --icon-primary-color: black;
       }

all seem to work, and even --card-mod-icon-color: black; for that matter

[Mariusthvdb (Marius)]

a summary post, commented mods also work, but I’ve moved all except icon size to the generic ha-card, mainly because it is so much easier.

type: custom:mod-card
card:
  type: custom:hui-entity-badge
  entity: sensor.vandaag
card_mod:
  style:
    hui-entity-badge:
      $: |
        ha-state-icon {
          --mdc-icon-size: 28px;
          /*color: {{'var(--warning-color)'
            if is_state('binary_sensor.werkdag','on')}};*/
        }
        state-display {
          font-size: 24px;
          /*color: {{'var(--warning-color)' if is_state('binary_sensor.werkdag','on')}};*/
        }
    .: |
       /*hui-entity-badge {
        --ha-card-background: {{'var(--success-color)'
          if is_state('binary_sensor.werkdag','off') else 'var(--card-background-color)'}};
       }*/

       ha-card {
         border: 2px solid {{'var(--success-color)' if
                             is_state('binary_sensor.werkdag','off') else
                             'var(--error-color)'}};
         border-radius: 24px;
         --ha-card-background: gray;
         --primary-text-color: white;
         --card-mod-icon-color: {{'var(--success-color)' if
                             is_state('binary_sensor.werkdag','off') else
                             'var(--error-color)'}}; /*--icon-primary-color:*/
       }

but the border isnt right yet. Note the difference here:

the orange is set on the ha-card with the above card-mod, and the red inner border is set in Inspector, on the .badge element.

that would be my preference, because right now the oranges makes the card size go out of sync with others, and also has a different box-shadow

[Mariusthvdb (Marius)]

separate post for this:
because of the card_mod (with mod-card, idk) there is an ugly effect on reload of the view.

in my main theme I have a ha-card-border-radius: 0.

recently ha-badge-border-radius was added to the styles of the badges, and that’s great, because we can set the radius in our themes now.

I have ha-badge-border-radius: 24px in my main theme.

any badge in the dashboard that has any mod-card/card-mod set (and even without any mod itself), shows the squared border-radius 0 for a moment, and then loads the actual styling.

left 2 badges have a mod, the most right badge has not…

btw, same happens with the new type: heading when card-mod is set:

Check the Host system info

[arganto]

@Ildar_Gabdullin

card-mod-badge-yaml:

From where is this? And do you see a difference to address from there and not - as “standard” - from card-mod-view-yaml?

  card-mod-view-yaml: |
    hui-sections-view:
      $:
        hui-view-badges:
          $:
            hui-entity-badge:
              $:
                .: |
                  ha-state-icon {
                    --mdc-icon-size : 24px;
                  }              
                ha-badge:
                  $: |
                    .content {
                      font-size: 14px !important;
                    }

[Ildar_Gabdullin]

@arganto

From where is this?

This is a standard card-mod-themes thing.

@arganto

And do you see a difference to address from there and not - as “standard” - from card-mod-view-yaml?

Sorry, could you elaborate?

[arganto]

O.k. Only already did it coming from the view-level (see my lines of code) and not from badge as you did above.