🔹 Card-mod - Super-charge your themes!

[0kk0]

Nice!

i did the same thing only my script is somehow longer:

class CustomStyle {
  refs = {
    ha: null,
    main: null,
    drawer: null,
    drawer: null,
    sidebar: null,
    menu: null,
  }

  constructor() {
    try {
      this.refs.ha = document.querySelector("home-assistant")
      this.refs.main = this.refs.ha?.shadowRoot.querySelector("home-assistant-main")?.shadowRoot
      this.refs.drawer = this.refs.main?.querySelector("ha-drawer")?.shadowRoot
      this.refs.sidebar = this.refs.main?.querySelector("ha-sidebar")
      this.refs.menu = this.refs.sidebar?.shadowRoot.querySelectorAll(".menu")[0]
      this.run()
    } catch (ex) { }
  }

  run = () => {
    console.info(`%c  CUSTOM-STYLE-MODE IS LOADED  `, "color: #ff9800; font-weight: bold; background-color: black")
    setTimeout(() => {
	  try {
        this.refs.drawer.querySelector("aside").style.borderRightStyle = "unset"
	  } catch(error) { }
    }, 1)
  }
}

Promise.resolve(customElements.whenDefined("hui-view")).then(() => {
  window.customStyle = new CustomStyle()
})

[Mariusthvdb (Marius)]

I believe the latest update of Kiosk mode handles this same issue, have a look what they do?

Hide aside element when hide_sidebar is true

[th3jesta (Jesse Wisener)]

Hey, I don’t care if your script is longer! Yours works and mine doesn’t. Thanks for sharing!

[0kk0]

haha youre welcome!
pretty funny how anyoing 1px border can be haha
i used to have more custom stuff in there but after last update things changed a lot… so i was like, downgrading my customizations… so not every home assistant update i have to update also custom stuff…

[th3jesta (Jesse Wisener)]

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]

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]

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 (Jesse Wisener)]

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 (Jesse Wisener)]

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]

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

2023.4: Custom template macros, and many more new entity dialogs!

Before this release, it was possible to hide the border/separator between sidebar und main area. Think its color was defined via theme variable divider-color. Which is still in use for the other separators there [image] [image] But for the line on the right, here set in blue [image] now everything there is either hard-coded, like right border width and style or you can see with 1px set border the general background color variable, which is used everywhere. [image] So currently no way to …

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 (Jesse Wisener)]

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]

@arganto

N

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 (David)]

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]

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]

Anyone know how to add a margin to the header?

[GoodyGizmos]

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

[Mariusthvdb (Marius)]

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 (Jesse Wisener)]

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]

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 (Brad Anderson)]

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?