šŸ’” UI eXtension - Add CSS styles to (almost) any part of the Home Assistant UI

Well , I want to add tooltips or a popup help in example the existing ā€œentities cardā€

now when you hover over the sensor, only the name of the entity is in de popup box.

I want to
1: add a new hover with a tooltip or
2: change the txt in the already existing tooltip

Right . So not the custom:button-card but stock entities card

Not sure but that is more than just styling….
Basically what you want is hide the existing and add a new tooltip content.

That would be a challenge indeed :wink:

For these type of cases personally I normally suggest to use custom: button-card because you can set tooltip to anything you want, including templates

Doing that on an entity in entities card is another ballpark.

Maybe best wait for Darryn to wake up :wink:

Could be an interesting option for the new template-entity-row too, which the same dev is maintaining

thanks, I also use the custom button card for it indeed, but I saw this new card-mod integration, and I thought this is it !!!

:slight_smile:

Anyway thank you for the quick answers

1 Like

Why don’t you open a FR in the Uix repo, so it surely gets tracked and answered

good idea, thanks

Another ā€œmissedā€ news, im still on ThomasL 1.4.1 , Has Darryn ā€œadoptedā€ this one 2 ?

yes, we have been toying with several options in the recent past, and because that card was also neglected, figured it might be good to update it with several options . you can find it here GitHub - Lint-Free-Technology/lovelace-template-entity-row: šŸ’” Lint Free Technology fork šŸ’” Display whatever you want in an entities card row.

The resource works wonderfully, but it’s not yet a full-fledged repo like Uix now gets. Maybe it won’t ever, as the dev has many balls in the air.
Like a fork of fold-entity-row with an up to date version :wink:

almost forgot šŸ’” auto-entities 2.0.0 available on new fork
o and Browser-mod, but you got that I believe

3 Likes

Thanks, another smooth ā€œSwapā€

1 Like

Just migrated without issue. Excellent documentation, easy to follow. Thanks!

1 Like

@dcapslock Can we have a patch for hui-dialog-edit-card, please? :pray:

Available in 5.2.0-beta.2. This was previously missed by dialog patch as the edit dialog had its own patch to bring up the brush icon.

Theme:

UIX Test:
  uix-theme: UIX Test
  uix-dialog-yaml: |
    .: |
      ha-dialog.type-dialog-edit-card {
        --card-background-color: red;
      }

Also to note that in this case templates will have access to params as per dialog patch. For edit card the params include cardConfig, sectionConfig and lovelaceConfig so it would actually be possible to apply CSS per these variables. :rocket:

1 Like

New UIX Guide…

1 Like

Following on from the request from @mupsje regarding tooltips, here is the advice given written up as a UIX guide.

3 Likes

This is just to say thank you to dcapslock for your previous support to card-mod and now for this new replacement and to Mariusthvdb for all your testing - it’s much more straightforward to install and is simple to switch from card-mod.

3 Likes

got to say, those guides are a sight for sore eyes, very nice indeed.

we might have to play around a bit more with the tags and make them truly specific, but I can see that maturing quickly!

1 Like

PRs on any aspect very welcome. :pray: Tags I think we can play with. Categories should stay once created as users will link and changing will break links.

And very nice search with Jekyll and YAT theme.

figured I’d share this, a nice improvement of my energy view

with a little (…) help I managed to set a mod on a regular badge and replace the fixed name for a templated name. Since that is the whole and sole reason I had Mushroom installed, I can now delete that.

Only difference left between the regular (on the left) and the mushroom-template (on the right) is the thousand indicator

uix:
  style:
    .: |
      :host {
        {% set netto = states(config.entity)|float(0) >= 0 %}
        {% set color = 'brown' if netto else 'var(--power-color)' %}
        --ha-card-border-width: 2px;
        --ha-card-border-color: {{color}};
        --ha-card-box-shadow: var(--box-shadow-badges);
        }

      ha-state-icon {
        color: {{'brown' if netto else 'var(--power-color)'}};
        --uix-icon:
          mdi:home-{{'import' if netto else 'export'}}-outline
      }

    ha-badge $: |
      .info:before {
        {% set netto = states(config.entity)|float(0) >= 0 %}
        content: '{{'Verbruik' if netto else 'Levering'}}';
        color: var(--secondary-text-color);
        font-size: 10px;
        font-style: normal;
        font-weight: 500;
        line-height: 10px;
        letter-spacing: 0.1px;
      }

could be a nice UIX guide…

3 Likes

I’ve red this topic multiple times. I’ve read the UIX website and the documentation there, and I still wonder what the difference is between card_mod and this.
And, why this is (supposed? to be) better than card-mod.

I really don’t grasp the difference, and I really don’t understand why this is the way to fix a certain design flaw. (No offense…)
If theming is on the agenda and important enough to HA, it just needs an extra textarea at the ā€œadd xxx-cardā€-pages, which get populated with the default CSS code and the classes/id’s of the card itself.
Fixing/a workaround for such a decision is not making it easier to theme things properly right? The real problem is that there is no serious theme system in core which allows you to override/change certain or all things inside a card/page. You could only change certain CSS variables, and nothing more than that.

Does this allow me to add/change CSS properties to all cards/pages? Or does it not?
I’m sorry if i’m a pain in the ass, but atm it’s not clear to me what this does exactly and why it does the way it is doing it.

Darryn, I thought I’d drop this here in case it’s of any use to you and\or you’re not aware of it.

I was just going through UIX docs and caught " All styles may contain jinja2 templates that will be processed by the Home Assistant backend." There is a javascript templating engine called nunjucks that mimics Jinja, and user @Nerwyn maintains an HA wrapper for it ha-nunjucks so that templating is handled in the frontend. They use it in their ridiculously configurable Universal Remote Card and it works like a charm.

Anyways implementation is out of my depth and you may have no use for it regardless, just thought I’d drop the note.

2 Likes

Nerwyn’s library is known.
just so you know, dev is considering using the template engine by Elchinet, which has comparable features.

Hope to see that introduced at some point… but wont push, as Darryn is in a lot of projects at this time.
He never sleeps because of that :wink: