thomasloven / lovelace-card-mod

🔹 Add CSS styles to (almost) any lovelace card
MIT License
1.05k stars 169 forks source link

3.4.0 breaks mods on card-mod-sidebar-yaml: ? #330

Closed Mariusthvdb closed 6 months ago

Mariusthvdb commented 6 months ago

As title. not sure this is caused by HA 2024.1 (Bram said nothing changed regarding to the side bar) or card mod, and if the latter, dont understand why the listed change would impact it.

hope anyone finding this can help out solving if a config error, or Author if resource error

My Home Assistant version: 2024.1.0b0

My lovelace configuration method (GUI or yaml): Yaml

What I am doing:

modding the side bar icons and adding some extra notifications, see https://community.home-assistant.io/t/card-mod-super-charge-your-themes/212176/1448?u=mariusthvdb

What I expected to happen:

icons colored and added notification

Scherm­afbeelding 2023-06-29 om 15 43 22

What happened instead:

nothing..... Minimal steps to reproduce:

add a notification under the menu title

# The least amount of code possible to reproduce my error
      .menu .title:after {
        content: "{%- set count = states('sensor.marquee_alerts')|int(default=0) %}
                  {%- set phrase = 'Alert: ' if count == 1 else 'Alerts:' -%}
                  {{'\A ' ~ phrase ~ count if count > 0 }}";
        white-space: pre;
        font-size: 12px;
        font-weight: bold;
        display: block;
        line-height: 4px;
        color: var(--alert-color);
      }
# End of code

or mods like this on menu items:

      a[data-panel='ui-overzicht'] paper-icon-item ha-icon {
        --card-mod-icon: {{'mdi:home-alert' if alerts else 'mdi:home'}};
        color: {{'var(--alert-color)' if alerts else 'green'}};
      }

Error messages from the browser console:

no errors

More-info:

Ive had issues before, see https://community.home-assistant.io/t/card-mod-super-charge-your-themes/212176/1425?u=mariusthvdb, but then the element that needed modding was changed and after doing so, these mods were rock solid on previous version.

By putting an X in the boxes ([]) below, I indicate that I:

Mariusthvdb commented 6 months ago

closing.

had to logout for another reason, and after loggin in again, all sidebar mods came back.

Never knew loggin in/out was of importance for these mods.

Mariusthvdb commented 6 months ago

sorry to have to re-open.

as it turns out, these mods constantly need a refresh cache to keep working.

not exact sure where to look, is it changing dashboards, or some other navigation, from the edit view as I just did and lost my mods.....

in any way, these mods are less then robust, as they were under the predecessor of current 3.4.0

and, no error in the log...

currently ha 2024.1.0b2

boheme61 commented 6 months ago

as it turns out, these mods constantly need a refresh cache to keep working.

I have 2 instances, and reverted from 2023.12.4 on both, and also reverted forth and back card-mod from v3.4.0 to v3.3.1 , forth and back, even to ha 2023.11.2, on my test-instance .... ,And it seems it doesn't help to clear-cache , and refresh , for me , and it's very basic "mods"

noctis-grey:
  card-mod-theme: noctis-grey
  card-mod-root: |
    .: |
      .header .toolbar .action-items {
        display: none;
      }
      .header .toolbar .main-title {
        display: none;
      }
      .header .toolbar .headerCards {
        display: flex;
        justify_content: start;
        flex-grow: 1
      }
      .header .toolbar .action-items {
        display: flex;
        flex-grow: 1;
        flex-direction: row-reverse;
      }
  card-mod-sidebar: |
      .: |
        a:hover paper-icon-item .item-text {
          color: #87bf50;
        }
        a:hover paper-icon-item {
          background: #7b7d80;
        }

So v3.4.0 don't work, on either 2023.11.2 > 2023.12.4 ... 3.3.1 works fine

thomasloven commented 6 months ago

@boheme61 Your issue (which is in no way related to the sidebar) is that you are using yaml syntax without the -yaml suffix on the theme variable.

Mariusthvdb commented 6 months ago

can confirm this to work again on sidebar in Safari too ;-) (not only in the release notes listed Chrome) thanks for the quick fix!

boheme61 commented 6 months ago

is that you are using yaml syntax without the -yaml suffix on the theme variable.

I actually had to remove that in Octobers Ha update ( as also stated in https://community.home-assistant.io/t/card-mod-super-charge-your-themes/212176/1481?u=boheme61 ), as it then "broke" current config of the Theme, so this has been working since then, i did try to add -yaml again now, to test whether it was actually 2023.12.4 which has "change" something again, but as mention, this ( my code above ) worked until v3.4.0 ... without -yaml Maybe i just didn't "flush/cleared" cache properly , when i tested before posting here ( In the end i just "re-downloaded" v3.3.1 , after several attempts to figure out what caused this )

EDIT: And i can confirm, that it now works again with v3.4.1 ( And without -yaml on either root or sidebar )

PS: I should notice that i currently initially have "viewed" changes/updates on my "Default View", and for some front-end updates this might not be the best "choice", as i have noticed "variations" on other UI added Dashboards, which are not always affected by the latest Default-View ( even thou i've checked controlled/cleared , after installation ) ... still it is "The Landing Page" , which Devs have "played" with lately ... anyway, yes it also "work again" with( or without ) -yaml added in the Theme ( My Theme atleast,, only simple changes )