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

[Mariusthvdb (Marius)]

setting 0px to all of my tile card features border-radius’s, I can not find the correct path to the counter button…

according to the Dom inspection it should be

            card_mod:
              style: |
                ha-tile-icon {
                  {% set count = states(config.entity)|float(-5) %}
                  --tile-color:
                    {% if count > 0 %} var(--warning-color)
                    {% else %} var(--success-color)
                    {% endif %};
                }
                hui-card-features $:
                  hui-card-feature $:
                    hui-counter-actions-card-feature $:
                      ha-control-button-group $:
                        ha-control-button $: |
                          .button {
                            --control-button-border-radius: var(--ha-card-border-radius);
                            opacity: 0.8;;
                          }

but the button remains rounded:

of course I did try !important, and other css properties, but it just isnt the correct element Ingress.

Could any of you please check?

manually setting there to .button does make it happen

see How to set border-radius on Tile card Features - #8 by Mariusthvdb for the other tiles I managed to set 0px to…

[arganto]

What is a counter button? Never used it and I’m not able to set it up.

Anyways. Why are you setting the variable --control-button-border-radius there and not just the radius attributes as you are doing in the manual settings?

Secondly. You merged the two styles wrong. Check your other cases or Ildars most linked post “how to merge two styles”.

[Ildar_Gabdullin]

Yes, as arganto said - two styles are not properly combined. Away from PC, cannot help more.

[Mariusthvdb (Marius)]

A yes, stupid me. Sorry….

@arganto

What is a counter button? Never used it and I’m not able to set it up.

          - type: tile
            entity: counter.warnings
            name: Warnings
            <<: &features
              features_position: inline
              features:
                - type: counter-actions
                  actions:
                    - reset
              hold_action:
                action: navigate
                navigation_path: /config/logs
            card_mod:
              style:
                hui-card-features $:
                  hui-card-feature $:
                    hui-counter-actions-card-feature $:
                      ha-control-button-group $:
                        ha-control-button $: |
                          .button {
                            border-radius: var(--ha-card-border-radius) !important;
                            opacity: 0.8;
                          }
                .: |
                  ha-tile-icon {
                    {% set count = states(config.entity)|float(-5) %}
                    --tile-color:
                      {% if count > 0 %} var(--warning-color)
                      {% else %} var(--success-color)
                      {% endif %};
                  }

it’s a tile with a counter and a button to reset the counter.

it should be merged correctly now, and the tile-icon bit works fine. still cant set the border-radius though

edit

this does it alright!

            card_mod:
              style:
                hui-card-features $:
                  hui-card-feature $:
                    hui-counter-actions-card-feature $:
                        ha-control-button $: |
                          .button {
                            --control-button-border-radius: var(--ha-card-border-radius);
                            opacity: 0.8 !important;
                            background: green !important;
                          }
                .: |
                  ha-tile-icon {
                    {% set count = states(config.entity)|float(-5) %}
                    --tile-color:
                      {% if count > 0 %} var(--warning-color)
                      {% else %} var(--success-color)
                      {% endif %};
                  }

the left Warnings is now modded, the right Errors is as is

both modded

or a bit more subtle with a nice sweet touch to the button icon. well, this suits for now, ill add this to the other thread on Tile features:

            card_mod:
              style:
                hui-card-features $:
                  hui-card-feature $:
                    hui-counter-actions-card-feature $:
                        ha-control-button $: |
                          {% set warning = states(config.entity)|float(-5) > 0 %}
                          .button {
                            --control-button-border-radius: var(--ha-card-border-radius);
                            --control-button-icon-color: {{'green' if not warning}};
                            opacity: 0.8 !important;
                            background: {{'var(--warning-color)' if warning}} !important;
                          }
                .: |
                  ha-tile-icon {
                    {% set warning = states(config.entity)|float(-5) > 0 %}
                    --tile-color:
                      {{'var(--warning-color)' if warning else 'var(--success-color)'}};
                  }

[maxym]

Can anyone help me with the styling of the built-in weather card?

For v2024 I modified styles to change order of temperature and weather state. It made it possible to fill the space on the right side of the weather icon with a bigger temperature, and fit the weather state below.

However, since updated to 2025.5, the weather name ‘colides’ withthe weather icon, wrapping the whole right part down.

I’ve already confirmed myself that the length of the text in the weather state causes this behaviour.

Can you help me, what to change in the styles to make the state overlap icon area?

