add variable/option for item background

[Mariusthvdb]

As it stands, I believe to have migrated my complete card-mod theme to the plugin, with the exception of animations, and, subject of this Idea, the option to set a background.

see my gist for the config

consider this card_mod:

      a[data-panel='ui-overzicht'] paper-icon-item {
        {% if lek %}
          --sidebar-text-color: blue;
          background: lightblue;
          animation: blink 2.5s ease infinite;
        {% endif %}
      }

which colorize the background and text of the item.

I've been able to set the text with the already available

    text_color: >
      [[[ @partial data
          return lek ? 'blue' : 'var(--custom-sidebar-text-color)'; ]]]

but the background cant be done just yet.

please consider adding that as an option?

[elchininet]

Do you mean a background on rollover or a background in the item by default?

Having a background by default could give the wrong perception of the item being selected.

[Mariusthvdb]

I need an alert background, based n the state of an entity. As you can see in this case 'lek' or leakage, I want the background of the item to be colored.

So not on hover, I seek the option to set the regular background which has this effect:

I did try to set the style to the styles block, but havent found the correct path to the individual dashboards yet as I Doni card-mod with

a[data-panel='ui-overzicht']

that is to say, this works just as in card-mod:

  :host a[data-panel='ui-overzicht'] paper-icon-item {
      --sidebar-text-color: blue;
      background: lightblue;
      animation: blink 2.5s ease infinite;
  }
  @keyframes blink {
    50% {opacity: 0.2;}
  }

but now I want to set that based on the js template ofc, no longer the jinja from card-mod
also need to find a way to have those animations in the variables/partials and not verbosely write those in all spots

[elchininet]

Got it. That functionality is too specific to your set up. Cases like that should be solved with card-mod as you are already doing. There is nothing wrong with having some specific things in card-mod to give a personal touch, I also have mine 🙂

[Mariusthvdb]

aargh.

my whole idea was to ditch the full sidebar config in card_mod.... and leave it to the dedicated plugin, as that seems tp be more efficient, especially using that javascript.

is it really that extravagant to add 1 variable, for item background, so we can easily use those with templates (that your plugin already provides so easily)?

please reconsider.....

I can think of way more reasons to add a single background to a menu item than this alert.

btw, the styling we can set in your plugin, that is Not card_mod styling is it?

I mean, it looks identical, and behaves identically (well except for the templates inside it)

[elchininet]

my whole idea was to ditch the full sidebar config in card_mod.... and leave it to the dedicated plugin, as that seems tp be more efficient, especially using that javascript.

Just, do not ditch that part of the sidebar config from your card_mod :)
There will be always something that you would like to do to personalise your experience, and it not necessarily needs to be done with a plugin.

is it really that extravagant to add 1 variable, for item background, so we can easily use those with templates (that your plugin already provides so easily)?

Just a single option requires a lot of code at the moment, validations, extend from base, override from base, template management, tests, so it is not a single line of code. You can open a feature request with it, if it gets traction and more users request its implementation I can consider to implement it.

btw, the styling we can set in your plugin, that is Not card_mod styling is it?

No, it is not card_mod, it is just a string added at the end of the plugin styles.

I mean, it looks identical, and behaves identically (well except for the templates inside it)

That makes totally the difference 🙂, the styles option of the plugin is just a string, the card_mod styles are able to traverse the shadowDom and style things no matter what deep they are. The styles option of the plugin is not so advance.

[Mariusthvdb]

ok I get (and appreciate) your thoughts on the templates/card-mod.

however, I do feel the background option would not be eccentric, and hope you one day will reconsider.

My feeling is once you add this, people will appreciate the possibilities it gives and make wonderful use of it, especially since you already have the templates at work for the other options in the item configuration.

please allow me to keep this one open then as unresolved for now...

[elchininet]

however, I do feel the background option would not be eccentric, and hope you one day will reconsider.

@Mariusthvdb, as the option item_background_hover was introduced, it didn't have any sense not having an item_background one as for the rest of the options. So, the later has been introduced in the new version.

[Mariusthvdb]

haha somehow I knew you couldn't resist ;-)
magic, you're the best

quick test (after changing the option names, reveals that now my selection is colorized according to the icon color, where I had it to not do that before

I even had that explicitly in my comments:

selection_color: var(--sidebar-selected-icon-color) # to not colorize the full background

the new option is selection_background so using that in

selection_background: var(--sidebar-selected-icon-color) # to not colorize the full background

causes the change in behavior for me.

must see what I can do there
commenting that line seems to do nothing (or the line itself does nothing....) so definitely different behavior than before

seems to have been a cache thing, because now the background is no longer colored according to the dynamic icon_color, but shows the regular selection color

[elchininet]

haha somehow I knew you couldn't resist ;-)

Just maintaining coherence among the options. The same with notification_color_selected and notification_text_color_selected. These options don't exist in Home Assistant, but they should be there just because all the options have states for selected and hover.

seems to have been a cache thing

Yes, most probably a caching issue.

because now the background is no longer colored according to the dynamic icon_color, but shows the regular selection color

This keeps being in that way even after the renaming to selection_background, but it inherits from icon_color_selected not from icon_color.

[elchininet]

By the way, I added your gist to the documentation some days ago.

[Mariusthvdb]

By the way, I added your gist to the documentation some days ago.

o dear....
Ill try to keep it as up to date as possible...

for now I added several item_backgrounds and the hover background of course! (btw I noticed my name isnt clickable, maybe a typo of sorts?)

[Mariusthvdb]

closing as now available so resolved, thanks!

[elchininet]

btw I noticed my name isnt clickable, maybe a typo of sorts?
I also noticed it, it seems that Github doesn't add a link in usernames automatically. I can add a link by hand.