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

Mariusthvdb · December 1, 2025, 9:00am

try content: " ";

but, instead of that pseudo element, just target the

            ha-icon {
              border-radius: 50%;
              border: 0px;
              background-color: rgba(44, 44, 44, 0.5);
              padding: 2px;
            }

or, lacking a light color var (like we have in custom:button-card) use the rgb values of the actual; light

            ha-icon {
              {% set rgb = state_attr(config.entity,'rgb_color') %}
              border-radius: 50%;
              border: 0px;
              background-color: rgba({{ rgb[0] }}, {{ rgb[1] }}, {{ rgb[2] }}, 0.5);
              padding: 2px;
            }

Orange-GT3 · December 1, 2025, 9:46am

Legend, thank you. My attempt was so complicated compared to your solution!

Mariusthvdb · December 1, 2025, 1:21pm

yeah, but the card is a different beast… unfortunately really, causing serious performance issues, I filed an issue in the repo so the author is aware.
(removing it from my dashboards for now)

Forssux · December 1, 2025, 3:10pm

Hi there,

I’m rather new and struggling with a certain dashboard I would like to create to later on cast this to a Nest 2 Hub, but it should also be nice on a Pixel7 portrait,landscape and desktop mode.
I made a rather large declaration block and would like to use it once and not in every conditional card again and again.
The diameter: var(–clock-size) works because I adapted the normal analog clock

As I have several conditional cards. I would like to target these with one declaration block.

views:
  - title: Operatiekamer Lite
    path: operatiekamer-lite
    type: custom:grid-layout
    layout:
      grid-template-columns: 1fr
      grid-template-rows: 1fr
      grid-template-areas: |
        "main"
    card_mod:
      style: 
        analog-clock $: |
          canvas {
            width: var(--clock-size) !important;
            height: var(--clock-size) !important;
            --clock-size: 30dvw;
          }

    cards:
      - type: conditional
        view_layout:
          grid-area: main
        conditions:
          - entity: input_select.button_nest
            state: Clock
        card:
          type: custom:analog-clock
          hide_secondHand: false
          locale: sv-SE
          diameter: var(--clock-size)
          color_hourhand: White
          color_minutehand: White
          color_secondhand: '#e74c3c'
          color_digitaltime: White
          color_facedigits: '#a83832'
          color_ticks: White
          color_background: transparent
          dateformat: mmm dd yyyy

Can somebody tell me how to travel through 2 shadow-roots to the canvas.

Thanks for reading
Guy

scw2wi · December 3, 2025, 4:35pm

After the migration most of my card-mod is still working (thanks for this smooth transition), only in this place I am strugling how to change the code.

type: custom:auto-entities
card:
  type: entities
filter:
  include:
    - entity_id: sensor.abholtag_art*
      options:
        type: custom:template-entity-row
        image: |
          {{state_attr(config.entity,'image')}}
        name: |
          {{state_attr(config.entity,'summary')}}
        state: " "
        secondary: |
          {{state_attr(config.entity,'tage')}}
        card_mod:
          style:
            div#wrapper: |
              state-badge {
                flex: 0 0 30px !important;
                transform: scale(0.6);
                margin: -5px;
                border-radius: 0;
              }

None of these state-badge changes is working any longer, so I assume the div#wrapper should be changed, but according to the DOM, I have no idea to what I shall change it.

The reason, why I even need this change is, that the card transforms the pictures to a quare, so I need to transform it back to the rectangle they should be.

Mariusthvdb · December 3, 2025, 5:13pm

scw2wi:

        card_mod:
          style:
            div#wrapper: |
              state-badge {
                flex: 0 0 30px !important;
                transform: scale(0.6);
                margin: -5px;
                border-radius: 0;
              }

