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

nasgul · March 12, 2020, 12:42pm

I have asked this question in another topic but getting nowhere.
in HA 0.106.1 using a Glance card with darkmix theme I am trying to find the style element that controls the highlight of an entity in the glance card. I.e changing the blue highlight below to red.

I found in INSPECT that the color is controlled by the element called primary-color. Trying to change the code as below does not yield the result.

                  - type: glance                                    # LIGHT   ZONES  CARDS
                    style: |
                      ha-card {
                        font-variant: small-caps;
                        border-right: 3px double grey;
                        border-bottom: 3px double grey;
                        border-left: 3px double grey;
                        }
                      .card-header {
                        font-size: 23px;
                        color: white;
                        text-align: center;
                        }
                    title: Light Zones
                    columns: 5
                    show_state: false
                    show_name: true
                    entities:                                    
                      - entity: light.dining_room
                                                    # Test to identify styling variable
                        style: |
                          :host {
                             primary-color: red;   
                           }
                         name: Dining

nasgul · March 12, 2020, 1:34pm

Correction: the actual item is : divider-color
and the code

                    entities:                                    
                      - entity: light.dining_room
                                                    # Test to identify styling variable
                        style: |
                          :host {
                          --divider-color: red;   
                            }
                        name: Dining

works like a charm thanks to card-mod. Love it.

klogg · March 12, 2020, 3:10pm

I think this is a long shot and I’m expecting the answer to be ‘no’, but…

Can styles be conditional?

I have a config-template-card which displays an entities card and I would like to style the entity based on the state of an entirely different entity.

Something like this.
(This is an abridged version of the card showing the relevant bits and obviously the style for ha-card here doesn’t do anything):

    - type: custom:config-template-card
      variables:
        - states['input_number.blah_blah_0'].state
        - states['timer.blah_blah_1'].state
      entities:
        - input_number.blah_blah_0
        - timer.blah_blah_1
      card:
        type: entities
        show_header_toggle: false
        entities:
          - entity: input_number.blah_blah_0
            icon: "${ vars[1] === 'active' ? 'mdi:some_icon' : '' }"
        style: |
          }
          ha-card {
            color: "${ vars[1] === 'active' ? 'red' : '' }";
            --paper-item-icon-color: "${ vars[1] === 'active' ? 'red' : '' }";
          }

I’d like to colour the icon based on if the timer (i.e. var[1]) is active

I don’t think it makes any difference but this is also passed variables using lovelace_gen but I haven’t shown that here.

(I am not sure if this should be a question about config-template-card by @iantrich? My apologies if it is.)

iantrich · March 12, 2020, 3:26pm

card-mod evaluates at a higher-level, before config-template-card finalizes its values. You cannot use config-template-card inside card-mod’s style.

The card-mod itself supports templates though https://github.com/thomasloven/lovelace-card-mod#templating

Alesoft73 · March 12, 2020, 3:48pm

@thomasloven
Thanks for your big WORK!

image_2020-03-12_14-36-55

I would you change the color state the right two flash icon.
If i use “–iron-icon-fill-color” i can change the color about all flash icon…
Only right 2 icon…
Many thanks!

klogg · March 12, 2020, 4:40pm

Thanks!

That almost works.
Well it does if I don’t use jinja:
(I’ve included how I’m using lovelace-gen here too)

    - type: custom:config-template-card
      variables:
        - states['input_number.blah_blah_{{ number }}'].state
        - states['timer.blah_blah_{{ number }}'].state
      entities:
        - input_number.blah_blah_{{ number }}
        - timer.blah_blah_{{ number }}
      card:
        type: entities
        show_header_toggle: false
        entities:
          - entity: input_number.blah_blah_{{ number }}
            icon: "${ vars[1] === 'active' ? 'mdi:some_icon' : '' }"
        style: |
          :host {
            --paper-item-icon-color: var(--paper-item-icon-color)
          }

