$$ express search selector available in 7.0.0-beta.7 
Read the DOCS
Example 
type: tile
entity: light.bed_light
vertical: false
features:
- type: light-brightness
features_position: inline
uix:
style:
hui-card-features $$ ha-control-slider $: |
:host {
--control-slider-thickness: 20px !important;
}
.slider-track-bar,
.slider-track-background {
background-color: red !important;
}
Thanks to @Mariusthvdb for this suggestion.
Neat!!!
He still rocks ain’t marius?
UI eXtension 7.0.0 released
hidden for you sections footer.$$ express search selectorThanks again to @Mariusthvdb for beta testing.
For uix themes, is there a way to make a template that we can reuse?
For instance, if I have a yaml anchor in uix-card-yaml (let’s call it button) that I can reuse as much as I want in that block by calling *button.
But if I go to uix-row-yaml or anything for that matter, I cannot reuse the previous anchor and have to set it again in this new block.
Am I missing something? Or should I make this a feature request?
Each theme variable section is independent yaml (its a string which is then parsed as yaml) so each is contained and there is no global yaml scope to the theme.
You can define theme macros to provide for resusable code that way.
Do you think it would be a good idea to request this as a feature then?
As for the macros, I read on that before but maybe I’m using it wrong or can’t do it the way I’m trying. How would you suggest I use the following in the macros, then input it:
ha-button $: |
:host([appearance~="filled"]) button.button {
background: rgba(from var(--md-sys-color-secondary-container) r g b / 0.5) !important;
color: var(--md-sys-color-on-secondary-container) !important;
backdrop-filter: blur(8px);
}
What I’ve tried adding to the yaml file (suggested my Gemini) was:
uix-macros-yaml: |
buttons:
template: |
{% set uix_button = "
...insert code here...
" %}
Then I added it to the theme yaml by doing:
uix-row-yaml: |
path $ to $ card: |
{{ uix_button }}
Sorry in advance for any formatting issues. I’m on my phone and away from my computer at the moment.
No. It would not be accepted as it is not possible to achieve.
Gemini is wrong. In your case the macro needs to render text, then you use as a macro with parens (). Macros can return a non-text variable but you don’t need that. Read up about macros in the docs. Macros can also you be placed in files in custom-templates if you even wish to make this easier.
You could also have multiple macros and use together as well.
uix-macros-yaml: |
buttons:
template: |
css-selector {
--whatever: green;
}
uix-row-yaml: |
.: |
{{ buttons() }}
If you need further assistance then lets take this to a GitHub discussion.
I would like to add a background image to one specific view header.
(hui-view-header –> div class container)
Is styling views only possible through themes, or can it also be done directly?
And how could I limit this to the header on this specific view of a specific dashboard?
I tried to apply a class to be able to limit the effect to it like:
uix:
class: name-of-my-class
like it works on sections.
Any ideas how this could be solved in an elegant way? 
2 options:
To get the required theme config boilerplate, I highlighted the div.container in Browser inpsector and used uix_path($0)
📝 Boilerplate Theme YAML
my-awesome-theme:
uix-theme: my-awesome-theme
uix-view-yaml: |
"hui-sections-view $ hui-view-header $": |
div.container {
/* your styles for div */
}
Using that theme you can then set CSS styles for the background container - first generally so you can make sure that is right before applying a template to make it view specific.
UIX Test:
uix-theme: UIX Test
uix-view-yaml: |
"hui-sections-view $ hui-view-header $": |
div.container {
background: red;
border-radius: var(--ha-border-radius-lg);
}
Next, you can use a template and panel vars to only show based on your requirements. Below is a template to only show on on specific view of a dashboard.
Notes:
{# uix.debug #} which can can inpsect the template include active template panel variables Remove for productionUIX Test:
uix-theme: UIX Test
uix-view-yaml: |
"hui-sections-view $ hui-view-header $": |
{# uix.debug #}
{% set fullUrlPath = panel.fullUrlPath if 'fullUrlPath' in panel else '' %}
{% if fullUrlPath == 'dashboard-scratchpad/scratchtable' %}
div.container {
background: red;
border-radius: var(--ha-border-radius-lg);
}
{% endif %}
This opens up lots of possilities with the uix-forge background spark. Basically use uix-forge as the heading card. If you need more than one card or need badges, then use a vertical-stack, and for badges then contain them in custom:badge-horizontal-container-card. The background spark has no heading adapter (like it does for ha-card and hui-grid-section) so you will need to style the border of the background and perhaps add some padding the vertical stack to your liking.
Heading card yaml... Edited updating to match doc example
type: custom:uix-forge
forge:
mold: card
sparks:
- type: background
for: "hui-vertical-stack-card $ #root"
# camera_entity: camera.front_door
# image_entity: person.dev
# video_url: https://some.video.url/video.mp4 or media_source
# image_url: https://some.imaghe.url/image.png or media_source
background: red
class: my-heading-bg
element:
type: vertical-stack
cards:
- type: custom:badge-horizontal-container-card
badges:
- entity: light.bed_light
- entity: light.kitchen_lights
- type: markdown
content: |-
# Hello {{ user }}
Add your text here, template variables are supported ✨
text_only: true
uix:
style: |
.my-heading-bg {
border-radius: var(--ha-card-border-radius, var(--ha-border-radius-lg));;
}
#root {
padding: 10px;
}
Thank you very much!
I completely missed that reply, as I've already seen your placeholder and therefore got no notification about new replies.
Currently I'm rebuilding my dashboard and try to get rid of too many custom cards and move back to (mostly) Tile-Card and uix modding.
Went for option 1 of your reply and I'm once again a happy customer. 
Have you noticed no icon for the UIX integration?
A few weeks ago, I noticed that the icon is missing from HA Settings/repair notifications.
Darryn answered that it's an HACS issue.
But now I can see the icon is not shown in multiple places. At the same time other custom integrations installed with HACS provide their icons.
Is it really HACS issue, or something that could be verified within UIX?
With regards
Yes. Still an issue for HACS to solve. The icons you do see are those that are in the Home Assistant Brands repository before that was closed in preference of integrations proving icons natively. HACS is still using old Frontend code which relies only Brand repository only and does not use the update native Home Assistant.
In summary any integration that has not been able to be added to Brands repository will not be shown in any area where the display is being generated by HACS which includes repairs and update sensors it creates.
I hope that it clears it up for you.
Hi, I'm using uix to reduce the size of a mushroom template card.
Here is my code:
type: custom:mushroom-template-card
vertical: true
entity: sensor.volthium_energy_id_512_dc_bus_voltage
primary: "{{states(entity)}} V"
secondary: "{{states('sensor.volthium_energy_id_512_charge')}} %"
icon: mdi:car-battery
color: >-
{% if states('sensor.volthium_energy_id_512_dc_bus_voltage') | float(0) > 27
%}
green
{% elif states('sensor.volthium_energy_id_512_dc_bus_voltage') | float(0) <
25.8 %}
red
{% else %}
primary
{% endif %}
tap_action:
action: none
icon_tap_action:
action: none
uix:
style: |
ha-card {
height: 70px !important;
width: 50px !important;
border: white solid 1px !important;
}
ha-card div.container div.content {
padding: 0px;
row-gap: 0px;
}
ha-card div.container div.content ha-tile-icon {
padding: 0px;
margin: 0px;
}
ha-card div.container div.content ha-tile-info#info {
--tile-info-primary-font-size: 11px;
--tile-info-secondary-font-size: 11px;
}
ha-state-icon {
--mdc-icon-size: 18px;
}
It works well, but I need to adjust "--tile-icon-size" under ":host" in "ha-tile-icon".
How do I add it to the uix statements?
Thanks
Did you check the Dom helper? Check the docs on that to find the right element to target
Scroll down on
Thank you. Now I understand this dependency.
I think I saw the UIX icon somewhere on a screenshot, which made me believe it's possible.
Thanks for your reply.
I'm still on a learning curve.
I did use the Dom Helper (uix_path($0) when selecting ha-tile-icon in Elements of the DevTools.
It did provide a CSS Target, but when I used it, the --tile-icon-size statement didn't have any effect.
Anyway, I changed my statements and now it works.
I'm not sure why.
uix:
style: |
ha-card {
height: 60px !important;
width: 50px !important;
/*border: white solid 1px !important;*/
}
ha-card div.container div.content {
padding: 0px;
row-gap: 0px;
}
ha-tile-icon {
--tile-icon-size: 24px;
padding: 0px;
margin: 0px;
}
ha-tile-info#info {
--tile-info-primary-font-size: 11px;
--tile-info-secondary-font-size: 11px;
}
ha-state-icon {
--mdc-icon-size: 18px;
}
Thanks again.
The icon will show in Home Assistant Devices & sevices and Integration page. It just won't show in HACS generated pages/notifications.
Hmm. As you can see on the screenshot attached to my previous post, the icon is missing on Devices&Services page too. TBH I never seen it in my system. Only on some screenshot
Check if you have the icons in custom_components/uix/brand. If yes, then you not sure - perhaps caching issue 
. If no icons, then try redownloaing UIX.
Also, your screenshot shows a Configured title - not sure where that is. Can you confirm what settings page that is?
