Nope I did not see that complete solution. Time for some tinkering 
Thanks for all the help ^^
EDIT: And this even made my Sidebar even nicer. (At least in my opinion ^^)
3 Likes
Great to see you got there. I am always amazed by the setups users have.
1 Like
UI eXtension 6.1.0 release - all forge and sparks!
UI eXtension 6.1.0 released. 6.1.0 mostly has features and fixes for UIX Forge, adding many new Sparks.
Read all about it on the new forum thread for UIX Forge
5 Likes
Hello !
Iām trying to add tooltips (which is an awesome feature by the way!) using auto-entities
Iām on the latest version of UIX (6.1.0), and auto-entities (2.2.0)
I try the code on a single tile card, and itās working perfectly, but using the following code with auto-entities, I get uix-forge: unexpected config key entity and my cards are not displayed.
type: custom:auto-entities
filter:
include:
- options:
type: custom:uix-forge
forge:
mold: card
sparks:
- type: tooltip
for: hui-tile-card $ ha-card
content: >-
{{ state_attr(config.element.entity, 'friendly_name') }} is
{{ states(config.element.entity) }}
element:
type: tile
entity: this.entity_id
domain: light
exclude: []
card:
square: false
type: grid
show_empty: true
card_param: cards
I also try :
type: custom:uix-forge
forge:
mold: card
sparks:
- type: tooltip
for: hui-tile-card $ ha-card
content: >-
{{ state_attr(config.element.entity, 'friendly_name') }} is {{
states(config.element.entity) }}
element:
type: custom:auto-entities
filter:
include:
- options:
type: tile
entity: this.entity_id
domain: light
exclude: []
card:
square: false
type: grid
show_empty: true
card_param: cards
with this configuration I can see my card, but no tooltips are shownā¦
(and still no tooltips if use a non template content like ātest tooltipsā)
not sure if itās a bug or I am doing something wrongā¦
The latest 6.2.0 beta allows to use UIX Forge with auto-entities.
The for here would not match any target as the auto-entities card is in the path to target. Once you have forged an element you can use uix_forge_path() helper to find the path to the target element.
I did update to v6.2.0-beta.5 but I still get the uix-forge: unexpected config key entity error
OK. I see there is forge needs to accept entity from the options. However, you are also setting in element. So what will happen is that entity from element will take precedent from enity coming from the include. I will add this to the next beta.
@Kourai v6.2.0-beta.6 available with support for accepting enity. Note: You need to specifically include in element due to internals of how Forge works, but I see you have done that.
2 Likes
Sorry to go on your nerves againā¦ I found a little problem I tried to fix with way too many variants of :. :host and somethings with $: and stillā¦
Out of whatever reason this one is not colored anymore. The theme did not change since 2 days ago and this one was there from beginning as it seemsā¦ I know its in here:
document.querySelector(ābody > home-assistantā).shadowRoot.querySelector(āhome-assistant-mainā).shadowRoot.querySelector(āha-drawer > partial-panel-resolver > ha-panel-config > ha-config-dashboardā).shadowRoot.querySelector(āha-top-app-bar-fixedā).shadowRoot.querySelector(āheaderā)
and as such I tried stuff like this:
uix-top-app-bar-fixed: |
:host {
background-color: "rgba(20, 26, 50, 0.58)" !important;
}
:header {
background-color: "rgba(20, 26, 50, 0.58)" !important;
}
:$ {
background-color: "rgba(20, 26, 50, 0.58)" !important;
}
And many moreā¦ all of them do absolutely nothing though. What is the right way to go here?
uix-top-app-bar-fixed: |
:host {
--app-header-background-color: rgba(20, 26, 50, 0.58) !important;
}
or
uix-top-app-bar-fixed: |
:host header {
background-color: rgba(20, 26, 50, 0.58) !important;
}
It does not change anything hereā¦ I wonder why though. Itās as alwaysā¦ I have a variable in dev console and switching it off does change the part I wanna change. But whatever I/we try does not even show up anywhere. I did update the themes via action, refreshed and even chnaged the theme a bit around. Nothing changes.
Sorry, thatās the wrong selector. The correct one is this.
I think we are talking about something different here? I am talking about the completely transparent top bar i put some red lines into in my image. Nothing changes there with your code andā¦ what is this &config_header ?
this var --app-header-background-color Itās used for the headerās background-color, specifically for the entire top bar. As you can see in my screenshot, itās transparent, I just added a blur backdrop-filter.
Yeah I know that itās for that. I am just wondering why nothing really seems to reach it in my theme. Maybe I am killing the result with my other stuff?
app-header-background-color: 'transparent
This is a āmain-themeā color , no need for uix
For other items in Main-Header use ārootā
uix-root: |
.: |
.header .toolbar .action-items {
display: none;
}
.header .toolbar .main-title {
display: none;
}
.header .toolbar .action-items {
display: flex;
flex-grow: 1;
flex-direction: row-reverse;
}
OK, I think I found the culprit. At least now the config page has a top bar again. Now lets see if I can use that new knowledge for the others like cloud config page etc. If I do I will of course tell you what stupidity was the problem ^^
@boheme61 I know that color. Itās declared as a color in my theme, but something decided to overwrite it with transparent.
Thanks a Lot !
UIX 6.2.0-beta 6 and auto-entities now work perfectly with each other !
Iām gonna put some tooltips everywhere now !
1 Like
which is the final and working yaml you use now?
My first post was just an exemple to try to figure it out !
So my final working is using badges to show some scene (actually script) I use !
type: custom:auto-entities
filter:
include:
- options:
type: custom:uix-forge
forge:
mold: badge
sparks:
- type: tooltip
for: hui-entity-badge $ ha-badge
content: <b>{{state_attr(config.element.entity, 'friendly_name')}}</b>
element:
type: custom:hui-entity-badge
show_name: false
show_state: false
show_icon: true
entity: this.entity_id
tap_action:
action: perform-action
perform_action: this.entity_id
target: {}
data:
where_to: Grand PiĆØce
transition: 0
uix:
style:
ha-badge $: |
.badge {
--ha-badge-size: 38px;
--ha-badge-border-radius: 50%;
background: {{state_attr(config.entity, 'gradient')}} !important;
--badge-color: {{state_attr(config.entity, 'text_color')}};
}
domain: script
label:
label: scene_other
active_choice: label
sort:
method: friendly_name
exclude:
- options: {}
label:
custom: Hidden
active_choice: custom
- options: {}
hidden_by: user
- options: {}
label:
label: lights_24h_scene
active_choice: label
show_empty: true
card_param: badges
card:
type: custom:badge-horizontal-container-card
badges_wrap: wrap
badges_align: left
uix:
style: |
.badges {
margin-top: 16px !important;
}
sort:
reverse: false
grid_options:
columns: 24
rows: auto
5 Likes
Neat. I like that you are forging badges in a custom badge container using auto-entities. Perhaps you can write a UIX Guide. It really does not take much.