But not if I do (maybe obviously, with the lovelace_gen variable inserted?):

        style: |
          :host {
            --paper-item-icon-color:
              {% if states('timer.blah_blah_{{ number }}') == 'idle' %}
                var(--paper-item-icon-color)
              {% else %}
                var(--paper-item-icon-active-color)
              {% endif %};
           }

But it doesn’t work¹ even if I don’t use a lovelace_gen variable:

        style: |
          :host {
            --paper-item-icon-color:
              {% if states('timer.blah_blah_1') == 'idle' %}
                var(--paper-item-icon-color)
              {% else %}
                var(--paper-item-icon-active-color)
              {% endif %};
           }

But I guess that I now definitely should be asking @thomasloven as it is related to card-mod.
Thanks @iantrich for the pointer though.

¹ ‘Doesn’t work’ in these cases means Lovelace won’t load.

thomasloven · March 13, 2020, 8:19am

Wrapping jinja in jinja is tricky to say the least, but it can be done with some clever use of {% raw %}. See the Jinja2 Template Designer documentation.

I’m not sure why your second examle isn’t working, though. Maybe the Home Assistant log will tell you more.

And everyone’s free to answer questions.

klogg · March 13, 2020, 10:39am

Well, yes it does but it doesn’t seem consistent:

This is my exact config (the style bit):

        style: |
          #states {
            padding: 0px 16px;
          }
          :host {
            --paper-item-icon-color:
              {% if states('timer.irrigation_zone1_timer') == 'idle' %}
                var(--paper-item-icon-color)
              {% else %}
                var(--paper-item-icon-active-color)
              {% endif %};
          }

This is the relevant bit from the log (the full log output is at the bottom of this post):

  File "/config/lovelace/includes_garden/item_zone_duration_line.yaml", line 52, in top-level template code
    {% if states('timer.irrigation_zone1_timer') == 'idle' %}
jinja2.exceptions.UndefinedError: 'states' is undefined

And this is the template page to prove the jinja works as expected:

As promised the full log output:

