I’m just having a play with this - Seems great - thanks for all the work!
I’m using the following code to add styling to an entire section - which I will want in several places. I was wondering if I can use a class on all sections I want to modify, then add the styling code to the Dashboards YAML?
Hi @dcapslock, I am responding to this post. I know that there are significant changes in ha-dialog. I have one specific problem with the browser mod popup. I am unable to set dynamic widths for the popup dialog.
As popup content, I have custom:layout-card, type grid-layout. I have various column layouts for media queries. Before the update, the widths changed dynamically according to the defined var(–max-popup-column), which is set in the style for browser_mod.popup. It worked perfectly.
Currently, the width for the dialog is set fixed according to —popup-width. This variable can be changed via themes, but I would lose control over different popup layouts. Do you know how I could set different widths for layout-card?
In my existing cards using card-mod, I evaulate some items such as background-color using Jinja. Is that still supported in UIX? For example, here:
background-color: {{ 'red' if states('sensor.bermuda_f3_79_4c_5a_db_2b_area') == 'Down Back Room' else 'black' if states('sensor.bermuda_f3_79_4c_5a_db_2b_area') in ['Up Front','Office','Up Back'] else 'blue' }};
Neat, nice solution. For those reading, overall you can set --popup-width on popup style, which will set --ha-dialog-width-md, though for this case bringing the popup calc in as well needs to have this specific treatment.
Thanks for this. I’m running into an issue I could do with some help with - I am trying to create two variants for sections on my dashboard. My code only seems to be picking up the first version (.my-section-class) and ignoring the second one (.subtle-section). Any ideas?
Material You:
uix-theme: Material You
uix-grid-section: |
:host(.my-section-class) {
background: rgba(74, 74, 99, 0.35); /* translucent base */
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: 1px solid rgba(255,255,255,0.18);
border-radius: var(--ha-card-border-radius, var(--ha-border-radius-lg));
padding: 20px;
margin: 20px 0px 20px 0px;
box-shadow: 0 8px 24px rgba(0,0,0,0.25);
}
:host(.subtle-section-1) {
background: rgba(255,255,255,0.03);
border: 1px solid rgba(255,255,255,0.07);
border-radius: var(--ha-card-border-radius, var(--ha-border-radius-lg));
padding: 20px;
margin: 20px 0px 20px 0px;
}
First i wanna say; thank you very much for this new mod / uix for home assistant!!
Super awesome! It works and awesome to also have python custom plugin like to communicate also in different way with homeassistnant (frontend <> backend)
I wanna try to style home assistant uising my old cardmod theme now with uix. But i also have noticed that uix-view doesnt work but uix-view-yaml does?
This does? But it didnt when i removed all the “-yaml” parts
