🔹 Card-mod - Super-charge your themes!

th3jesta · April 12, 2023, 12:12pm

Hmmm, I spoke too soon. I am not seeing the script work. I see the CUSTOM STYLE on the console, but the line persists and I see no evidence of the style even attempting to be applied. How are you loading the .js? I suspect I may be loading it in the wrong place, which is in configuration.yaml, lcars_copy.js:

frontend:
  javascript_version: latest
  themes: !include_dir_merge_named themes
  extra_module_url:
    - /local/community/lovelace-card-mod/card-mod.js
    - /local/community/lcars-js/lcars_copy.js

0kk0 · April 12, 2023, 12:16pm

In configuration.yaml:

# Default
lovelace:
  mode: yaml
  resources:
    # version: 0.11.0
    - url: /local/modules/mini-graph-card/mini-graph-card-bundle.js
      type: module

    # version: 1.16.4
    - url: /local/modules/mini-media-player/mini-media-player-bundle.js
      type: module

    # version: 3.5.0
    - url: /local/modules/button-card/button-card.js
      type: module

    # version: 1.1
    - url: /local/modules/custom-style/custom-style.js
      type: module

    # version: 1.0
    - url: /local/modules/custom-style/custom-style.css
      type: css

Result (border is gone):

Again to test, i commented it out, and then i get:

klogg · April 12, 2023, 3:13pm

I’ve been dealing with a couple of small issues today and I just noticed I have this message in the console:

You may not be getting optimal performance out of card-mod.
See https://github.com/thomasloven/lovelace-card-mod#performance-improvements

Yet I have:

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

in configuration.yaml

Any ideas?

I’d love to be getting ‘optimal performance out of card-mod’ like everyone else.
Can’t say I’ve noticed any issues but hey, you know what it’s like…

th3jesta · April 12, 2023, 4:01pm

Thanks so much! I’ll try in lovelace as you have configured, but I also just got it working as I have it in frontend and just changed the promise from hui-view to paper-listbox instead, and it works!

th3jesta · April 12, 2023, 4:02pm

I think I saw a couple of bug reports about that. From what I can tell, it’s a false positive, or maybe just configured to tell you no matter if it’s set up or not.

arganto · April 14, 2023, 1:37pm

So same as I asked in the blog-thread as well. I really don’t like if someone adds hard-coded values.

Currently I’m lost in what is the working configuration in your case. Which file to create, place and add where?

EDIT: O.k. got it. It is working with hui-view at the moment. Thanks a lot to both of you.

EDIT2: Worked only once for some seconds. Now updated to paper-listbox as well and it is stable. Let’s see how long.

th3jesta · April 14, 2023, 7:49pm

paper-listbox has been working reliably for me, except when Cloudflare disabled development mode for my site and reinstated the old cache. Just did a cache-clear on Cloudflare and it worked after that!

0kk0 · April 16, 2023, 12:45pm

its also stable with hui-view… change is that sometimes you get cached version / clear cache / force refresh…

Ive been using my script for over a year without problems (except last update but my change worked perfectly )

DavidFW1960 · April 18, 2023, 3:17am

Someone very thoughtfully thought we should all be blessed with these stupid useless chevrons again.

I have the following theme mods:

  card-mod-theme: ios-dark-mode-blue-red-mod
  card-mod-root: |
    .edit-mode, app-header, app-toolbar, .header, .toolbar {
      background: url('/hacsfiles/themes/ios-themes-mod/homekit-bg-blue-red.jpg') !important;
    }
  header-height: 48px

I’m also not sure the background isn’t also not working at the moment. How can I get rid of the chevrons?

arganto · April 18, 2023, 6:40am

I have hided them this way:

  card-mod-root-yaml: |
    .: |
      paper-tab.iron-selected {
        color: gray;
        transition: color 0s !important;
      }
      paper-tab {
        color: gray;
        transition: color 0s !important;
      }
      ha-tabs {
        --paper-tabs-selection-bar-color: gray !important;
      }
      ::-webkit-scrollbar {
        width: 15px;
        background: var(--background-color);
      }
      ::-webkit-scrollbar-thumb {
        border-radius: var(--ha-card-border-radius);
        background: var(--ha-card-background);
      }
    ha-tabs$: |
      paper-icon-button { display: none !important; }

ofc only the second path/last css is relevant, but I wanted to leave both to prevent the question how to add that to existing settings.

StickyClient · April 19, 2023, 6:53pm

Anyone know how to add a margin to the header?

GoodyGizmos · April 20, 2023, 6:49pm

I’m not getting either (color or background) to work. Is that still working for you to change the header background color?

Mariusthvdb · April 21, 2023, 9:19am

trying to get an external url to show up as a View background using:

title: Weer
path: weer
icon: mdi:weather-partly-cloudy

theme: weather-background

and the card_mod_theme set via:

weather-background:
 card-mod-theme: weather-background
 card-mod-view: |
   horizontal-layout {
     background: url("https://www.iqair.com/air-quality-map?lat=xxxx&lng=xxxx&zoomLevel=10");
   }

does not work unfortunately. I can make this happen:

weather-background:
 card-mod-theme: weather-background
 card-mod-view: |
   horizontal-layout {
     background: url({{state_attr('camera.buienradar','entity_picture')}});
   }

though, this does Not cover the full view, and only repeats twice…

and this:

  - type: custom:hui-element
    card_type: iframe
    url: https://www.iqair.com/air-quality-map?lat=xxxx&lng=xxxx&zoomLevel=10

works ok too.

so was kind of hoping a direct url would also work. Do we have options for that too?

th3jesta · April 21, 2023, 8:59pm

I’ve managed to use a separate javascript to remove the sidebar border, thanks to @0kk0. I also took what I learned from that experience and injected button sound effects, which has been a hit with my users, except for one thing: the sounds are on all the time, and I’ve gotten my first complaint. I’m wondering if it’s possible to detect an entity state javascript so I can use that to determine if the sounds should initialize. Any ideas?

mase · April 23, 2023, 11:09am

anyone knows how to modify the app-header?

app-header-background-color: changes the background color, but i´d like to add a blurr-effect to it using this:

backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px);

BradAU · April 27, 2023, 7:01pm

I’ve updated to 2023.5.0b0 and it appears there have been more frontend changes that affect card-mod.

Since 2023.4.0 I’ve used this in my themes to get the look of my dashboards;

HomeIQ Dark:
  card-mod-theme: HomeIQ Dark
  card-mod-root: |
    .header {
      display: none;
    }
    div#view {
      margin-top: 0 !important;
    }
  card-mod-view: |
    #view {
      height: 100vh !important;
      overflow: auto;
    }

But since updating to 2023.5.0b0 setting the div#view margin to 0 isn’t working and I’m left with a blank space at the top of my screen.

Does anyone know how I can remove the space now?

GoodyGizmos · April 29, 2023, 11:00am

Try the config here:

StickyClient · May 2, 2023, 2:10pm

Anyone know how to change the background of the assist popup? This one seems to work for all popups except the assist popup.

  card-mod-more-info-yaml: |
    $: |
      .mdc-dialog .mdc-dialog__content {
        background-color: var(--primary-background-color) !important;
      }

boheme61 · May 2, 2023, 3:21pm

I have this:

           ha-card {
                  background: url({{state_attr("camera.tpc2_sd_stream","entity_picture")}});
                  background-repeat: repeat;
                  background-size: 100% 100%;

thou unfortunately 5min refresh rate , dunno how to fix that, or whether it’s the card, or dashboard update-interval to address

Mariusthvdb · May 2, 2023, 3:33pm

that is for a view?