If you’re already using custom button-card don’t put markdown in it, use html and js directly. The syntax is similar
custom_fields:
news: >
[[[
return `
<font color="#9c9d9d"><b>TAGESSPIEGEL</font> </b><font>
${ states['sensor.tagesspiegel'].attributes.entries[0]['title'] }
...
`;
]]]
return states['automation.auto_alarm'].state;
Im missing something, still not working. Take a look, please:
> circle_alarme:
custom_fields:
circle: >
[[[
if (1==1) {
let input = variables.circle_input,
radius = 20.5,
circumference = radius * 2 * Math.PI;
return `
<svg viewBox="0 0 50 50">
<style>
circle {
transform: rotate(-90deg);
transform-origin: 50% 50%;
stroke-dasharray: ${circumference};
}
tspan {
font-size: 10px;
}
</style>
<circle cx="25" cy="25" r="${radius}" stroke="#b2b2b2" stroke-width="1.5" fill="none" />
<text x="50%" y="54%" fill="#8d8e90" font-size="14" text-anchor="middle" alignment-baseline="middle" dominant-baseline="middle">${input}</text>
</svg>
`;
}
]]]
> alarme:
show_state: false
template:
- base
- circle_alarme
styles:
card:
- --mdc-ripple-color: >
[[[
return variables.state_alarme
? 'rgb(0, 0, 0)'
: 'rgba(255, 255, 255, 0.3)';
]]]
- color: >
[[[
return variables.state_alarme
? 'rgba(0, 0, 0, 0.6)'
: 'rgba(255, 255, 255, 0.3)';
]]]
- background-color: >
[[[
return variables.state_alarme
? 'rgba(255, 255, 255, 0.8)'
: 'rgba(115, 115, 115, 0.2)';
]]]
variables:
circle_input: >
[[[ "return states['automation.acionamento_automatico_do_alarme'].state"; ]]]
Thanks for the help @Mattias_Persson .
I dont know why, but i actually managed to work like this:
alarme:
show_state: false
template:
- base
- circle_alarme
styles:
card:
- --mdc-ripple-color: >
[[[
return variables.state_alarme
? 'rgb(0, 0, 0)'
: 'rgba(255, 255, 255, 0.3)';
]]]
- color: >
[[[
return variables.state_alarme
? 'rgba(0, 0, 0, 0.6)'
: 'rgba(255, 255, 255, 0.3)';
]]]
- background-color: >
[[[
return variables.state_alarme
? 'rgba(255, 255, 255, 0.8)'
: 'rgba(115, 115, 115, 0.2)';
]]]
circle_alarme:
custom_fields:
circle: >
[[[
if (1==1) {
let radius = 20.5,
inp = states['automation.acionamento_automatico_do_alarme'].state,
circumference = radius * 2 * Math.PI;
return `
<svg viewBox="0 0 50 50">
<style>
circle {
transform: rotate(-90deg);
transform-origin: 50% 50%;
stroke-dasharray: ${circumference};
}
tspan {
font-size: 10px;
}
</style>
<circle cx="25" cy="25" r="${radius}" stroke="#b2b2b2" stroke-width="1.5" fill="none" />
<text x="50%" y="54%" fill="#8d8e90" font-size="14" text-anchor="middle" alignment-baseline="middle" dominant-baseline="middle">${inp}</text>
</svg>
`;
}
]]]
styles:
custom_fields:
circle:
- display: initial
- width: 90%
- margin: -6% -5% 0 0
- justify-self: end
- opacity: 1```
...Ah okay, you shouldn’t quote return in circle_input
[[[ "return states['automation.acio...
Thanks for the fast answer. Sadly I’m struggling with the layout and getting all the sensor.value inside the card.
news: |
[[[
return `
<p align="left"><font color="#9c9d9d"><b>TAGESSPIEGEL</b></font>
<br>
<font>${ states['sensor.tagesspiegel'].attributes.entries[0]['title'] }</font>
<p align="left"><font color="#9c9d9d"><b>HEISE</font></b>
<br>
<font>${ states['sensor.heise'].attributes.entries[0]['title'] }</font>
<p align="left"><font color="#9c9d9d"><b>MYDEALZ</font></b>
<br>
<font>${ states['sensor.mydealz'].attributes.entries[0]['title'] }</font>
`;
]]]
Thank you very much. Working and useful!
Hello. No pop-up window opens for me. Can someone tell me what I can check? thank you
Can u help me with one more?
This card is inside the person popup. I cant figure out why the color is not setting with this code. I have tried a bunch of similar codes, none effective.
- entity: sensor.sm_g610m_battery_level
name: Bateria
icon: mdi:battery
show_state: true
card_mod:
style: |
state-badge {
color: {{ if (states['sensor.sm_g610m_battery_level'].state) < 60{
return "#000000";
}else {
return "#ffffff";
}
}};
}
You need to post some print of the error and the code you’re using, so we can help you.
I think something changed in the location of the browser_mod folder. When I check the settings it says it can’t find the integration. Locate the folder in all possible places and can not find it.
In the documentation it says that you have to configure it like this
{ url: "/local/vanilla-tilt.min.js?v=1.7.2",type: module },
{ url: "/local/my-cards.js", type: module },
{ url: "/browser_mod.js", type: module },
{ url: "/local/font.css", type: css }
This is the location that I believe is where it should now be.
\192.168.1.4\config\www\custom_components\browser_mod
Just put exactly how the manual says. Mine its a bit different, but also works:
lovelace:
mode: yaml
resources:
- url: /browser_mod.js
type: module
The error itself that its not finding the resource. Did you install by HACS or directly via download on github? Where did you put the files, if you downloaded?
this is my configuration
lovelace:
mode: yaml
resources:
[
{ url: /hacsfiles/light-entity-card/light-entity-card.js, type: module },
{ url: /hacsfiles/light-popup-card/light-popup-card.js, type: module },
{ url: /hacsfiles/button-card/button-card.js, type: module },
{ url: /hacsfiles/swipe-card/swipe-card.js, type: module },
{ url: /hacsfiles/bar-card/bar-card.js, type: module },
{ url: /hacsfiles/apexcharts-card/apexcharts-card.js, type: module },
{ url: /hacsfiles/lovelace-slider-entity-row/slider-entity-row.js, type: module },
{ url: /hacsfiles/lovelace-card-mod/card-mod.js, type: module },
{ url: /hacsfiles/lovelace-layout-card/layout-card.js, type: module },
{ url: /hacsfiles/lovelace-thermostat-dark-card/thermostat-dark-card.js, type: module },
{ url: /hacsfiles/lovelace-mushroom/mushroom.js, type: module },
{ url: /hacsfiles/kiosk-mode/kiosk-mode.js, type: module },
{ url: /hacsfiles/vertical-stack-in-card/vertical-stack-in-card.js, type: module },
{ url: /hacsfiles/lovelace-multiple-entity-row/multiple-entity-row.js, type: module },
{ url: /hacsfiles/lovelace-auto-entities/auto-entities.js, type: module },
{ url: /hacsfiles/simple-weather-card/simple-weather-card-bundle.js, type: module },
{ url: "/local/marked.min.js?v=4.0.12", type: module },
{ url: "/local/calendar-card.js?v=3.109.1", type: module },
{ url: "/local/custom_icons.js?v=28082021", type: module },
{ url: "/local/vanilla-tilt.min.js?v=1.7.2",type: module },
{ url: "/local/my-cards.js", type: module },
{ url: "/browser_mod.js", type: module },
{ url: "/local/font.css", type: css }
]
I didn’t install it from hacs because I couldn’t find it. I had it working but at one point it stopped.
Copy the folder from git hub and paste it in several places because it didn’t work in any of them. In the github integration it says that it only finds where it is located.
this is the last locate
\192.168.1.4\config\www\custom_components\browser_mod
did you have the folder “custom_componets”? put it there and restart the HA, see if it works.
The { url: “/browser_mod.js”, type: module } part looks ok.
Hi
I took the time to read most of the post, just because I appreciate the amount of effort was put into such a great UI.Congrats.
My goal is to “borrow” just a small part for my needs, but after I search in most of the files I could not find how to separate the “chapters” in my UI.
I cannot get that kind of spacing where the yellow lines are.
Is there a special “grouping” of cards, a special parameter to put a certain distance between them?
What is the simples way to accomplish that spacing?
Mine is like this (wip)
thank you
I
I
I
ps.
I had success with the “HA appdeamon” in an ipad mini, but it is too “rigid” and laggy 
how do i change the background to use the bg.png photo thats in this thread? what code do i need to change or what directory do i upload it to ?
in font.css it references /local/fonts/ and a bunch of .otf files - where are all the fonts as its not included in hass-config-master.zip
@mattias maybe you coudl zip up your entire files to make this install allot easier?