Edit:
I resolved that by setting:
flex-flow: initial; -webkit-flex-flow: initial !important; to .content class does the job

[jmfargas]

Does anybody know how to change the background and borders in a JS file? I’m attaching the inspector screen capture:

Using card_mod it works well, but the transition is very uggly:

        card_mod:
          style: |
            ha-card {
              box-shadow: none;
              border: none;
              background-color: transparent;
              transition: none !important;
            }

Many thanks!

[jmfargas]

Dear all, after several tests I think I found a solution to add ha-card background to the JS file to avoid transitions. Below is the code that works and which I hope is correct, in case somebody would like to use it:

customElements.whenDefined('ha-card').then(() => {
  const UIElement = customElements.get('ha-card');
  const { html, css } = UIElement.prototype;
  
  const newStyle = css`
    :host {
      box-shadow: none;
      border: none;
      background-color: transparent;
    }
  `;

  const newStyles = [].concat(UIElement.styles, newStyle);
  Object.defineProperty(UIElement, 'styles',        {value: newStyles, configurable: true, enumerable: false});
  Object.defineProperty(UIElement, 'elementStyles', {value: newStyles, configurable: true, enumerable: false});
});

In my case, I added it below the previous code in the same file, and seems to work fine. BTW, not only I had to clean the browser in Windows, as suggested, but I also had to clean it in the Android App…
Many thanks.

[Ildar_Gabdullin]

Note that some not-card-belonging UI elements have ha-card - so you will face undesired styling.

[jmfargas]

Yes, I have to check whether I use some of these? Right now everything is fine…
Do you think there’s a way to call just the desired cards? I’m sorry I have no idea. I just found the solution by trial and error, because I have some trouble to find the right parameters inside Chrome inspector… ;-))

[Ildar_Gabdullin]

I do recall that at least “visibility” tab of UI editor had the ha-card element. But that was a year ago.
Perhaps it was changed, perhaps not.
Try smth like “ha-card.nameofclassofparticularcard”.

[Mariusthvdb (Marius)]

dropping my first use of type: calendar card (and a screenshot of it above a few other cards, to make clear what types of mods I am after, especially the header.)

the card is built so differently from other core cards, it was not too obvious to find the right elements, let alone the right settings for those. the header required a a lot of different manipulation from what I normally do. It also needs the margin set, because it is not the full ha-card width, and a section inside the ha-card, really odd.

And yet here I am, and it’s alright for starters.
My main ask is how to get to the section below the date and buttons for the scroll part. Currently the full calendar scrolls (obviously as that is what I set the scroll to…) but ideally I would love to touch the section below it, so the date remains in view:

      - type: calendar
        card_mod:
          style:
#             ha-full-calendar:
#               $: |
#                 .fc-list-day-text {
#                    font-size: 20px !important;
#                 }
#                 .fc-list-day-side-text {
#                    font-size: 20px !important;
#                 }
            .: |
              .header {
                background: var(--background-color-off);
                color: var(--text-color-off) !important;
                font-size: 20px !important;
                font-weight: 400 !important;
                padding: 12px !important;
                margin: 0 -8px;
              }
              ha-full-calendar {
                max-height: 250px !important;
                overflow-Y: scroll;
              }
        title: Vandaag iets in de Kalender
        initial_view: listWeek
        visibility:
          - condition: or
            conditions:
              - condition: state
                entity: calendar.afvalwijzer
                state: 'on'
              - condition: state
                entity: calendar.feest
                state: 'on'
        entities:
          - calendar.afvalwijzer
          - calendar.feest

update

think I found it, making vertical space for most 2 events, and deleting all whitespace below that:

      - type: calendar
        card_mod:
          style:
            ha-full-calendar:
              $: |
                div#calendar {
                  max-height: 250px !important;
                  overflow-Y: scroll;
                }
            .: |
              ha-card {
                box-shadow: var(--box-shadow);
              }
              .header {
                background: var(--background-color-off);
                color: var(--text-color-off) !important;
                font-size: 20px !important;
                font-weight: 400 !important;
                padding: 12px !important;
                margin: 0 -8px;
              }
              ha-full-calendar {
                max-height: 250px !important;
              }

[iona]

With the new Area Cards introduced in 2025.7, anyone know how to remove the mdi icon?

[Mariusthvdb (Marius)]

you can probably use the same card_mod as for the tile cards

did you already try that?

[jyavenard (Jean-Yves Avenard)]

Can this still be used to remove the entities search button with latest 2025.7.xx ? I’ve tried a few things but couldn’t get to remove it.

