🔹 Card-mod - Add css styles to any lovelace card

thomasloven · October 8, 2020, 9:07pm

I’m aware. It cannot be implemented in the same way anymore. I’ll try to come up with something more useful.

KTibow · October 8, 2020, 9:09pm

Thanks for letting me know that you can do this with the latest release. Is legacy syntax still supported?

thomasloven · October 8, 2020, 9:10pm

Yes

pepe59 · October 8, 2020, 9:12pm

Works. thank you

DavidFW1960 · October 8, 2020, 10:30pm

ok this is driving me crazy.

I want to change the icon colour IF the version is not 2.4.2 OR the version is not shown as continuous

              - entity: sensor.artisan_software_version
                style: |
                  :host {
                  --paper-item-icon-color:
                    {% if (states(config.entity) != 'v2.4.2') or (states(config.entity) != 'continuous') %}
                      var(--state-icon-active-color)
                    {% else %}
                      var(--state-icon-color)
                    {% endif %}
                    ;
                  }

But it seems to be ignoring the OR part of the if statement.

What am I screwing up here?

(I also tried the OR part as an elif)

KTibow · October 8, 2020, 10:30pm

What does it show in the template tab of devtools?

DavidFW1960 · October 8, 2020, 10:37pm

you can’t use config.entity in dev-tools. I will try with the real entity name but it should be fine I think…

dev-tools says:

UndefinedError: 'sensor' is undefined

however:

                style: |
                  :host {
                  --paper-item-icon-color:
                    {% if states(config.entity) != 'v2.4.2' %}
                      var(--state-icon-active-color)
                    {% elif states(config.entity) != 'continuous' %}
                      var(--state-icon-active-color)
                    {% else %}
                      var(--state-icon-color)
                    {% endif %}
                    ;
                  }

If I leave off the OR condition, it shows correctly in the dashboard too Lovelace)

the icon should NOT be yellow

DavidFW1960 · October 8, 2020, 10:48pm

also if I change the first part 2.4.2 to continuous it works correctly.

KTibow · October 8, 2020, 10:50pm

In devtools, quote the entity name with single quotes, what does it say then?

DavidFW1960 · October 8, 2020, 10:50pm

Interestingly, this works correctly

  - entity: sensor.artisan_software_version
    style: |
      :host {
      --paper-item-icon-color:
        {% if states(sensor.artisan_software_version) != 'v2.4.2' %}
          var(--state-icon-active-color)
        {% elif states(sensor.artisan_software_version) != 'continuous' %}
          var(--state-icon-active-color)
        {% else %}
          var(--state-icon-color)
        {% endif %}
        ;
      }

So this looks like a bug with config.entity?

KTibow · October 8, 2020, 10:53pm

Nope, probably that it’s invalid Jinja and is resorting. Use single quotes for the entity. The template tab doesn’t have anything lovelace-specific, so config.entity doesn’t work in there.

DavidFW1960 · October 8, 2020, 10:58pm

Yeah of course…
{{ states(‘sensor.artisan_software_version’) }} shows continuous

and you’re right. that doesn’t actually work.

I just tried:

              - entity: sensor.artisan_software_version
                style: |
                  :host {
                  --paper-item-icon-color:
                    {% if states('sensor.artisan_software_version') != 'v2.4.2' %}
                      var(--state-icon-active-color)
                    {% elif states('sensor.artisan_software_version') != 'continuous' %}
                      var(--state-icon-active-color)
                    {% else %}
                      var(--state-icon-color)
                    {% endif %}
                    ;
                  }

and the icon is yellow which is the var(–state-icon-active-color) which it should not be because the state IS continuous

Which means my original code should also work…

DavidFW1960 · October 8, 2020, 11:03pm

Oh SHIT
Epic logic fail!!
the first condition is of course satisfied. DOH!!! So I need to change my OR to AND DOH!!!

Tseven · October 9, 2020, 6:12am

Isn´t it a lovely feeling when the hammer drops on you that you spent hours (in best case minutes) trying and failing in the wrong end:hammer:.
Happens plenty of times to me when working on HA .

Ben.S · October 9, 2020, 7:06am

thomasloven:

However, the history-graph card adds things to itself long after the card is initially loaded, and that is not supported.

But the following should work if you load a view, go to another view, and then back:
style:
  state-history-charts$state-history-chart-line$ha-chart-base$: |
    .chartHeader {
      display: none;
    }

Interesting, yes this works by going to another view and back again. Although interestingly enough the card height stays the same, so although it takes away the header, you end up with a lot of empty space then at the bottom of the card.

Is there any kind of JS event fired when the history card has loaded its stuff so that card-mod can force a re-render?

I look forward to your wiki articles about how all this works so I can understand whats going on.

KTibow · October 9, 2020, 1:38pm

You might be able to override cardHeight which is a card JS method for the layout engine.

Hmmbob · October 10, 2020, 3:58pm

With help of the wiki I was able to replace almost all functionality of the now deprecated CH module, except for hiding of the chevron buttons ( < and > ). I want them to never be visible, at all.

Does anyone have a snippet that would do that?

KTibow · October 10, 2020, 4:27pm

Look at all posts on the thread dedicated for card-mod theming by me, somewhere I posted that.

ASNNetworks · October 10, 2020, 5:09pm

Seeing how powerull card mod is, I wonder if it’s possible use card mod to make sure a card is sticky as a footer. I have it working with button cards inside a horizontal-stack as a sticky header (that stays in place when scrolling).

I use this code to create a card that is sticky at the top (courtesy of Jimmy)

            style: |
              ha-card {
                --ha-card-background: transparant;
                background: var(--primary-color);
                border-radius: 0px !important;
              }            
              .card-content {
                padding: 0
              }
              :host {
                z-index: 999;
                position: sticky;
                position: -webkit-sticky;
                top: 0;
              }

One would think a reverse should be possible too, to have one at the bottom of the screen always in place?

hentes · October 10, 2020, 5:43pm

Forgive me my novice question. Is it possible with card-mod to completely hide the sidebar? I’m trying to substitute the CH somehow. There is a div named "contentContainer" outside <partial-panel-resolver> which should be hidden.