Ive just tested that modification here

      include:
        - entity_id: sensor.afvalwijzer_*
          options:
            type: custom:template-entity-row
            card_mod:
              style:
                div#wrapper: |
                  state-badge {
                    flex: 0 0 30px !important;
                    transform: scale(1.6);
                    margin: -5px;
                    border-radius: 0;
                  }
            image: >
              {% set trash = config.entity %}
              {% set type = trash.removeprefix('sensor.afvalwijzer_') %}
              /local/afvalwijzer/saver_{{type}}.png

and it works just fine?

scw2wi · December 3, 2025, 5:33pm

Thanks a lot for testing, so the problem must be somewhere else.

Update: After 1 more reboot and clearing the front end cache it’s working now.
I’m so happy about this smooth migration to the new version, big thanks to the developer.

Mariusthvdb · December 3, 2025, 6:05pm

Yes!
@dcapslock is a real magician

dcapslock · December 3, 2025, 9:17pm

Card-mod 4.1.0 released

REMINDER: If you are using HACS and Frontend extra_module_url make sure to update extra_module_url to match Dashboard resource and restart Home Assistant

New features

Apply card_mod at entities card conditional row level. i.e. row of conditional row config now accepts and applies card_mod.
Apply card_mod at picture-elemenets card conditional element level. i.e. element of conditional element config now accepts and applies card_mod.
Apply card_mod to heading badges. Closes #543

Fixes

Fix hui-card patch when element uses its own updated config e.g. custom:apexcharts-card, custom:mod-card
Don’t apply card_mod to conditional (card) and entity-filter (card/badge). Fixes #524.
Fix badge styles not applying in edit mode and possibly on other update scenarios. Fixes #539

Full Changelog: Comparing v4.0.0...v4.1.0 · thomasloven/lovelace-card-mod · GitHub

Chykan · December 4, 2025, 6:50am

I have not updated from v3.4.6 yet. One of my major issue will be ensuring my Sticky Floating Mushroom Chips Menu still works.

I would like some advice on how upgrading to v4.1.0 will affect my Navigation Menu as it is quite pivotal to the operation of my kiosks in the home.