Error handling message: Unknown error
Traceback (most recent call last):
  File "/usr/src/homeassistant/homeassistant/components/websocket_api/decorators.py", line 20, in _handle_async_response
    await func(hass, connection, msg)
  File "/usr/src/homeassistant/homeassistant/components/lovelace/__init__.py", line 196, in send_with_error_handling
    result = await func(hass, connection, msg)
  File "/usr/src/homeassistant/homeassistant/components/lovelace/__init__.py", line 221, in websocket_lovelace_config
    return await hass.data[DOMAIN].async_load(msg["force"])
  File "/usr/src/homeassistant/homeassistant/components/lovelace/__init__.py", line 154, in async_load
    self._load_config, force
  File "/usr/local/lib/python3.7/concurrent/futures/thread.py", line 57, in run
    result = self.fn(*self.args, **self.kwargs)
  File "/usr/src/homeassistant/homeassistant/components/lovelace/__init__.py", line 173, in _load_config
    config = load_yaml(fname)
  File "/usr/src/homeassistant/homeassistant/util/yaml/loader.py", line 62, in load_yaml
    return yaml.load(conf_file, Loader=SafeLineLoader) or OrderedDict()
  File "/usr/local/lib/python3.7/site-packages/yaml/__init__.py", line 114, in load
    return loader.get_single_data()
  File "/usr/local/lib/python3.7/site-packages/yaml/constructor.py", line 43, in get_single_data
    return self.construct_document(node)
  File "/usr/local/lib/python3.7/site-packages/yaml/constructor.py", line 47, in construct_document
    data = self.construct_object(node)
  File "/usr/local/lib/python3.7/site-packages/yaml/constructor.py", line 92, in construct_object
    data = constructor(self, node)
  File "/usr/src/homeassistant/homeassistant/util/yaml/loader.py", line 196, in _ordered_dict
    nodes = loader.construct_pairs(node)
  File "/usr/local/lib/python3.7/site-packages/yaml/constructor.py", line 147, in construct_pairs
    value = self.construct_object(value_node, deep=deep)
  File "/usr/local/lib/python3.7/site-packages/yaml/constructor.py", line 92, in construct_object
    data = constructor(self, node)
  File "/usr/src/homeassistant/homeassistant/util/yaml/loader.py", line 227, in _construct_seq
    (obj,) = loader.construct_yaml_seq(node)
  File "/usr/local/lib/python3.7/site-packages/yaml/constructor.py", line 400, in construct_yaml_seq
    data.extend(self.construct_sequence(node))
  File "/usr/local/lib/python3.7/site-packages/yaml/constructor.py", line 122, in construct_sequence
    for child in node.value]
  File "/usr/local/lib/python3.7/site-packages/yaml/constructor.py", line 122, in <listcomp>
    for child in node.value]
  File "/usr/local/lib/python3.7/site-packages/yaml/constructor.py", line 92, in construct_object
    data = constructor(self, node)
  File "/config/custom_components/lovelace_gen/__init__.py", line 54, in _include_yaml
    return loader._add_reference(load_yaml(fname, args), ldr, node)
  File "/config/custom_components/lovelace_gen/__init__.py", line 37, in load_yaml
    return loader.yaml.load(config_file, Loader=loader.SafeLineLoader) or OrderedDict()
  File "/usr/local/lib/python3.7/site-packages/yaml/__init__.py", line 114, in load
    return loader.get_single_data()
  File "/usr/local/lib/python3.7/site-packages/yaml/constructor.py", line 43, in get_single_data
    return self.construct_document(node)
  File "/usr/local/lib/python3.7/site-packages/yaml/constructor.py", line 47, in construct_document
    data = self.construct_object(node)
  File "/usr/local/lib/python3.7/site-packages/yaml/constructor.py", line 92, in construct_object
    data = constructor(self, node)
  File "/usr/src/homeassistant/homeassistant/util/yaml/loader.py", line 196, in _ordered_dict
    nodes = loader.construct_pairs(node)
  File "/usr/local/lib/python3.7/site-packages/yaml/constructor.py", line 147, in construct_pairs
    value = self.construct_object(value_node, deep=deep)
  File "/usr/local/lib/python3.7/site-packages/yaml/constructor.py", line 92, in construct_object
    data = constructor(self, node)
  File "/usr/src/homeassistant/homeassistant/util/yaml/loader.py", line 227, in _construct_seq
    (obj,) = loader.construct_yaml_seq(node)
  File "/usr/local/lib/python3.7/site-packages/yaml/constructor.py", line 400, in construct_yaml_seq
    data.extend(self.construct_sequence(node))
  File "/usr/local/lib/python3.7/site-packages/yaml/constructor.py", line 122, in construct_sequence
    for child in node.value]
  File "/usr/local/lib/python3.7/site-packages/yaml/constructor.py", line 122, in <listcomp>
    for child in node.value]
  File "/usr/local/lib/python3.7/site-packages/yaml/constructor.py", line 92, in construct_object
    data = constructor(self, node)
  File "/config/custom_components/lovelace_gen/__init__.py", line 54, in _include_yaml
    return loader._add_reference(load_yaml(fname, args), ldr, node)
  File "/config/custom_components/lovelace_gen/__init__.py", line 37, in load_yaml
    return loader.yaml.load(config_file, Loader=loader.SafeLineLoader) or OrderedDict()
  File "/usr/local/lib/python3.7/site-packages/yaml/__init__.py", line 114, in load
    return loader.get_single_data()
  File "/usr/local/lib/python3.7/site-packages/yaml/constructor.py", line 43, in get_single_data
    return self.construct_document(node)
  File "/usr/local/lib/python3.7/site-packages/yaml/constructor.py", line 47, in construct_document
    data = self.construct_object(node)
  File "/usr/local/lib/python3.7/site-packages/yaml/constructor.py", line 92, in construct_object
    data = constructor(self, node)
  File "/usr/src/homeassistant/homeassistant/util/yaml/loader.py", line 196, in _ordered_dict
    nodes = loader.construct_pairs(node)
  File "/usr/local/lib/python3.7/site-packages/yaml/constructor.py", line 147, in construct_pairs
    value = self.construct_object(value_node, deep=deep)
  File "/usr/local/lib/python3.7/site-packages/yaml/constructor.py", line 92, in construct_object
    data = constructor(self, node)
  File "/usr/src/homeassistant/homeassistant/util/yaml/loader.py", line 227, in _construct_seq
    (obj,) = loader.construct_yaml_seq(node)
  File "/usr/local/lib/python3.7/site-packages/yaml/constructor.py", line 400, in construct_yaml_seq
    data.extend(self.construct_sequence(node))
  File "/usr/local/lib/python3.7/site-packages/yaml/constructor.py", line 122, in construct_sequence
    for child in node.value]
  File "/usr/local/lib/python3.7/site-packages/yaml/constructor.py", line 122, in <listcomp>
    for child in node.value]
  File "/usr/local/lib/python3.7/site-packages/yaml/constructor.py", line 92, in construct_object
    data = constructor(self, node)
  File "/config/custom_components/lovelace_gen/__init__.py", line 54, in _include_yaml
    return loader._add_reference(load_yaml(fname, args), ldr, node)
  File "/config/custom_components/lovelace_gen/__init__.py", line 37, in load_yaml
    return loader.yaml.load(config_file, Loader=loader.SafeLineLoader) or OrderedDict()
  File "/usr/local/lib/python3.7/site-packages/yaml/__init__.py", line 114, in load
    return loader.get_single_data()
  File "/usr/local/lib/python3.7/site-packages/yaml/constructor.py", line 43, in get_single_data
    return self.construct_document(node)
  File "/usr/local/lib/python3.7/site-packages/yaml/constructor.py", line 47, in construct_document
    data = self.construct_object(node)
  File "/usr/local/lib/python3.7/site-packages/yaml/constructor.py", line 92, in construct_object
    data = constructor(self, node)
  File "/usr/src/homeassistant/homeassistant/util/yaml/loader.py", line 196, in _ordered_dict
    nodes = loader.construct_pairs(node)
  File "/usr/local/lib/python3.7/site-packages/yaml/constructor.py", line 147, in construct_pairs
    value = self.construct_object(value_node, deep=deep)
  File "/usr/local/lib/python3.7/site-packages/yaml/constructor.py", line 92, in construct_object
    data = constructor(self, node)
  File "/usr/src/homeassistant/homeassistant/util/yaml/loader.py", line 196, in _ordered_dict
    nodes = loader.construct_pairs(node)
  File "/usr/local/lib/python3.7/site-packages/yaml/constructor.py", line 147, in construct_pairs
    value = self.construct_object(value_node, deep=deep)
  File "/usr/local/lib/python3.7/site-packages/yaml/constructor.py", line 92, in construct_object
    data = constructor(self, node)
  File "/usr/src/homeassistant/homeassistant/util/yaml/loader.py", line 227, in _construct_seq
    (obj,) = loader.construct_yaml_seq(node)
  File "/usr/local/lib/python3.7/site-packages/yaml/constructor.py", line 400, in construct_yaml_seq
    data.extend(self.construct_sequence(node))
  File "/usr/local/lib/python3.7/site-packages/yaml/constructor.py", line 122, in construct_sequence
    for child in node.value]
  File "/usr/local/lib/python3.7/site-packages/yaml/constructor.py", line 122, in <listcomp>
    for child in node.value]
  File "/usr/local/lib/python3.7/site-packages/yaml/constructor.py", line 92, in construct_object
    data = constructor(self, node)
  File "/usr/src/homeassistant/homeassistant/util/yaml/loader.py", line 196, in _ordered_dict
    nodes = loader.construct_pairs(node)
  File "/usr/local/lib/python3.7/site-packages/yaml/constructor.py", line 147, in construct_pairs
    value = self.construct_object(value_node, deep=deep)
  File "/usr/local/lib/python3.7/site-packages/yaml/constructor.py", line 92, in construct_object
    data = constructor(self, node)
  File "/usr/src/homeassistant/homeassistant/util/yaml/loader.py", line 227, in _construct_seq
    (obj,) = loader.construct_yaml_seq(node)
  File "/usr/local/lib/python3.7/site-packages/yaml/constructor.py", line 400, in construct_yaml_seq
    data.extend(self.construct_sequence(node))
  File "/usr/local/lib/python3.7/site-packages/yaml/constructor.py", line 122, in construct_sequence
    for child in node.value]
  File "/usr/local/lib/python3.7/site-packages/yaml/constructor.py", line 122, in <listcomp>
    for child in node.value]
  File "/usr/local/lib/python3.7/site-packages/yaml/constructor.py", line 92, in construct_object
    data = constructor(self, node)
  File "/usr/src/homeassistant/homeassistant/util/yaml/loader.py", line 196, in _ordered_dict
    nodes = loader.construct_pairs(node)
  File "/usr/local/lib/python3.7/site-packages/yaml/constructor.py", line 147, in construct_pairs
    value = self.construct_object(value_node, deep=deep)
  File "/usr/local/lib/python3.7/site-packages/yaml/constructor.py", line 92, in construct_object
    data = constructor(self, node)
  File "/usr/src/homeassistant/homeassistant/util/yaml/loader.py", line 227, in _construct_seq
    (obj,) = loader.construct_yaml_seq(node)
  File "/usr/local/lib/python3.7/site-packages/yaml/constructor.py", line 400, in construct_yaml_seq
    data.extend(self.construct_sequence(node))
  File "/usr/local/lib/python3.7/site-packages/yaml/constructor.py", line 122, in construct_sequence
    for child in node.value]
  File "/usr/local/lib/python3.7/site-packages/yaml/constructor.py", line 122, in <listcomp>
    for child in node.value]
  File "/usr/local/lib/python3.7/site-packages/yaml/constructor.py", line 92, in construct_object
    data = constructor(self, node)
  File "/config/custom_components/lovelace_gen/__init__.py", line 54, in _include_yaml
    return loader._add_reference(load_yaml(fname, args), ldr, node)
  File "/config/custom_components/lovelace_gen/__init__.py", line 32, in load_yaml
    stream = io.StringIO(jinja.get_template(fname).render({**args, "_global": llgen_config}))
  File "/usr/local/lib/python3.7/site-packages/jinja2/environment.py", line 1090, in render
    self.environment.handle_exception()
  File "/usr/local/lib/python3.7/site-packages/jinja2/environment.py", line 832, in handle_exception
    reraise(*rewrite_traceback_stack(source=source))
  File "/usr/local/lib/python3.7/site-packages/jinja2/_compat.py", line 28, in reraise
    raise value.with_traceback(tb)
  File "/config/lovelace/includes_garden/item_zone_duration_line.yaml", line 52, in top-level template code
    {% if states('timer.irrigation_zone1_timer') == 'idle' %}
