I’m actually working on this. I’ve been away from home assistant for a couple of months and a lot of stuff stopped working so I’m starting new and css gridding everything, also reworking some button card logic. If time allows it I’ll push the changes in a week or two.
6 Likes
Hello there again,
I don’t get the “new” fire-dom-event to work.
I updated everything (e.g. Picture elements card), cleared my cache, restarted but the Popups (e.g. for a dimmer-light) just work, when I change “fire-dom-event” to “more info”. But this opens the typically HA-Design-Popups and they don’t look that good.
What can I do? Do you need any more information to help me?
Thank you very much in advance!
Best regards!
Did you find a solution please, I want my alarm panel to show the full word under the icon without the coloured background, e.g Armed Home, Armed Away etc.
That sounds awesome Mattias, thanks for sharing - then I will spend my effort on other stuff.
Let me know if you need any assistance or testing.
// Mikkel
I have two dashboards in my lovelace:
dashboards:
lovelace-ipad:
mode: yaml
filename: ui-lovelace-ipad.yaml
title: iPad
icon: mdi:tablet-dashboard
show_in_sidebar: true
require_admin: true
lovelace-admin:
mode: yaml
filename: ui-lovelace-admin.yaml
title: Admin
icon: mdi:atom
show_in_sidebar: true
require_admin: true
lovelace-admin - standart
lovelace-ipad with :
kiosk_mode:
kiosk: true
and
panel: true
And i have custom themes with backdrop-filter:
card-mod-more-info-yaml: |
$: |
.mdc-dialog {
backdrop-filter: blur(7px);
-webkit-backdrop-filter: blur(7px);
background: rgba(0,0,0,0.25);
}
.mdc-dialog .mdc-dialog__container .mdc-dialog__surface {
background: none !important;
box-shadow: none;
border-radius: 0px;
}
ha-header-bar:
$: |
.mdc-top-app-bar {
background: none !important;
}
In lovelace-admin everything works as it should ( -webkit-backdrop-filter it works):
In lovelace-ipad not works:
I ask for help. What could be the problem?
1 Like
it’s live! https://community.home-assistant.io/t/a-different-take-on-designing-a-lovelace-ui/162594#june-2021
8 Likes
Brah! Considering this for real now! Would help me out so much lol!
1 Like
I don’t understand how to use this design ?
Excuse i’m new on ha/lovelace
I used the card mod helper tool in an attempt to style an icon I have been having trouble with. It is the icon in an auto entities card. I would like to have the icon white instead of blue. The blue comes from my theme.
Using the card mod helper tool I used this
document.querySelector("body > home-assistant").shadowRoot.querySelector("home-assistant-main").shadowRoot.querySelector("app-drawer-layout > partial-panel-resolver > ha-panel-lovelace").shadowRoot.querySelector("hui-root").shadowRoot.querySelector("#view > hui-view > vertical-layout").shadowRoot.querySelector("#columns > div > auto-entities > hui-entities-card").shadowRoot.querySelector("#states > div > hui-text-entity-row").shadowRoot.querySelector("hui-generic-entity-row").shadowRoot.querySelector("state-badge").shadowRoot.querySelector("ha-icon").shadowRoot.querySelector("ha-svg-icon")
and it helped me with this
"#view>hui-view>vertical-layout$#columns>div>auto-entities>hui-entities-card$#states>div>hui-text-entity-row$hui-generic-entity-row$state-badge$ha-icon$ha-svg-icon"
The thing is I have no idea how to get this into my current style which is this
type: custom:auto-entities
card:
type: entities
state_color: true
card_mod:
style: |
ha-card {
--ha-card-background: red;
color: white;
font-family: MyFont;
line-height: 2.2;
}
:host {
--mdc-icon-size: 40px;
font-size: 2vw;
}
Any advice?
Thanks!!
And a big THANK YOU for making the card-mod-helper tool!!
1 Like
So it’s for styling from themes, for cards read it backwards until you see your card, in this case hui-entities-card.
style:
"#states>div>hui-text-entity-row$hui-generic-entity-row$state-badge$ha-icon$ha-svg-icon": |
ha-svg-icon {
color: white;
}
or condensed
style:
"hui-text-entity-row$hui-generic-entity-row$state-badge": |
state-badge {
color: white;
}
or just use card mod variable lol
style:
.: |
ha-card {
--card-mod-icon-color: white;
}
Hello there 
Is it possible to integrate roller shutters in a custom button card?
If I don’t use “YAML-MODE” and start a new dashboard, I can add my shutters with a simple type “Entities” and it gets me a card, where I can move up, down and stop the shutters.
Do you have any idea, how to achieve that in a custom button card (which is in a picture elements card)?
I used so much of your code, but I dont know how to integrate the shutters (I dont want a “press and hold” action → that already works. I do want to have two arrows for up / down or just a button).
Thank you in advance!
Best regards!
I don’t know, can’t you just call the service or let a script handle it?
This is probably what you should do
button tap action → popup → shutters card
You’re probably going mental with all the people tagging you @Mattias_Persson , we just can’t help it asking talented people for help neh? XD
I have a question. Is it possible (now with the new grid-layout) to easily adapt the code to certain screen aspects/resolutions? I tried playing a bit with grid-template-columns: repeat(4, 1fr) 0 changing the 4 to 6 etc. It helps a bit, but obviously far from ideal. It cuts information (like the corona text at the bottom) width is too much
I know this has been asked a couple of times, maybe some examples so I can write you a wiki for your page while I’m at it. So people can refer to that instead.
This example is on a retina display (2880 × 1800) lol, buttons are huge dawg!
Forgot to mention in the update post, I used this to https://grid.layoutit.com/ to visualise!
corona is intentionally cut of if it doesn’t fit
themes.yaml overflow: hidden; and white-space: nowrap;
EDIT
custom-layout-card-padding in themes can also be increased for smaller buttons
3 Likes
Nice, it has taught me enough to play with the config. Looking better already! Changing some font sizes now. A tidy bit large on that too. Sad part is that if i lower the vw value, it also changes on mobile font size. I need to figure out how to only change font size for the default view. Mobile should have other font sizes.
I think this should work. Defining a min and max value to have it look good on any kind of screen size.
update: that did the trick
markdown-sidebar-font-size: min(max(16px, 1.1vw), 1.5vw)
If you’re using (or intend to do so) layout-card, you can set special media queries for all kinds of things, like mobile or desktop.
Take a look here:
And then me