I have a complex list of @media queries at the bottom of the card see card-mod variants

            card_mod:
              style: |
                {%- set toggle = states('input_boolean.chips_menu_toggle') %} 
                {%- if toggle == 'on' %}
                @media (orientation: portrait) and (max-width: 768px)  {
                  ha-card {
                    z-index:1;
                    position: fixed;
                    bottom: 5px;
                    left: -415px;
                    width: calc(100% + 350px);
                    background-color: transparent !important;
                    border-radius: 100px;
                    padding: 10px;
                    {{states('sensor.mushroom_chip_box_shadow')}}
                    transform: rotate(90deg);
                    transform-origin: bottom right;
                {%- elif toggle == 'off' %}
                @media (orientation: portrait) and (max-width: 768px)  {
                  ha-card {
                    z-index:1;
                    position: fixed;
                    bottom: 5px;
                    left: 5px;
                    width: calc(100% - 10px);
                    background-color: transparent !important;
                    border-radius: 100px;
                    padding: 10px;
                    {{states('sensor.mushroom_chip_box_shadow')}}
                {%- endif %}
                 }
                 }
                 @media (orientation: portrait) and (min-width: 769px)  {
                   ha-card {
                     z-index:1;
                     position: fixed;
                     bottom: 10px;
                     left: 50px;
                     width: calc(100% - 100px);
                     background-color: transparent !important;
                     border-radius: 100px;
                     padding: 10px;
                     --chip-height: 60px;
                     --chip-border-radius: 50%;
                     --chip-icon-size: 30px;
                     {{states('sensor.mushroom_chip_box_shadow')}}
                   }
                   }
                   @media (orientation: landscape) and (min-width: 1281px)  {
                     ha-card {
                       z-index:1;
                       position: fixed;
                       bottom: 5px;
                       left: 100px;
                       width: calc(100% - 200px);
                       background-color: transparent !important;
                       border-radius: 100px;
                       padding: 10px;
                       --chip-height: 55px;
                       --chip-border-radius: 50%;
                       --chip-icon-size: 30px;
                       {{states('sensor.mushroom_chip_box_shadow')}}
                     }
                     }
                     @media (orientation: landscape) and (min-height: 600px) and (max-height: 800px) and
                     (max-width: 1280px)  {
                       ha-card {
                         z-index: 1;
                         position: fixed;
                         bottom: 5px;
                         left: 50px;
                         width: calc(100% - 100px);
                         background-color: transparent !important;
                         border-radius: 100px;
                         padding: 10px;
                         --chip-height: 55px;
                         --chip-border-radius: 50%;
                         --chip-icon-size: 30px;
                         {{states('sensor.mushroom_chip_box_shadow')}}
                       }
                       }

Also card-mod applied to individual chips, through template sensors Full Card Code Here

              - type: conditional
                conditions:
                  - condition: screen
                    media_query: '(orientation: portrait) and (max-width: 768px)'
                  - condition: state
                    entity: input_boolean.chips_menu_toggle
                    state: 'on'
                chip:
                  type: template
                  tap_action:
                    action: navigate
                    navigation_path: /dashboard-bathroom/mobile
                  entity: null
                  icon: mdi:bathtub-outline
                  icon_color: white
                  card_mod:
                    style: |
                      ha-card {
                        {{states('sensor.mushroom_chip_border_1px_screen2dppx')}}
                        {{states('sensor.mushroom_chip_color_menu')}}
                      }

dcapslock · December 4, 2025, 7:02am

Your card_mod looks fine. During testing of v4 I had a test case from @Mariusthvdb of a floating menu controlled by a input_boolean, which is similar to what you have.

Chykan · December 4, 2025, 7:04am

So no changes to my current code?

dcapslock · December 4, 2025, 7:07am

None I can see on a quick glance.

Chykan · December 4, 2025, 7:10am

I will do the update and see if anything else breaks. I currently have the time and patience for small fixes but that menu is a monster. I have noted @Mariusthvdb posts in multiple threads most of what I have should work or he has a fix.

I will report back if I have any troubles.

Chykan · December 4, 2025, 7:37am

Everything else seems to be functioning fine except My Watchman Report Card (markdown) has lost its scroll overflow and has a giant logo?

type: markdown
entity_id: sensor.watchman_missing_entities
card_size: 6
card_mod:
  style: |
    ha-card.type-markdown {
      max-height: 450px;
      overflow-y: auto;
      padding: 0px;
    }
content: >-
  <h2 style="margin:2px 0;"><img
  src="https://brands.home-assistant.io/watchman/dark_logo.png" alt="WM Logo"
  width="32" height="32"> Watchman report</h2> <h3 style="margin:2px 0 6px
  0;">Missing Entities: {{ states('sensor.watchman_missing_entities') }}</h3>

  {% set items = state_attr('sensor.watchman_missing_entities','entities') |
  default([], true) %}

  {% for item in items | sort(attribute='id') -%} <hr style="margin:6px
  0;border:none;border-top:1px solid
  var(--divider-color,rgba(255,255,255,.2));opacity:.35;">

  {% set raw_occs = item.occurrences | default([], true) %} {% set occs =
  raw_occs if (raw_occs is iterable and not (raw_occs is string)) else
  [raw_occs] %} {% set occ0 = (occs[0] | string) %} {% set f0 =
  occ0.rsplit('/',1)[-1] %} {% set fname0 = f0.rsplit(':',1)[0] %} {% set line0
  = f0.rsplit(':',1) | last %} {% set state_txt = item.state |
  default('unknown') %}

  <span
  style="display:flex;align-items:center;gap:6px;line-height:1.1;margin:2px 0;">
    <ha-icon style="--mdc-icon-size:18px;vertical-align:middle;"
             icon="{{ 'mdi:cloud-alert' if item.state == 'missing'
                      else 'mdi:cloud-off-outline' if item.state == 'unavail'
                      else 'mdi:cloud-question' }}"></ha-icon>
    <span>{{ item.id }}</span>
  </span>

  <div
  style="display:flex;align-items:baseline;gap:8px;white-space:nowrap;width:100%;box-sizing:border-box;line-height:1.1;margin:2px
  0;">
    <span style="font-family:monospace;flex:0 0 auto;">{% if line0|int(0) > 0 %}Line {{ line0 }} : {% endif %}</span>
    <span style="font-family:monospace;flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;">
      <a title="{{ occ0 }}" style="font-family:inherit;color:inherit;text-decoration:underline;text-underline-offset:2px;">{{ fname0 }} </a>
    </span>
    <strong style="flex:0 0 auto;color:#fff;">[{{ state_txt }}]</strong>
  </div>

  {% for o in occs[1:] -%} {% set s = (o|string) %} {% set f =
  s.rsplit('/',1)[-1] %} {% set fn = f.rsplit(':',1)[0] %} {% set ln =
  f.rsplit(':',1) | last %} <div
  style="display:flex;align-items:baseline;gap:8px;white-space:nowrap;width:100%;box-sizing:border-box;line-height:1.1;margin:2px
  0;">
    <span style="font-family:monospace;flex:0 0 auto;">{% if ln|int(0) > 0 %}Line {{ ln }} : {% endif %}</span>
    <span style="font-family:monospace;flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;">
      <a title="{{ s }}" style="font-family:inherit;color:inherit;text-decoration:underline;text-underline-offset:2px;">{{ fn }} </a>
    </span>
    <span style="flex:0 0 auto;visibility:hidden;">[{{ state_txt }}]</span>
  </div> {%- endfor %} {%- endfor %}

