And that fixed it… so much to learn… 
Thank you @Mattias_Persson!
Thank you @Mattias_Persson for sharing your config with us. Since this now supports responsive rendering, I also ventured to change my previous frontend 
I must say I like the result very much. Simple, beautiful and intuitive.
One little thing is a bit strange for me though. When I call the frontend, the clock of the sidebar is sometimes displayed large like in you Screenshots and sometimes small. No matter if I call it on the desktop or on the smartphone. Unfortunately, I have not yet found the cause. Does anyone of you also have the problem?
1 Like
Hi, it’s in the original post :
Known issues
1 Like
Hello
I have a problem with the mqtt switches.
Only one works and the other two don’t.
I suppose it is a matter of how the squad is assembled.
I’ll pass you the jams in case you see the error. I can’t really find it
Thank you
It worked when I put 3 columns.
The number of columns is used for the number of entities?
action: fire-dom-event
browser_mod:
command: popup
title: Balkong
style:
hui-grid-card:
$: |
#root {
grid-gap: 0 !important;
}
card:
type: grid
columns: 3
square: false
cards:
- type: entities
state_color: true
show_header_toggle: false
entities:
- entity: switch.cuarto_principal
secondary_info: last-changed
- entity: switch.cuarto_milena
secondary_info: last-changed
- entity: switch.cuarto_flor
secondary_info: last-changed
- entity: automation.todo
ui-lovelace.yaml
#################################################
# #
# VARDAGSRUM #
# #
#################################################
- type: grid
title: Cuartos
view_layout:
grid-area: vardagsrum
columns: 2
cards:
- type: custom:button-card
entity: switch.cuarto_principal
name: Cuarto Principal
hold_action:
!include popup/vardagsrum_balkong.yaml
template:
- base
- icon_hue
- type: custom:button-card
entity: switch.cuarto_milena
name: Cuarto Milena
hold_action:
!include popup/vardagsrum_balkong.yaml
template:
- base
- icon_hue
#- loader
switch.yaml
- platform: mqtt
name: Cuarto Milena
icon: mdi:power-socket-de
command_topic: cmnd/tecla_touch_723A/POWER
payload_on: 'ON'
payload_off: 'OFF'
availability_topic: tele/tecla_touch_723A/LWT
payload_available: Online
payload_not_available: Offline
state_topic: stat/tecla_touch_723A/POWER
qos: 0
retain: true
- platform: mqtt
name: Cuarto Principal
icon: mdi:power-socket-de
command_topic: cmnd/tecla_touch_6DFF/POWER
payload_on: 'ON'
payload_off: 'OFF'
availability_topic: tele/tecla_touch_6DFF/POWER
payload_available: Online
payload_not_available: Offline
state_topic: stat/tecla_touch_6DFF/POWER
qos: 0
retain: true
vardagsrum_balkong.yaml
action: fire-dom-event
browser_mod:
command: popup
title: Balkong
style:
hui-grid-card:
$: |
#root {
grid-gap: 0 !important;
}
card:
type: grid
columns: 1
square: false
cards:
- type: entities
state_color: true
show_header_toggle: false
entities:
- entity: switch.cuarto_principal
secondary_info: last-changed
- entity: switch.cuarto_milena
secondary_info: last-changed
- entity: switch.cuarto_flor
secondary_info: last-changed
- entity: automation.todo
Ich love your design !
Would you mind sharing your code?
It would be awesome. Thank you.
above is the git link
Every file I open amazes me. The code you wrote is impressive. I admire you for what you did and for sharing it.
1 Like
Wonderful dashboard! I am slowly translating it and tweaking for my purposes, but for some reason I can’t get the fonts to show correctly:
The font.css file and the fonts themselves are accessible through the browser if I check direct links.
When I inspect elements on the page I can see:
font-family: SF Text
for example, but the fonts are not showing.
To make it even stranger when I tried the dashboard as main one, with lovelace mode yaml, I could see the fonts.
Now I want to have some standard UI-editable dashboards as well so I use your in the following way:
lovelace:
mode: storage
resources:
[ resources listed]
dashboards:
lovelace-tablet:
mode: yaml
title: Tablet
icon: mdi:tablet-dashboard
show_in_sidebar: true
filename: ui-lovelace-tablet.yaml
Does anyone have any idea what am I missing to get the fonts to show correctly? What else to check?
try adding from the ui or rename the file to make sure it’s not cache related
@Mattias_Persson How do I find out the device name?
I have a lot of mistakes and I still don’t understand some things.
Thank you
browser_mod:
devices:
c2080cea-6627150a:
name: galaxy_tab_a
disable:
- all
I tried to read it but the language is difficult for me and there are things that I do not understand from the translation. I’ll keep trying. Thank you
browser_mod.debug
Browser_mod.debug triggered it from a service right?
Now. When you are loading browser_mod.js
The service does not appear
lovelace:
mode: yaml
resources:
[ { url: /hacsfiles/bar-card/bar-card.js, type: module },
{ url: /hacsfiles/button-card/button-card.js, type: module },
{ url: /hacsfiles/kiosk-mode/kiosk-mode.js, type: module },
{ url: /hacsfiles/light-entity-card/light-entity-card.js, type: module },
{ url: /hacsfiles/light-popup-card/light-popup-card.js, type: module },
{ url: /hacsfiles/lovelace-card-mod/card-mod.js, type: module },
{ url: /hacsfiles/lovelace-hui-element/hui-element.js, type: module },
{ url: /hacsfiles/lovelace-layout-card/layout-card.js, type: module },
{ url: /hacsfiles/lovelace-slider-entity-row/slider-entity-row.js, type: module },
{ url: /hacsfiles/lovelace-valetudo-map-card/valetudo-map-card.js, type: module },
{ url: /hacsfiles/mini-graph-card/mini-graph-card-bundle.js, type: module },
{ url: /hacsfiles/swipe-card/swipe-card.js,
Adding /local/font.css in the UI Resources seems to have done the trick! Thanks!
I’m not sure how it works, because I already had it in:
lovelace:
mode: storage
resources:
[
{ url: '/local/font.css', type: css } ]
but it works now (on all devices except my phone, so maybe now that IS cache related).
Another quirky thing is that in Firefox, after clicking on any of the 3 sidebar icons, opening a popup and closing the popup, those 3 icons shrink This happens after every click, so eventually they almost disappear. This does not happen in Chrome or iPad app, only Firefox. Similarly, there is no blurred background in Firefox, while it is in Chrome or iPad app.
The following is seen on the console when clicking those icons:
Expected media feature name but found ‘-ms-high-contrast’. 0:1:6016
Expected media feature name but found ‘-ms-high-contrast’. 0:1:6300
Expected media feature name but found ‘-ms-high-contrast’. 0:1:6339
Unknown property ‘-moz-osx-font-smoothing’. Declaration dropped. 0:1:6496
Unknown property ‘-moz-osx-font-smoothing’. Declaration dropped. 0:1:8179
Unknown property ‘backdrop-filter’. Declaration dropped. 0:5:27
Error in parsing value for ‘max-width’. Declaration dropped. 4 0
Unknown property ‘backdrop-filter’. Declaration dropped. 0:4:19
The resource at “https://ha.anarion.pl/static/fonts/roboto/Roboto-Regular.woff2” preloaded with link preload was not used within a few seconds. Make sure all attributes of the preload tag are set correctly. 0
The resource at “https://ha.anarion.pl/static/fonts/roboto/Roboto-Medium.woff2” preloaded with link preload was not used within a few seconds. Make sure all attributes of the preload tag are set correctly. 0
I suspect this:
Error in parsing value for ‘max-width’. Declaration dropped. 4
Any idea why Firefox might be losing this and the background?
backdrop-filter needs to be enabled in firefox https://caniuse.com/css-backdrop-filter
the three icons shrinking is highly peculiar 
2 Likes
I installed it but the service does not appear. These are some of all the erreres that I still have.
The browser_mode.debug service does not exist. When I type browse nothing appears
Error while executing automation automation.homeassistant_start: Unable to find service browser_mod.close_popup
15:18:55 – (ERROR) Automatización
homeassistant_start: Error executing script. Service not found for call_service at pos 2: Unable to find service browser_mod.close_popup
15:18:55 – (ERROR) Automatización
Have you checked the installation steps?
Installation instructions
-
Copy the contents of
custom_components/browser_mod/to<your config dir>/custom_components/browser_mod/. -
Add the following to your
configuration.yaml:
browser_mod:
- Restart Home Assistant
Hi.
I added it by hacs and it was saved in custom_components.
Probe copying in www/community and add the line
{url:/hacsfiles/browser_mod/browser_mod.js, type: module},
And finally copy to custom_components and add this line in configuration.yaml
resources:
- url: /browser_mod.js
type: module
What I don’t know is if you need another library or additional configuration.
Nor do I know if the errors that I drag from other things make it not work.