The following is working in my test case. Are you able to share more of your config to see if there is something specific in your setup? Feed, other custom card in use etc.?
uix:
style: |
a.title-link {
font-size: 2em !important;
}
Thanks for the quick help. Before responding, I took a look at my indentation levels in YAML. The uix style code was sitting one level too far back. Sorry to bother, but thanks so much for the awesome extension!
Thanks for the update. Great to hear you have it working.
Any known way to break into a iframe and do something like this?
uix-panel-yaml: |
/* 1. Schritt: HA-Panel-Wrapper durchbrechen */
:host, ha-panel-iframe, iframe {
background: transparent !important;
background-color: rgba(0,0,0,0) !important;
}
/* 2. Schritt: Per '$'-Schnittstelle in das geladene Iframe einbrechen */
iframe$ : |
:root, html, body, #mass-vuetify-theme {
/* Setzt den Haupt-Hintergrund auĆer Gefecht und macht ihn unsichtbar */
--v-theme-background: transparent !important;
background: transparent !important;
background-color: rgba(0,0,0,0) !important;
}
.v-application, .v-application__wrap {
background: transparent !important;
background-color: rgba(0,0,0,0) !important;
}
Not possible as UIX is not loaded in iFrame.
I see, almost expected that. Thanks for the quick reply. Then I need to find a way to make Music Assistant tranparent another way. Like with a custom theme if possible.
UI eXtension v7.6.0 released 
Mostly UIX Forge new features. However there is one important bug fix for UIX Styling if you style theme views where styles often not applied for Home Assistant inbuilt strategy based dashboards (Home etc.).
1 Like
Hope there are some smart people around here to help me with the following.
I use uix to "add an extra button" to a mushroom card:
type: "custom:vertical-stack-in-card"
uix:
style: |
ha-card { height: 55px !important; }
cards:
- type: custom:mushroom-template-card
primary: >-
{% set light_count = (expand(state_attr('light.verlichting_voor_gebruik_op_kiosk', 'entity_id')) |
selectattr('state','eq','on') | list | count) %}
Bedien verlichting ({{ light_count }} aan)
icon: |-
{{ "mdi:lightbulb-on" if is_state('light.verlichting_voor_gebruik_op_kiosk', 'on') else "mdi:lightbulb-off" }}
icon_color: |-
{{ "orange" if is_state('light.verlichting_voor_gebruik_op_kiosk', 'on') else "grey" }}
uix:
style: |
ha-state-icon {
{{ "animation: illumination 3s infinite;" if is_state('light.verlichting_voor_gebruik_op_kiosk', 'on') }}
}
hold_action: none
tap_action: &light_popup
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: Verlichting
timeout: 20000
content:
type: vertical-stack
cards:
<<snip not relevant code block>>
- type: custom:mushroom-template-card
icon: mdi:chevron-right
uix:
style:
.: |
ha-card {
background: none;
margin-left: 310px;
top: -54px;
width: 40px;
}
tap_action: *light_popup
Sometimes the cards don't overlap/shrink properly:
Expected behavior, observed 80% of times (this time in light mode, mode does not make a difference):
Any ideas?
edit:
Same applies to the airco card, as you can see in both screenshots above.
- type: "custom:vertical-stack-in-card"
uix:
style: |
ha-card { height: 55px !important; }
cards:
- type: custom:mushroom-climate-card
entity: climate.airco_woonkamer
show_temperature_control: true
layout: horizontal
hold_action:
action: perform-action
perform_action: script.kiosk_toggle_airco
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.more_info
data:
entity: climate.airco_woonkamer
- type: custom:mushroom-template-card
icon: mdi:power
color: >-
{% if is_state('climate.airco_woonkamer', 'off') %}
{{ 'orange'
if (states('sensor.temp_sensor_7_woonkamer_temperatuur') | float(0)) < 22
else 'blue' }}
{% else %}
'red'
{% endif %}
uix:
style:
.: |
ha-card {
background: none;
margin-left: 185px;
top: -53px;
width: 50px;
}
icon_tap_action:
action: perform-action
perform_action: script.kiosk_toggle_airco
thanks for that, it makes those much more stable (also Energy. and my manual copy of that)
(had the menubar be transparent at times, not applying theming, which was a nasty thing, and had to reload those views. Now, they're way more stable. if not rock solid )
1 Like
without checking completely: do you have any particular reason to still use that vertical-stack-in-card?
As long as I can remember that always showed render issues one way or another. there's really nothing it can do, you cant do with the stock stock cards and a tiny bit of uix. Since you're using that on the custom card even, I suppose you'd be safer to migrate, making sure at least that card wont cause your trouble
btw, am I correct in understanding that second mushroom template is the power button in the first template?
if that is indeed the case, you really should try the new UIX feature of the spark, where you can place a true button in that mushroom. see Button spark - UI eXtension
Id prevent using stuff like this at anytime
Oh boy, this is going to be interesting.
Yes, that 2nd one is the power button in the first one (and analog to that, in the light card).
Admitting that I've just used uix as a drop in replacement for card-mod, so I have something new to dive into 
Thanks for the pointer. It would also allow me to get rid of the stack-in-vertical-card altogether.
1 Like
UI eXtension 7.6.1 released
UI eXtension 7.6.1 released. A small but important fix related to Home Assistant 2026.7.0. If you have format: config in an entities row, when you use visual editor to edit the row, or add a new row, UIX config for all rows will be removed. This is due to Home Assistant 2026.7.0 upgrading to time_format. UIX 7.6.1 handles this correctly and UIX config will remain.
A bonus is that when working on this I updated entities row editor patch so that if a row has a visual editor, you can keep using it even when you have UIX config. Previously you could only use YAML due to the existance of UIX config in the row.
3 Likes
Do you use theme item uix-developer-tools(-yaml)?
If so you need to prepare for upcoming change in Home Assistant 2026.8 where Developer tools will by renamed simply Tools.
You can prepare now by migrating from uix-developer-tools-yaml to uix-config-yaml. Read more in the published UIX Guide.
1 Like
Using UIX 7.6.2, Iāve been trying to tighten up the layout on some of the config pages. Currently working on /config/dashboard
I want to make the ābuttonsā less vertically large. And I figured out that some of those separate sections (in particular, the optional lists of updates and repairs) are called different things, and even structured differently, so I have to address them separately.
But the bottom few sections are all called the same thing (ha-config-navigation-list), and my settings are only having an effect on the first one (starting with āDevices & servicesā) and the other two (starting with āMatterā and āPeopleā respectively) are unaffected.
Here is what Iām working with:
"ha-config-dashboard $ ha-config-repairs $ ha-list-item-button $": | button#item { --ha-row-item-padding-block: 12px; } "ha-config-dashboard $ ha-config-updates $ ha-list-item-button $": | button#item { --ha-row-item-padding-block: 12px; } "ha-config-dashboard $ ha-config-navigation $ ha-config-navigation-list $ ha-list-item-button $": | a#item { --ha-row-item-padding-block: 12px; }
Not sure if what Iām seeing is a bug in UIX or a misunderstanding on my part of how to address Shadow DOM elements.
Suggestions welcome.
As per DOM navigation docs:
The selector chain of the queue will look for one element at a time separated by spaces or
$. For each step, only the first match will be selected. But for the final selector of the chain (i.e. in a given dictionary key) all matching elements will be selected.
So you need to break your chain so a uix-node will be placed in shadow root of ha-config-navigation and then all ha-config-navigation-list $ ha-list-item-button $ will be found. Sometimes where you need to break is dependant on load timing of the elements so it can take some trial and error on deeper targets.
"ha-config-dashboard $ ha-config-navigation $":
"ha-config-navigation-list $ ha-list-item-button $": |
a#item {
--ha-row-item-padding-block: 12px;
}
Alternatively the newer express search selector will work without needing to be concerned about the above, but may be slower as it will search deep at each shadowRoot.
"ha-config-dashboard $$ ha-list-item-button $": |
a#item {
--ha-row-item-padding-block: 12px;
}
1 Like
Wonderful! Thank you.
I was trying to modify mine to match yours, instead of copy/paste, and it took me a while to figure out why none of my changes were working. (but the express search version was working, because I did copy/paste that) I even tried splitting everything up into its own sub-selector.
My key failure with the nesting was that I left the ā|ā at the end of every selector, not just the innermost one. The fix was to make sure only the correct things were being treated as strings. Now it does what I wanted.
This has taught me something new, and reminds me to get more familiar with YAML again, as well as I should get my glasses prescription checked.
Thanks again. You have helped me reclaim some vertical space 
1 Like
UI eXtension 7.7.0 released 
UI eXtension 7.7.0 released
Check the release notes for all new features, bug fixes and miscellaneous changes.
Thanks to @Mariusthvdb for extensive testing to polish up the new features 
3 Likes
Yeey, already used to having those buttons in the heading directly going to individual more-info views
And the more-info of the weather itself of course.
Super functionally!
include_weerstation_more-info
# include_weerstation_more-info
# use UIX spark to directly open on more-info
# see https://uix.lf.technology/forge/sparks/more-info/
# contain in vertical-stack and add type: heading for clickable actions
# additionally add buttons with uix action to replicate more-info action
type: vertical-stack
uix: !include /config/dashboard/uix_mods/stack_card_gap_shadow.yaml
cards:
- type: heading
uix:
class: class-heading
heading: Weerstation
tap_action:
action: more-info
entity: weather.weer_station
badges:
- type: button
icon: mdi:chart-box-outline
tap_action:
action: fire-dom-event
uix:
action: more-info
data:
entityId: weather.weer_station
view: history
- type: button
icon: mdi:cog-outline
tap_action:
action: fire-dom-event
uix:
action: more-info
data:
entityId: weather.weer_station
view: settings
- type: button
icon: mdi:information-outline
tap_action:
action: fire-dom-event
uix:
action: more-info
data:
entityId: weather.weer_station
view: related
# - type: button
# entity: weather.weer_station
# icon: mdi:cog-outline
# tap_action:
# action: more-info
- type: custom:uix-forge
forge:
mold: card
sparks:
- type: more-info
entity: weather.weer_station
details: true
# instead of element here, use heading in vertical-stack
# element:
# title: Weerstation
# uix: !include /config/dashboard/uix_mods/card-header-forge.yaml
# for reference: actions not directly available on spark
# tap_action:
# action: more-info
# entity: weather.weer_station
1 Like
Also new UIX Guide for this. Thanks for sharing,.
2 Likes