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

[Faecon (Jo)]

    - type: custom:mushroom-template-card
      primary: Deur Openen
      tap_action:
        action: fire-dom-event
        browser_mod:
          service: script.deur_openen
      card_mod:
        style:
          mushroom-state-info$: |
            .container {
              margin: -10px;
              text-align: center !important; 
          .: |
            ha-card {
              box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.3) !important;
              background-color: rgb({{ states("input_text.kleur_iconen_bleker")}}) !important;
              width: 160px;
              height: 100px !important;  
            }  
            ha-card:active {
            transform: scale(1.02);
            transition: 0s;
              }

how do I center the button ?

[Mariusthvdb (Marius)]

which button?

this seems centered…:

btw, why use template card if you dont use templates in the mushroom config?

might just as well use a core type:button

kiss

[Faecon (Jo)]

 type: vertical-stack
  cards:
    - type: picture-entity
      camera_image: camera.deurbel_profile_name
      camera_view: live
      entity: camera.deurbel_profile_name
      show_state: false
      name: livebeeld
    - type: custom:mushroom-template-card
      primary: Deur Openen
      tap_action:
        action: fire-dom-event
        browser_mod:
          service: script.deur_openen

my excuses, it was half of the code. the “deur openen” button has to be in the center …

[Mariusthvdb (Marius)]

well do as I suggested, use a core button card, and it auto centers
you can ditch the browser_mod stuff too, just have the button execute the script

type: vertical-stack
cards:
  - type: picture-entity
    entity: camera.deurbel_profile_name
    camera_view: live
  - type: button
    name: Deur Openen
    tap_action:
      action: perform-action
      perform_action: script.turn_on
      data:
        entity_id: script.deur_openen

heck, you can even ditch the complete button and set the action to the picture-entity if you want

[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