Really strange thing happened. I made the changes and I had to force it in themes.yaml, called the service and the slider showed up and was red. Then I just tried to change the color and it went back as it was before. Maybe I need to take a break… 
Thank you for patience!
1 Like
It showed up once I white now, then it disappeared and back as it was before. I’ll take a break and give it another try some other day…
Thank you for a very clear explanation! I’m glad I was able to visit this page as I learn more with Lovelace UI design. I’m still learning how to design my UI based on your syntaxes. 
Hi, great job !
i copied all your github repo for this beatiful lovelace ui and configure step by step the ui lovelace to adapt to my need however i met some problem about the mod_card popup card for example when i click on the card for my light it’s not returning and no pop up appears and i have not the sensor to up and down or slide my purcent of the light, the only thing is working is to turn on or turn off, any idea what i’m missing ?
Thanks for your help
Hi Matt
Merry Christmas
I’ve been spending some time update my old setup to your new way of handling it.
One thing i don’t understand is: You have removed some of your style config from you ui-lovelace.yaml, but still manage to make it look right. When I remove the same lines I get into trouble. Are you handling this styling somewhere I can’t find it?
Example from Sidebar. Ref. lines 72 to 84 in your ui-lovelace.yaml
Old way
- type: custom:hui-element
card_type: markdown
style:
{top: 5%, left: 9.1%, width: 15.5vw, height: 1px, --ha-card-background: none, --ha-card-box-shadow: none,
--primary-text-color: 'rgba(255, 255, 255, 0.9)', font-family: SF Display, font-size: 1.4vw, font-weight: 300,
letter-spacing: 0.06vw, line-height: 2.05vw, opacity: 0.75, pointer-events: none}
New way, as you new setup
- type: custom:hui-element
card_type: markdown
style:
{top: 10%, left: 9.1%}
PS. My clock will sometime not be the size I have configured it to. Do you have the same issue?
Any idea?
I works for me with the old setup, but it bugs me don’t get it
you missed class: sidebar and use custom:hui-markdown-card
- type: custom:hui-markdown-card
class: sidebar
style:
{top: 9%, left: 11.1%}
content: >
<span>{{ states('sensor.time') }}</span>
...
card-mod class in themes.yaml
.sidebar {
font-size: 1.5vw;
font-weight: 300;
opacity: 0.75;
width: 15.5vw;
height: 1px;
}
the clock is styled card-mod-card-yaml:
...
ha-markdown-element>p>span {
font-family: SF Text;
font-size: 5vw;
font-weight: 200;
margin-left: -0.3vw;
letter-spacing: -0.05vw;
}
also add “markdown fix” in ui-lovelace.yaml
# markdown fix
- type: custom:hui-element
card_type: markdown
style: {opacity: 0}
content: preload
profit
Another question @Mattias_Persson. I see you have changed some files in your browser mod custom component. Do you recommend to integrate them as well and could that be the reason for all my popups have lost the styling?
Great spotted. And great explanation. Thanks!
But still no luck, I have also changed the hui-markdown-card and both themes.yaml and markdown fix was already integrated.
title: Hjem
views:
- panel: true
path: default_view
cards:
- type: picture-elements
image: /local/background.png
elements:
# markdown fix
- type: custom:hui-element
card_type: markdown
style: {opacity: 0}
content: preload
##########################################################################
# #
# * Sidebar * #
# #
##########################################################################
- type: image
image: local/sidebar.png
tap_action:
action: none
hold_action:
action: none
style:
{top: 49.24%, left: 10.6%, width: 21.5%, pointer-events: none, border-right: '1.5px solid rgba(58,69,73,0.2)'}
#################################################
# #
# * Markdown * #
# #
#################################################
- type: custom:hui-markdown-card
class: sidebar
style:
{top: 9%, left: 11.1%}
content: >
<span>{{ states('sensor.time') }}</span>
Thanks in advance
Have you updated card-mod?
Yes, all should be fully updated.
Card-mod is 2.0.3
What exactly do you mean by this?
Is your themes.yaml actually included in configuration.yaml and have you selected the theme in the ha UI?
I was browsing your folders and spotted that there where changes in your browser_mod folder.
If I ex. look at services.yaml I have this:
command:
description: Send a command to a browser
fields:
command:
description: Command to send
example: 'navigate'
deviceID:
description: List of receiving browsers
example: '["99980b13-dabc9563", "office_computer"]'
And you have
You’re right, that was changed in the UI.
Then my main issue is the Person pop-up:
I tried to changed from yours a little, into this:
action: call-service
service: browser_mod.popup
service_data:
title: Martin
deviceID: this
style:
.: |
:host .content {
height: 675px;
}
card:
type: custom:stack-in-card
cards:
- type: entities
state_color: true
show_header_toggle: false
entities:
- entity: person.martin
secondary_info: last-changed
- type: entities
entities:
- entity: sensor.viessmann
icon: mdi:calculator
- entity: sensor.hjem_map
icon: mdi:castle
name: Hjem
- type: custom:hui-element
card_type: glance
show_state: false
style:
.: |
ha-card {
background: none;
box-shadow: none;
}
"ha-card>div>div:nth-child(1)":
$:
"state-badge":
$: |
ha-icon {
color: {{ '#3182b7' if is_state('device_tracker.martin', 'home') else '#FFFFFF20' }};
}
"ha-card>div>div:nth-child(3)":
$:
"state-badge":
$: |
ha-icon {
color: {{ '#3182b7' if is_state('device_tracker.martins_iphone_2', 'home') else '#FFFFFF20' }};
}
- type: custom:hui-element
card_type: map
class: map
entities: [device_tracker.martins_iphone_2]
default_zoom: 15
Can you spot my mistake?
browser mod is just updated in hacs, I have not changed anything in the integration.
I guess the person popup issue is related to stack-in-card 0.2.0, I downgraded to the previous version, until I have time to figure out what broke the styling
Very nice,
How do you did it with the rainforcast?
Downgraded as well. Didn’t fix it.
Unless you see something wrong, I’ll keep trying myself.
Thanks for your help 
I’ll be back again 
Right now I’m still working on getting my Velux covers up and running and I want to integrate my Nilan ventilation and Wavin floor heating.
FYI above problem with the markdown is also fixed. Found a typo after changing to hui-markdown-card
hi @Mattias_Persson and thanks for the very nice theme and inspirations!
how can i build/style the popup “close” Button outside from the Popup-Item?
And with Name?
Thanks!
You are right. I was wrong. The hard refresh was needed…
Thought frontend HACS didn’t need that.
Thanks again Matthias! For your patience and help.