Card-mod not working in picture element

Configuration Frontend
1

Hi,
I’m trying to make card-mod working and I just can’t seem to be albe to do that.
what I have?
I’m running ha 11.5 in virtual box.
the rest is up to date.
I have installed card-mod and card-tools from hacs.
I have updated configuration.yaml like that:
under resources:

    - url: /hacsfiles/lovelace-card-tools/card-tools.js
      type: js
    - url: /hacsfiles/lovelace-card-tools/card-mods.js
      type: module

also added:

frontend:
  extra_module_url:
    - /config/www/community/lovelace-cord-mod/card-mod.js
  javascript_version: latest

in my view I have under picture-elements:

      - entity: sensor.sensor_temp
        style:
          left: 33%
          top: 57%
        type: state-label
        card_mod:
          style: |
            :host {
              color: #FFFF00;
            }

I don’t get any error and don’t see any change, it’s just stays in the same black color.

Thank you in advance

2

Extra “s” ?

- url: /hacsfiles/lovelace-card-tools/card-mod.js
  type: module
3

Typo ?

frontend:
  extra_module_url:
    - /config/www/community/lovelace-card-mod/card-mod.js
  javascript_version: latest
4

type indeed. thank you!
but it’s still didn’t solve the issue

5

You can use " color: red " under style: for state-label ( Don’t need card-mod for that )
( I only have card-mod for state-icon )
You can even, use other CSS tags under the style: beside position

style:
              top: 27%
              left: 78%
              width: 5%
              color: red
              font-size: 10px
              transform: rotate(270deg)
              etc: X?

And a not documented

    cards:
      - type: picture-elements
        elements:
          - type: custom:mushroom-chips-card
            chips:
              - type: template
                entity: switch.tp2
                picture: |
                  {% set state=states('switch.tp2') %}
                  {% if state=='off' %}
                  /local/gif-icons/blue-fan-off.png
                  {% elif state=='on' %}
                  /local/gif-icons/blue-fan-on.gif
                  {% else %}
                  mdi:alert
                  {% endif %}
            style:
              top: 16%
              left: 83%

EDIT: My state-icon

          - type: state-icon
            entity: binary_sensor.motion_office
            icon: mdi:remote
            state_filter:
              'on': blue
              'off': color green
            name: Motion HallWay
            style:
              top: 34.5%
              left: 26%
              '--mdc-icon-size': 20px
              transform: rotate(70deg)
            card_mod:
              style: |
                :host {
                  --paper-item-icon-color: blue;
                }
6

Assume you did restart (as you edited configuration.yaml) and reloaded resources and cleared you browser cache ?

7

Yes I did.

8

Hi,
it’s working with regular color (like red)
I’m trying to do it with conditional color:

      - entity: sensor.sonoff_tempe
        style:
          left: 33%
          top: 57%
          color: |
            {% set state=states('switch.switcher') %}
            {% if state=='on' %}
              yellow
            {% elif state=='off' %}
              blue
            {% else %}
              grey
            {% endif %};
        type: state-label

but it’s not working.
Any other tips? :slight_smile:

9

none of the default “tags” support template, as far as i know, try with

            state_filter:
              'on': blue
              'off': color green

Or maybe the template in card-mod

The thing about your card-mod is you have to “address” the element, not just :host color … that doesn’t work

10

I don’t think it will work as I present the info of and entity but want to sample the state of another.
so I guess I need to return to the card-mod

11

what do you mean by address the element?
the entity I want to sample or the entity I want to change the color?

12

I just tried this in a card I have and it displays in yellow so must be in your card-mod config. Check all the spellings again and clear you cache and maybe browser data also. Adding new resources sometimes takes a few refreshes and reloads

  - type: state-label
    entity: binary_sensor.airing_cupboard_door_contact
    style:
      left: 33%
      top: 57%
    card_mod:
      style: |
        :host {
          color: #FFFF00;
        }
1 Like
13

thank you. I will try again… :face_with_raised_eyebrow:

14

In my setup I have this in configuration.yaml:

frontend:
  extra_module_url:
    - /hacsfiles/lovelace-card-mod/card-mod.js

and I have no card-mod entry in my resources file, I guess the above supercedes it

But I do have this in my resources file for card tools:

- url: /hacsfiles/lovelace-card-tools/card-tools.js
  type: module
15

Now it’s working!!
I think the issue was with the setting of card-tools as type js and not module.
although in the config of card-mod it says to define it as js
also I added ‘;’ at the end of every line which is mandatory

thanks everyone!

1 Like
16

Actually does, i must have made a typo my self when testing it :smile: ) or forgot to remove the predefined style: tag color

1 Like