[Ildar_Gabdullin]

Suggest to ask in cardmod THEMES thread.

[derandiunddasbo (Andreas Börner)]

I am a bit lost in css selsctors right now. I’m trying to configure a visual feedback for clicking / tapping a mushroom-template-card.

The easiest way would be to use an :active pseudoclass:

type: custom:mushroom-template-card
primary: Test-Button
icon: mdi:gesture-tap
card_mod:
  style:
    .: |
      ha-card {
        transition: background-color 0.2s ease;
      }
      ha-card:active {
        background-color: rgba(0, 122, 255, 0.2);
      }

This works perfectly fine on a desktop, when clicking the element with a mouse.

But: the color change is effectively invisible on touch devices, because “tapping” makes an element only active for a fraction of a second.

So, plan B would be to replace this :active effect with a real css animation, but I can’t figure out, how to reliably trigger a css animation by clicking/tapping the element.

The only “workaround” I found so far, is to inject the animation class in a tap_action with browser_mod.javascript:

type: custom:mushroom-template-card
primary: Beispiel
icon: mdi:lightbulb
tap_action:
  action: perform-action
  perform_action: browser_mod.javascript
  data:
    code: |
      (() => {
        try {
          const container = document
            .querySelector("body > home-assistant")?.shadowRoot
            .querySelector("home-assistant-main")?.shadowRoot
            .querySelector("ha-drawer > partial-panel-resolver > ha-panel-lovelace")?.shadowRoot
            .querySelector("hui-root")?.shadowRoot
            .querySelector("#view > hui-view > hui-sections-view")?.shadowRoot
            .querySelector("div > ha-sortable > div > div > hui-section > hui-grid-section")?.shadowRoot
            .querySelector("ha-sortable > div > div:nth-child(4) > hui-card > mushroom-template-card")?.shadowRoot
            .querySelector("ha-card > mushroom-card > mushroom-state-item")?.shadowRoot
            .querySelector("div");

          if (container) {
            container.classList.add("blink-on-click");
            setTimeout(() => container.classList.remove("blink-on-click"), 600);
          } else {
            console.warn("Container nicht gefunden.");
          }
        } catch (e) {
          console.error("Fehler beim Triggern der Animation:", e);
        }
      })();
card_mod:
  style:
    mushroom-state-item$: |
      @keyframes flash-bg {
        0%   { background-color: rgba(255, 255, 0, 0.6); }
        100% { background-color: transparent; }
      }
      .blink-on-click {
        animation: flash-bg 0.6s ease-out;
      }

But apart from this javascript solution being quite cumbersome in general, I even couldn’t figure out, how to reliably select the element other than with an absolute DOM path. Thus, this is only working as long as the element stays in exactly the right place in the DOM. It even fails in edit mode because of the element then being located in a different DOM structure.

Thus, this isn’t even a viable workaround, but a proof-of-concept, that the javascript solution is working at all.

Is there any other (elegant?) solution to this problem?

And yes: I know, I could change the state of some entity in the backend for a short time with a script triggered by the tap_action, but it seems even more cumbersome to me, needing to maintain a HA entity just for a “blink” effect. Especially If I want to have this effect on a lot of mushroom-cards and don’t want to bother other Dashboard users with my blink actions.

[jyavenard (Jean-Yves Avenard)]

@Ildar_Gabdullin

Suggest to ask in cardmod THEMES thread.

Which one is it? So many card-mod threads

[Ildar_Gabdullin]

«main” threads are in “share your projects” section

[Mariusthvdb (Marius)]

@jyavenard

Which one is it? So many card-mod threads

Card-mod - Super-charge your themes!

A while ago, I created card-mod, a custom card* that lets you change various css options for other lovelace cards. Much more skilled people than I have used that to create beautiful and awesome things. Today, I’ve added theme support to card-mod. Your ordinary theme file can now be used to Give cards a flashing border Make that border only flash when a certain entity is in a certain state Make fan icons spin when they are on Change the border color of the badges at the top of the screen dep…

[LiQuid_cOOled]

@derandiunddasbo

But: the color change is effectively invisible on touch devices, because “tapping” makes an element only active for a fraction of a second.

Try this

type: custom:mushroom-template-card
primary: Test-Button
icon: mdi:gesture-tap
icon_color: orange
card_mod:
  style: |
    ha-card:active {
      transform: scale(0.90);
      transition: 0s;
      background: blue;
      opacity: 70%;
    }