jinja2.exceptions.UndefinedError: 'states' is undefined

thomasloven · March 13, 2020, 11:22am

Oh! I misunderstood you.

You said you didn’t use a lovelace_gen variable, which I thought meant that you didn’t use lovelace_gen at all on that file.

Your problem here is that lovelace_gen will parse the jinja and replace it with it’s result before card-mod even gets a chance to see it.
And since lovelace_gen is not dynamic, it doesn’t know about states.

You need to stop lovelace_gen from evaluating that specific piece of jinja code entirely, which is where {% raw %} comes into the picture.

See lovelace_gen readme.

klogg · March 13, 2020, 11:52am

I think I’m misunderstanding you misunderstanding me…

Firstly, yes thank you, {% raw %} fixes the general problem i.e. when not passing a lovelace_gen variable.

What I really want to somehow do is to pass in a varible. (As shown in my earlier post).

        style: |
          :host {
            --paper-item-icon-color:
              {% if states('timer.blah_blah_{{ number }}') == 'idle' %}
                var(--paper-item-icon-color)
              {% else %}
                var(--paper-item-icon-active-color)
              {% endif %};
           }

But I suspect that is not possible.
Using {% raw %} means lovelace_gen ignores the jinja so {{ number }} is never substituted for the incoming lovelave_gen variable.

