i found a solution for my header issue if someone else want to update there theme
card-mod-root: |
.header {
display: none;
}
#view {
margin: 0 !important;
height: 100% !important;
}
1 Like
In my LCARS theme, I have managed to squash all but one remaining bug introduced by HA 2023.4.x, and that is the border on the right side of the sidebar:
As you can see, it takes its toll on the overall aesthetic of the theme. The problem is, the CSS for this border is pretty high up in the DOM, unreachable by Card-mod as far as I can tell:
I can change the color of
--mdc-theme-surface to match its surroundings, but due to the size of the border, it still leaves a semi-transparent seam, and the line is still visible down the rest of the sidebar beneath the radius. Iām attempting to include my own .js file to get at the UI directly, which loads, but the first shadowRoot element always turns up null causing the script to fail. I havenāt been able to find a solution to it, though I assume itās because the script loads before any shadow DOM elements load, and I havenāt found a way to make it wait until the shadow elements load. Below is my .js file.
document.querySelector("body > home-assistant")
.shadowRoot.querySelector("home-assistant-main")
.shadowRoot.querySelector("ha-drawer")
.shadowRoot.querySelector("aside")
.querySelector(".mdc-drawer")
.style.borderRightStyle = 'unset';
I like the idea of fixing this with .js, as I have been planning on doing more with JS to add extra features like sound effects to the theme. Any ideas are welcome.
1 Like
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()
})
1 Like
I believe the latest update of Kiosk mode handles this same issue, have a look what they do?
1 Like
Hey, I donāt care if your script is longer! Yours works and mine doesnāt. Thanks for sharing!
1 Like
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ā¦
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
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:
1 Like
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ā¦
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!
1 Like
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.
1 Like
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.
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!
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 
)
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?
1 Like
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.
2 Likes
Anyone know how to add a margin to the header?
Iām not getting either (color or background) to work. Is that still working for you to change the header background color?
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?
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?