dcapslock · December 4, 2025, 7:46am

Update this to :host(.type-markdown) ha-card {

Also note that there are markdown issues related to Frontend itself, including issues with editing markdown card with card_mod and possible non application of card_mord. See [Bug]: Styles don't apply for markdown in editor view. · Issue #549 · thomasloven/lovelace-card-mod · GitHub.

The fix in Frontend is a one charater nullish check ‘?’.

Chykan · December 4, 2025, 8:33am

Scroll bar is back but still a huge logo, may be related to the bug you posted.

@dcapslock Thanks for all your work on this and also to @Mariusthvdb and @LiQuid_cOOled for the testing I have seen.

Seemless transition on my instance thank you.

dcapslock · December 4, 2025, 9:52am

My comment on PR that broke this was picked up and fix included in PR to also fix other things broken like <details></details>. It has also been tagged as 2025.12 milestone so hopefully will be included in next 2025.12 patch release.

dcapslock · December 4, 2025, 10:01am

The recent markdown changes have updated styles for img such that they are now height and width auto and max-width 100%. See Add markdown support for assist messages (#27957) · home-assistant/frontend@4a90331 · GitHub. I suppose this would be suitable for a Frontend issue if you wish to get prior 2025.12 img styling.

So your options are to resize, or to as you only have one image, use card_mod to style image. If you use card_mod you will need to convert to yaml selectors as you need to get to the shadowRoot of ha-markdown, using the self selector .: for your current styles.

card_mod:
  style:
    .: |
      currentStyles {
      }
    ha-markdown $:
      img {
        height: 32px !important;
      }

EDIT: I have popped in a short query on the 2025.12 thread. You can jump in on it with your thoughts.

Chykan · December 4, 2025, 12:16pm

Yep just looked at the markdown code. I try to do as little as possible with card-mod due to it loading last and making dashboards feel laggy.
Natively being able to adjust within the card is always the preferred option, I spent a lot of time de-card-modding as much of my configuration as I could, to bring back some snappiness.

Will leave my thoughts. Adjusting the width and height in my code above changes nothing.