Correct? Or is there another trick?

I thought I might be able to do this… but I can’t

          :host {
            --paper-item-icon-color:
              {% set zone = {{ zone }} %}
              {% raw %}
              {% if states('timer.irrigation_zone' ~ zone ~ '_timer') == 'idle' %}
                var(--paper-item-icon-color)
              {% else %}
                var(--paper-item-icon-active-color)
              {% endif %}
              {% endraw %}
              ;
          }

thomasloven · March 13, 2020, 11:57am

You’ll have to think a bit about what’s happening when, and how to stop it happening too early.

I haven’t tried it myself, but perhaps

{%raw%} {% set zone = {% endraw %} "{{zone}}" {%raw%} %} {% endraw %}

could work?

klogg · March 13, 2020, 12:03pm

Brilliant! (almost)
Lovelace loads and it does ‘something’. Not quite what I expected it to do but I’ll play around with it.

Thanks.
I’ll report back if I get it working.

thomasloven · March 13, 2020, 12:06pm

A tip. If you happen to have card-tools installed, you can type cardTools.lovelace.config into your browser console to see what lovelace_gen actually generates.

klogg · March 13, 2020, 1:06pm

Well, that is very useful!

I created the simplest view I could that uses this ‘problem’ card.

The console returns this for the style:

style: "#states {↵  padding: 0px 16px;↵}↵:host {↵  --paper-item-icon-color:↵     {% set zone = " 1 " %} ↵    ↵    {% if states('timer.irrigation_zone' ~ zone ~ '_timer') == 'idle' %}↵      var(--paper-item-icon-color)↵    {% else %}↵      var(--paper-item-icon-active-color)↵    {% endif %}↵    ↵    ;↵}↵"

