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

Share your Projects! Dashboards & Frontend
9355

(caveat: I use yaml mode, and !include most of my repeating modifications in the cards, which makes edits required only in 1 spot, not all cards all over the config. If you use UI mode, that might be different and require more work.)

With that said, regarding the changes in 4.0.0 compared to 3.4.x and up, and add compatibility mode for the 3.4.0 modifications to cards:

In all honesty I believe we should not want that. As a general rule of thumb, but certainly not on card-mod. Just set a minimum version requirement, and keep 3.6.0 available for those not desiring to update.

First of all, the changes are rather minor for the user. Mostly, there require an extra $ for a few cards that actually have the header in the $.

# card-header in $
style:
  $: |
    .card-header {
       background: var(--header-background);
       font-weight: 400 !important;
       font-size: 20px !important;
       color: var(--text-color-off) !important;
       padding: 0px 12px !important;
     }
  .: |
    .card-header ha-icon-button {
      --card-mod-icon-color: var(--primary-color);
      {{'display: none' if is_state('input_boolean.hide_history_graph_link','on')}};
    }

And the classes we had set to ha-card now need to be set to :host, optionally with an additional ha-card selector.

        :host(.class-section-heading-no-color) ha-card .container {
          --ha-heading-card-title-font-size: 20px;
          --ha-heading-card-title-font-weight: 400;
          height: 48px;
          padding: 0 12px;
          box-shadow: var(--ha-card-box-shadow);
        }

but I use :host(.class-section-heading-no-color) .container {
(see also this in card-mod themes)
and it’s spot on perfect

Secondly, keeping/guarding users from changing those couple of modifications, is also keeping them from understanding and seeing what actually changed. In card-mod, but more specifically in HA stock cards. We’re seeing these in each and every release now.

Got to remember that Card-mod follows those changes, and that’s where my 3d point arises

Thirdly: it would be a maintainance burden for card-mod to keep backward compatibility, and would break at some point after all. HA changes are so frequent, users that modify their frontend looks should be aware of those changes, at all times.

Based on the above, and experience I have with 3.5.0 (retracted after 1 day 9(?) months ago, but still kept using it because of the huge advantages not requiring custom:mod-card at all any longer) and 4.0.0 from alpha 1 to current b6: it’s rock solid, and ready for release.

the changes in the shadow roots for the headers I had to do for 3.5.0 where done in under 10 minutes, so simple. Classes even less.
So no worries there. All other modifications are untouched and are drop-in.

Again:
(caveat: I use yaml mode, and !include most of my repeating modifications in the cards, which makes edits required only in 1 spot, not all cards all over the config. If you use UI mode, that might be different and require more work.)

3 Likes