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

just as a heads up, be careful to check this out because card_mod seems broken in 2023.10.0b3

its been found in the current beta cycle, and seems to throw various results, some don’t see it, some see the header not move, and I dont see a single working card_mod being effective any longer.

Maybe chime in and report what you see in your specific config? would be helpful in debugging and ofc fixing for the author.Though the main reasons seems to have been pinpointed already

and fixed, by Thomas, so a big thanks is in order!

however, forcing me to move over from 3.1.4 (which has the changing icon in the header still functional) to the new 3.2.3.

This has another effect, namely I can no longer use my trusted mod on history-graph headers, which I used to simply set this class on:

        ha-card.class-header-margin .card-header {
          background-color: var(--background-color-off);
          font-weight: 400;
          font-size: 20px;
          color: var(--text-color-off);
          padding: 0px 12px;
          margin: 0px 0px 16px 0px;
        }

Ive been looking any the various examples here (and seem to remember a change in headers at some time, but cant find it), but I can not find the fix for this, so please could anyone help me out, how to mod the header and have it look like that again?

top is the class at work on a regular entities, below is the history-graph unmodded…

I’ve also tried the mentioned

  - type: history-graph
    title: Temperatuur - Verwarming
    card_mod:
      style:
        .: |
          .card-header {
            color: red;
            font-size: 38px;
            padding-bottom: 0px;
          }

in this thread, without succes
same goed for any of the other graph-card btw, so its a bit of a wider issue for me than this card alone, appreciate a pointer to the change/fix

this mentions the change, 🔹 Card-mod - Add css styles to any lovelace card - #3414 by Ildar_Gabdullin but I already applied that, and it doesnt work for the header

I had one spot where I took it into the shadow root with:

    card_mod:
      style:
        $: |
          .card-header {
             background-color: var(--background-color-off);
             font-weight: 400;
             font-size: 20px;
             color: var(--text-color-off);
             padding: 0px 12px;
             margin: 0px 0px 16px 0px;
           }

and that actually does set the correct background-color, but all off the other properties are untouched, resulting in

and then in dawned on me, need !important:

    card_mod:
      style:
        $: |
          .card-header {
             background-color: var(--background-color-off);
             font-weight: 400 !important;
             font-size: 20px !important;
             color: var(--text-color-off) !important;
             padding: 0px 12px !important;
             margin: 0px 0px 16px 0px !important;
           }

hardly a streamlined method, but it gets the job done. If anyone can instruct me to do it differently, please dont hold back…

leaving me with the ultimate challenge which !important cant solve either: how to change the icon of the view tab:

    paper-tab[aria-label='Beweging'] ha-icon$: |
      ha-svg-icon {
        --card-mod-icon: {{'mdi:motion-sensor' if
                           is_state('binary_sensor.motion_sensors_all','on') else
                           'mdi:motion-sensor-off'}};
        color: {{'red' if is_state('binary_sensor.motion_sensors_all','on')}};
      }

it does set the color alright, heck, it even correctly applies the condition al animation I set.
and it worked up to 3.1.4.

cant make it change the icon though anymore, no matter what I try. And that is really a bummer, because I didnt have to open a view to check the weather, or see how many people are at home. Just a glance at the tab in the menu would disclose this vital info

Can card-mod be used with the button-card HACS? I have an entity that I need word-wrap on (hense card-mod) but I also like the ease of hiding icon and name with button-card.
The color changes but the word-wrap doesn’t work bjut the card-mod wraps with a normal entity card (not button-mod)

type: custom:button-card
entity: sensor.nws_daily_summary
show_name: false
show_state: true
show_icon: false
card_mod:
  style: |
    :host {
      text-overflow: unset !important;
    }
      ha-card {
      color: red;
    }

The custom button card has its own style options. Have you tried that?

back again on this, seems that card_mod update changed something in those mods…