I thought maybe those leading and trailing spaces might be the problem but using trim didn’t help:
{% raw %} {% set zone = {% endraw %} "{{ zone }}" {% raw %} | trim %} {% endraw %}
In any case , I might be using it incorrectly but no matter what I do, I cannot get it to show anything other than
{% set zone = " 1 " %}
Even if I hard code something else or pass it a different lovelace_gen variable. The console seems ‘stuck’ in some way. Is there a way to refresh the console?

I realise this is all getting a bit esoteric so understand if you don’t want to delve into it any further.
But if you do have any further hints…

For reference here is my exact config:

        style: |
          #states {
            padding: 0px 16px;
          }
          :host {
            --paper-item-icon-color:
              {% raw %} {% set zone = {% endraw %} "{{ zone }}" {% raw %} | trim %} {% endraw %}
              {% raw %}
              {% if states('timer.irrigation_zone' ~ zone ~ '_timer') == 'idle' %}
                var(--paper-item-icon-color)
              {% else %}
                var(--paper-item-icon-active-color)
              {% endif %}
              {% endraw %}
              ;
          }

klogg · March 16, 2020, 3:59pm

Just in case anyone is following this and cares…
I revisited it and got it working with a simple restructuring.

          :host {
            {% raw %}
            {% set id = {% endraw %} {{ id }} {% raw %} %}
            {% if is_state('timer.my_timer' ~ id, 'active') %}
              --paper-item-icon-color: var(--paper-item-icon-active-color);
            {% endif %}
            {% endraw %}
            ;
          }

