Hello @Mattias_Persson . I have a long time problem that I can’t solve. I have some custom stuff and I can’t replace all the files. The problem is that when the song name is long it exceeds the limits of the image. What could I look at or change? thank you
i think you must look at the function marquee in the button_card_templates.yaml under conditional_media: → state_display
function marquee() {
let state = elt.getElementById("state"),
container = elt.getElementById("container");
if (state && container) {
state.innerHTML = output;
let ro = new ResizeObserver(entries => {
let spacer = " ".repeat(3),
s = entries[0],
c = entries[1],
r = s && s.contentRect &&
c && c.contentRect &&
s.contentRect.width !== 0 &&
c.contentRect.width !== 0;
if (r && s.contentRect.width < c.contentRect.width) {
state.classList.remove("marquee");
}
else if (r && s.contentRect.width >= c.contentRect.width) {
state.innerHTML = `${output} ${spacer} ${output} ${spacer} `;
state.classList.add("marquee");
}
});
ro.observe(state);
ro.observe(container);
}
}
return output;
}
return variables.translate_unknown;
but when you use the code from mattias then he scrolls.
@Mattias_Persson
is it possible to hide the names in the footer on phones?
cause it’s not implemented as a custom field, I couldn’t hide it by extra_styles.
Thanks in advance.
I have an iPhone 13 mini, and with icon and name the footer looks too cramped.
I keep getting the error: Custom element doesn’t exist: apexcharts-card.
Anyone knows how to fix this?
HI,
try this in your Config.yaml:
lovelace:
mode: yaml
resources:
[
{ url: /hacsfiles/atomic-calendar-revive/atomic-calendar-revive.js, type: module },
{ url: /hacsfiles/flex-table-card/flex-table-card.js, type: module },
{ url: /hacsfiles/hass-shutter-card/hass-shutter-card.js, type: module },
{ url: /hacsfiles/thermostat-popup-card/thermostat-popup-card.js, type: module },
{ url: /hacsfiles/simple-weather-card/simple-weather-card-bundle.js, type: module },
{ url: /local/decluttering-card.js, type: module },
{ url: /local/apexcharts-card.js, type: module },
{ url: /local/buien-rain-card.js, type: module },
{ url: '/local/calendar-card.js?v=3.109.1', type: module },
{ url: '/local/custom-lovelace/weather-card/weather-card.js', type: module },
{ url: '/local/custom_icons.js?v=28082021', type: module },
{ url: '/local/marked.min.js?v=4.0.12', type: module },
{ url: '/local/vanilla-tilt.min.js?v=1.7.2', type: module },
{ url: /local/font.css, type: css} ]
and copy apexcharts-card.js directly in your local folder (www)
You shouldn’t have to use local, let hacs handle it that’s what it’s for
@henkkeumus Ask why it’s not working in the correct thread ApexCharts card - A highly customizable graph card
make a backup of your button_card_templates.yaml and use mine, then add your custom stuff back in, or use “compare” in vscode alternatively diffchecker.
maybe slightly different paths? test with Good idea. Thank you
Bingo 
that did it works perfect now
Thanks for the hint.
It’s working perfectly on phone.
But is it possible to depend on the screen resolution? cause if in browser windows obviously it’s not working.
name: |
[[[
if (window.navigator.userAgent.match(/iPhone/i)) {
return '<ha-icon icon="mdi:nas"></ha-icon>';
}
else {
return '<ha-icon icon="mdi:nas"></ha-icon>NAS';}
]]]
/* phone */
@media screen and (max-width: 800px) {
.footer-title {
display: none;
}
<ha-icon ...></ha-icon> <span class="footer-title">Hello</span>
1 Like
Thanks a lot! works like a charm.
Do you have any idea how to make an animation of switching two icons so that they display alternately and make a heating animation ?
https://community.home-assistant.io/t/a-different-take-on-designing-a-lovelace-ui/162594/1820
That’s harder. I’d go with morphing. There’s also filters and maybe masking?
2 Likes
I have a special one. I need some help with changing a value inside:
document.querySelector(“body > home-assistant”).shadowRoot.querySelector(“home-assistant-main”).shadowRoot.querySelector("#drawer").shadowRoot.querySelector(“style”)
More pecisely there is a :host([persistent]) with a width value. This I need to change to 0 or wipe the whole value off existence. Both would be fine. What for? I want to make the sidebar transparent and managed to get 90% of all the layers transparent, except this one value… If I disable it in dev tools I get what I am looking for.
Here my theme modding: yourname_card_mod/yourname_cardmod.yaml at a8d8a02786e94a7ea8ad7d0b674da819cb1e3965 · dreimer1986/yourname_card_mod · GitHub
As you can see I tried to get :host([persistent]) changed, but I think I took things too easy ^^ That shadow root is making my brain spin counter clockwise!
I already opened a issue on GitHub, but somehow I think this is my mistake, so I try my luck here. If you wanna see what I am up to with some pics to understand my aesthetical urge to get this done (:P): Transparency for Sidebar · Issue #198 · thomasloven/lovelace-card-mod · GitHub
I don’t think you can edit app-drawer with card-mod. It’s too far up the element tree.
You could do something like this
resources:
- url: '/local/mysidebar.js?v=1'
type: module
const style = document.createElement('style');
style.innerHTML = `
#contentContainer {
background-color: transparent !important;
}
`;
document.querySelector("body > home-assistant").shadowRoot.querySelector("home-assistant-main").shadowRoot.querySelector("#drawer").shadowRoot.appendChild(style);
Is there a reason why u go on the beta version?
Nope, curiosity? 
1 Like