type: custom:mod-card
card_mod:
  style:
    tabbed-card $:
      .: |
        mwc-tab-bar {
          background: {{'var(--lovelace-background)'
                        if states('input_select.theme')|regex_search('(ight|Dark|Matrix)')
                        else 'var(--primary-color)'}};
        }
      mwc-tab:
        $:
          mwc-tab-indicator $: |
           .mdc-tab-indicator__content--underline {
              border-color: var(--text-color-off) !important;
            }

          .: |
            .mdc-tab {
              min-width: 80px;
            }
            .material-icons {
              display: contents !important;
            }

            .mdc-tab--active {
              --mdc-icon-size: {{states('input_number.active_icon_size')}}px;
              /*background: var(--text-color-off) !important;*/
            }

    .: |
      tabbed-card {
        --mdc-tab-horizontal-padding: 0px;
      }

worked just nicely before, amongst others, but now, even mentioning the

mwc-tab:

causes an error of Unhandled Promise Rejection: TypeError: Argument 1 ('target') to MutationObserver.observe must be an instance of Node in inspector:

not sure where to start, but figured since its such a specific error to tabbed cards mods, this would be the best place to begin.

Any thoughts would be appreciated!

this code runs ok:

type: custom:mod-card
card_mod:
  style:
    tabbed-card $:
      .: |
        mwc-tab-bar {
          background: {{'var(--lovelace-background)'
                        if states('input_select.theme')|regex_search('(ight|Dark|Matrix)')
                        else 'var(--primary-color)'}};
        }
#       mwc-tab:
#         $:
#           mwc-tab-indicator $: |
#            .mdc-tab-indicator__content--underline {
#               border-color: var(--text-color-off) !important;
#             }
#
#           .: |
#             .mdc-tab {
#               min-width: 80px;
#             }
#             .material-icons {
#               display: contents !important;
#             }
#
#             .mdc-tab--active {
#               --mdc-icon-size: {{states('input_number.active_icon_size')}}px;
#               /*background: var(--text-color-off) !important;*/
#             }

    .: |
      tabbed-card {
        --mdc-tab-horizontal-padding: 0px;
      }

edit/update

I had obviously missed Ildar’s note on the change format of the card_mod,

moving it all under that $ like this makes all work, and the error disappear:

card_mod:
  style:
    tabbed-card:
      $:
        .: |
          mwc-tab-bar {
            background: {{'var(--lovelace-background)'
                          if states('input_select.theme')|regex_search('(ight|Dark|Matrix)')
                          else 'var(--primary-color)'}};
          }
        mwc-tab:
          $:
            mwc-tab-indicator $: |
             .mdc-tab-indicator__content--underline {
                border-color: var(--text-color-off) !important;
              }

            .: |
              .mdc-tab {
                min-width: 80px;
              }
              .material-icons {
                display: contents !important;
              }

              .mdc-tab--active {
                --mdc-icon-size: {{states('input_number.active_icon_size')}}px;
                /*background: var(--text-color-off) !important;*/
              }

      .: |
        tabbed-card {
          --mdc-tab-horizontal-padding: 0px;
        }

Custom button-card doesn’t seem to have a word-wrap option, but I finally was able to get the visual I wanted with card-mod through a bunch of trial and error last night. Thanks.

Not explicitly, but you can inject your own CSS, similar to card-mod: injecting CSS with extra_styles.

But even with styles you just set CSS properties. All the options won’t be listed.

For example:

          styles:
            card:
              - font-size: 12px

That font-size is CSS.

or this:

Could be another CSS prop - but idea is the same: define styles for a particular element.
It may cover most of user’s needs; in other cases card-mod may be used.

1 Like

found the fix for this, see 3.2.2 does not change icon in views via card-mod-theme · Issue #268 · thomasloven/lovelace-card-mod · GitHub

I don’t know why I can’t wrap my head around figuring out how to navigate the DOM with card mod. If anybody has an ELI5 to help me out (even a link) that would be great.

In the meantime, I want to remove this blank space. I’m a very boring guy, there isn’t much on my calendar :joy:

I believe this is the culprit. When I uncheck it, the card does exactly what I want. I’m not sure why the card is set up with a minimum height in the first place, but I digress.

This is the whole calendar card source.

Gleaning from examples (incorrectly I assume), this is what I tried.

type: calendar
initial_view: listWeek
entities:
  - calendar.jazzyisj
  - calendar.household
card_mod:
  style:
    $: |
      div.calendar {
        min-height: none !important;
      }

Can someone point me in the right direction here?

https://matt8707.github.io/card-mod-helper/

how would i replace the text red here with the current value of an attribute from a sensor? The name of the template sensor is sensor.outside_average and attribute name is color.

        - type: weather-forecast
          show_current: true
          show_forecast: true
          entity: weather.home
          forecast_type: legacy
          state_color: false 
          style: |
            ha-card {
              height: 196px !important;
            }
            :host .content .info .name-state .state {
              color: red !important
            }

nothing i do seems to work, except for hardcoding the color name there.

thank you.

Show people a code which you tried to use.
Also, what is a reason of using “:host” here?

i think i have figured out the color part. its because i also have lovelace-gen. using this solves it:

            :host .content .info .name-state .state {
{% raw %}
              color: {{ states['sensor.outside_average_temperature'].attributes.color }} !important
{% endraw %}
            }

i am a css and card-mod novice. :host seemed to do the trick that’s why it’s there. love to learn about when to use :host and not.

thank you.

I am having an issue with card mod that seems to have been addressed previously in this thread, but the solution isn’t working for me.

Console error:

lovelace-card-mod.js:1  Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/html". Strict MIME type checking is enforced for module scripts per HTML spec.

Card-mod has been installed via HACS.

Resource URL: /hacsfiles/lovelace-card-mod/card-mod.js?hacstag=190927524323

config:

frontend:
  themes: !include_dir_merge_named themes
  extra_module_url:
    - /hacsfiles/lovelace-card-mod/card-mod.js

Any ideas what could be wrong?

Having issues with the formatting to hide a specific portion of a card.

image

I’ve figured out how to hide the card-header, but not having as much luck with figuring out how to hide " div class=“horizontal justified layout”
So far this is what I have but I know the bit after the first “display: none !important;” is wrong and what I could use some help on.

type: custom:more-info-card
entity: climate.thermostat
title: Home
card_mod:
  style:
    $: |
      .card-header {
        display: none !important;
      .:
        .state-card-content
          .state-card-climate
            .$
              .:
                .horizontal justified layout {
                  display: none !important;
                }

According to card-mod-helper this is the output.

"body>home-assistant$hui-dialog-edit-card$ha-dialog>div.content>div.element-preview>hui-card-preview>more-info-card$ha-card>div>state-card-content>state-card-climate$div"

Any help is appreciated

Am I the only one here for whom card-mod completely stopped working after upgrade to 2023.10?

Update card mod itself and then clear your app/browser cache.

Any reason why you dont just hide the section like this?

card_mod:
  style: |
    state-card-content {
      display: none;
    }

doing the below which i think is what you want, does not work very well to be honest.

card_mod:
  style:
    .card-content: 
      state-card-content: 
        state-climate-content$: |
          layout-horizontal {
            display: none;
          }

I don’t know why you deleted your post! Although it didn’t do exactly what I was looking for it did allow me to kinda work around it. That is the correct syntax to access the #calendar div.

Playing around with the css elements I think I figured out that the front end can’t read the size of #calendar because it’s dynamic which is why the min-height was set in the first place and why your deleted suggestion didn’t work (the div just disappears). I believe this is also why max-height property doesn’t work here.

Anyway, since there are always at least a couple of events in the calendar this basically works to get rid of the extra space for me.

card_mod:
  style:
    ha-full-calendar$: |
      #calendar {
        min-height: 300px !important;
      }

Still not quite understanding what element to start with or the significance of “$” being at the beginning or end of an element how to translate that to card_mod. I’ll keep banging my head on a wall until I figure that out.

Anway, thank you for your help, at least I got this task out of the way.