ThrustVector · March 17, 2020, 10:01pm

What am I missing here?
I’m trying to build a touch panel that covers the whole viewport but fails. Still getting a vertical scrollbar after trying to fix it with mod-card

views:
  - icon: 'mdi:lightbulb-on'
    panel: true
    path: home_menu
    title: Home Menu
    badges: []
    cards:
      - type: 'custom:mod-card'
        style: |
          ha-card {
            height: calc(100vh - 120px);
            width: auto;
          }
        card:
          cards:
            - cards:
                - image: >-
                    https://i.pinimg.com/originals/cc/a8/ea/cca8ea85707cf5a89087e2d50518fb1e.jpg
                  tap_action:
                    action: navigate
                    navigation_path: /lovelace/hallway_view
                  type: picture
                - image: >-
                    https://imagineerremodeling.com/wp-content/uploads/2016/12/Fantastis-Shabby-Chic-Bathroom-Ideas-in-House-Remodel-Ideas-With-Shabby-Chic-Bathroom-Ideas-256x256.jpg
                  tap_action:
                    action: navigate
                    navigation_path: /lovelace/bathroom_view
                  type: picture
                - image: >-
                    https://i.pinimg.com/474x/2f/15/89/2f1589e121b20aa7200fd409c4e9391e.jpg
                  tap_action:
                    action: navigate
                    navigation_path: /lovelace/livingroom_view
                  type: picture
              type: horizontal-stack
            - cards:
                - image: >-
                    https://cdn131.picsart.com/320540697272201.jpg?type=webp&to=crop&r=256
                  tap_action:
                    action: navigate
                    navigation_path: /lovelace/bedroom_view
                  type: picture
                - image: >-
                    https://imagineerremodeling.com/wp-content/uploads/2017/10/Kitchen-256x256.jpg
                  tap_action:
                    action: navigate
                    navigation_path: /lovelace/kitchen_view
                  type: picture
                - image: >-
                    https://i.pinimg.com/originals/1e/e8/fe/1ee8fe4c8d40f29179736fc0c6361251.jpg
                  tap_action:
                    action: navigate
                    navigation_path: /lovelace/hobbyroom_view
                  type: picture
              type: horizontal-stack
          type: vertical-stack

ghizmo82 · March 19, 2020, 12:43pm

good morning there’s a problem with 107.1 version of HA and card-mod?I have a problem with picture eglance, with 106 work perfectly this is my configuration:

     - type: custom:mod-card
        style: |
                ha-card {
                   background: rgba(0, 0, 0, 0.7);
                   border-radius: 25px;
                   border: solid 3px rgb(255,32,122);
                   color: rgb(255, 32, 122);
                   --paper-item-icon-color: rgb(255, 32, 122);
                }
        card: 
          type: picture-glance
          title: Magic Mirror
          entities:
            - switch.magic_mirror
            - switch.standby
          state_image:
            "on": /local/magicmirror.jpg
            "off": /local/magicmirroroff.jpg
          entity: switch.magic_mirror

pollinolas · March 19, 2020, 1:03pm

visit this

ghizmo82 · March 19, 2020, 1:19pm

ok thanks this is a workaround momentary…but i think the problem is in the custom component, it’s true?i think he need updating?

Denman2103 · March 23, 2020, 4:12pm

Hello,

I’ve been experimenting with customizing cards for a while now. Card-Mod is a very nice and useful plugin. recently i have set a dark theme and some icons are now less readable. I’m trying to change the icon color but with no luck yet.
How can i change the color of these icons?
Here is the code and a preview of the card:

card:
  columns: 3
  show_name: true
  type: glance
filter:
  include:
    - entity_id: sensor.avalex_pmd
    - entity_id: sensor.avalex_gft
    - entity_id: sensor.avalex_papier
sort:
  attribute: Sort-date
  method: attribute
  numeric: true
type: 'custom:auto-entities'