This is once again not working.
Has --state-icon-color changed again?

Originally posted by @PierreScerri in #44 (comment)

Hi Thomas,

Great mod, maybe I didn't read through properly, but how would I go about the --ha-card-background: with regards to theming? I.e. having a dark and a light theme now messes up when switching on sundown.

Tnx

It would be very useful if this card also allowed to map any element to a call service service, something like, map the element and CSS class and call a service with it when click! The hardest part should be what parameters to pass to the call service! A template should help.

Just a ideia :)

My Home Assistant version: 0.106.5

My lovelace configuration method (GUI or yaml): yaml

What I am doing: using custom:card-mod as the type, worked fine on version 11 but since going to 12 & 13 get errors

What I expected to happen: displays my cards

What happened instead:
error message;

Minimal steps to reproduce:
use the yaml in the screenshot

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

[ x] Understand that this is a channel for reporting bugs, not a support forum (https://community.home-assistant.io/).

[ x] Have made sure I am using the latest version of the plugin.

[ x] Have followed the troubleshooting steps of the "Common Problems" section of https://github.com/thomasloven/hass-config/wiki/Lovelace-Plugins.

[ x] Understand that leaving one or more boxes unticked or failure to follow the template above may increase the time required to handle my bug-report, or cause it to be closed without further action.

I would like the ability to mod the custom:text-divider row, it is currently too bulky.

This may already be possible, I could just be doing something stupid. Here is my current edition of the code:

type: entities
title: Climate
style: |
  h2 {
    font-size: 16px;
    padding: 0px;
  }
  .text-divider {
    padding: 0px;
    margin: 0px;
  }
show_header_toggle: false
entities:
- type: 'custom:text-divider-row'
  text: Home
- entity: input_number.c_home_heat
  name: Heat
- entity: input_number.c_home_cool
  name: Cool
- type: 'custom:text-divider-row'
  text: Night
- entity: input_number.c_night_heat
  name: Heat
- entity: input_number.c_night_cool
  name: Cool
- type: 'custom:text-divider-row'
  text: Away
- entity: input_number.c_away_heat
  name: Heat
- entity: input_number.c_away_cool
  name: Cool

My Home Assistant version:

0.105.3

My lovelace configuration method (GUI or yaml):

yaml

What I am doing:

Installing card-mod and card-tools via HACS and view the developer console in my browser.

What I expected to happen:

No errors.

What happened instead: Error resolving module specifier: card-tools/src/templates.js

Minimal steps to reproduce:

Install

# The least ammount of code possible to reproduce my error

- url: /local/community/lovelace-card-tools/card-tools.js
  type: module
- url: /local/community/lovelace-card-mod/card-mod.js
  type: module

# End of code

Error messages from the browser console:
Error resolving module specifier: card-tools/src/templates.js

I noticed that I am using card-mod.js from the src directory, which is the non-minified version.

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

[X] Understand that this is a channel for reporting bugs, not a support forum (https://community.home-assistant.io/).

[X] Have made sure I am using the latest version of the plugin.

[X] Have followed the troubleshooting steps of the "Common Problems" section of https://github.com/thomasloven/hass-config/wiki/Lovelace-Plugins.

[X] Understand that leaving one or more boxes unticked or failure to follow the template above may increase the time required to handle my bug-report, or cause it to be closed without further action.

I've been using the card mod and sliders and they are great!. however I don't really like the vast amount of space between each entity. E.g. between the title to the actual entity.

Is there a css code I can use in order to remove the spacing between the entities?

cards:
  - entities:
      - entity: light.entry_8
        icon: 'mdi:lightbulb-outline'
        toggle: true
        type: 'custom:slider-entity-row'
    show_header_toggle: false
    title: Entry
    type: entities
    style: |
      .card-header {
      font-size: 20px;
      }
  - entities:
      - entity: sensor.temperature_sensor_1_43
      - entity: sensor.humidity_sensor_1_45
        icon: 'mdi:water-percent'
      - entity: sensor.light_sensor_1_44
        icon: 'mdi:brightness-5'
      - entity: sensor.entry_motion
        icon: 'mdi:motion-sensor'
      - entity: sensor.entry_door
        icon: 'mdi:door-closed-lock'
    show_icon: true
    show_name: false
    show_state: true
    type: glance
type: 'custom:vertical-stack-in-card'

refer to the highlighted areas in screencap.

When using mod-card, the elements inside isn't updated when HomeAssistant refreshes entities.
Tested with identical cards placed independently and inside a mod-card within the same view. The independent card will update entities, graphs and such, but within the mod-card everything is static.

This is not actually a bug I think, but I can't get it working. Might also have to do with my CSS knowledge.

In the chrome inspector I see the following hierarchy:

A vertical-stack-in-card with two cards: circle and decluttering-card.

As you can see, I did change some settings in the inspector which I can't get to work from the yaml style | configuration:

• I set an align-items: center; on the <div id="root" style=" to center both cards.
• I set a flex: 1 on the circle-sensor-card
• I set a flex: 2 on the decluttering-card

How do I do that with styling?

- type: vertical-stack-in-card
  style |
    ?????

If I use #root { xxx }, I don't see any result for instance.

My Home Assistant version: 0.108.2

My lovelace configuration method (GUI or yaml): GUI

What I am doing:
Added style to change icon colour of stock sensor card depending on the state of a sensor.
This was working until recently.

What I expected to happen:
Continue to work as before.

What happened instead:
Stopped working probably after recent HA upgrade.

Minimal steps to reproduce:
Recent HA upgrade?

# The least ammount of code possible to reproduce my error
        entity: sensor.sdm230import
        graph: none
        icon: 'mdi:import'
        name: Import
        state_color: true
        style: |
          :host {
            --paper-item-icon-color:
              {% if states.sensor.import_power.state|int > 0 %}
                red
              {% else %}
                rgb(138, 185, 45)
              {% endif %}
              ;
        type: sensor


# End of code

Error messages from the browser console:

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

[X] Understand that this is a channel for reporting bugs, not a support forum (https://community.home-assistant.io/).

[X] Have made sure I am using the latest version of the plugin.

[X] Have followed the troubleshooting steps of the "Common Problems" section of https://github.com/thomasloven/hass-config/wiki/Lovelace-Plugins.

[X] Understand that leaving one or more boxes unticked or failure to follow the template above may increase the time required to handle my bug-report, or cause it to be closed without further action.

HA version: 0.108.5 | Lovelace: yaml | HACS: 0.24.0 | card-mod: 13

Hey guys,
I'm testing this card mod. I get it to work, but every time I refresh the page, it makes a flick (show the normal card and then after miliseconds, apply the css. It seems to load the default and then apply css). It gives a very bad user experience when refresh the page.

I installed it trought HACS and then added this to resources:

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

Here is my yaml:

title: Home
icon: 'mdi:home'
path: home

cards:
  - type: vertical-stack
    cards:
      - type: entities
        style: |
          ha-card {
            border-radius: 15px;
            border: 1px solid green;
            background-color: yellow;
          }
        entities:
          - entity: binary_sensor.xxxxxxxxxxxxxxxxxxxxxxxxx
          - entity: binary_sensor.xxxxxxxxxxxxxxxxxxxxxxxxx

Thanks for any help

My Home Assistant version: 105.3

My lovelace configuration method (GUI or yaml):

What I am doing:

style: |
ha-card {
border-radius: 15px;
font-size: 12px;
font-variant: small-caps;
box-shadow: none;
}

What I expected to happen:

What happened instead:

Minimal steps to reproduce:

updated to 13, rolled back to 12

# The least ammount of code possible to reproduce my error



# End of code

Error messages from the browser console:

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

[ ] Understand that this is a channel for reporting bugs, not a support forum (https://community.home-assistant.io/).

[ ] Have made sure I am using the latest version of the plugin.

[ ] Have followed the troubleshooting steps of the "Common Problems" section of https://github.com/thomasloven/hass-config/wiki/Lovelace-Plugins.

[ ] Understand that leaving one or more boxes unticked or failure to follow the template above may increase the time required to handle my bug-report, or cause it to be closed without further action.

My Home Assistant version: 0.111.0

My lovelace configuration method (GUI or yaml): yaml

What I am doing: applying custom styling to a markdown-card

What I expected to happen: font styling is applied to element h1

What happened instead: no styling is applied. Safari reports User Agent Style Sheet. Issue is present in Firefox too.

Minimal steps to reproduce:
Use the aforementioned yaml in a view.

- type: markdown
   content: |
     # Vacuum automation
   style: |
     ha-card {
       height: 50px;
       --paper-card-background-color: 'rgba(11, 11, 11, 0.00)';
       box-shadow: 2px 2px rgba(0,0,0,0.0);
     }
     h1 {
       font-size: 14px;
       font-weight: thin;
       font-family: Helvetica;
       letter-spacing: '-0.01em';
     }

Error messages from the browser console: (I don't think these are related)

[Error] hui-thermostat-card – Error: Specify an entity from within the climate domain.
Error: Specify an entity from within the climate domain.
	s (chunk.6dbb65acb727c33dd251.js:2144:318438)
	value (chunk.ab96942901cd9a8d7754.js:146:46870)
	(anonymous function) (chunk.ab96942901cd9a8d7754.js:146:47612)
	asyncFunctionResume
	(anonymous function)
	promiseReactionJobWithoutPromise
	promiseReactionJob
[Error] hui-alarm-panel-card – Error: Invalid card configuration
Error: Invalid card configuration
	s (chunk.6dbb65acb727c33dd251.js:2144:318438)
	value (chunk.ab96942901cd9a8d7754.js:146:46870)
	(anonymous function) (chunk.ab96942901cd9a8d7754.js:146:47612)
	asyncFunctionResume
	(anonymous function)
	promiseReactionJobWithoutPromise
	promiseReactionJob
[Error] Failed to load resource: the server responded with a status of 404 () (index.m.js.map, line 0)

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

• Understand that this is a channel for reporting bugs, not a support forum (https://community.home-assistant.io/).

• Have made sure I am using the latest version of the plugin.

• Have followed the troubleshooting steps of the "Common Problems" section of https://github.com/thomasloven/hass-config/wiki/Lovelace-Plugins.

• Understand that leaving one or more boxes unticked or failure to follow the template above may increase the time required to handle my bug-report, or cause it to be closed without further action.

My Home Assistant version: 0.106.0.dev20200210

My lovelace configuration method (GUI or yaml): yaml

What I am doing:
Trying to use mod-card to get a background color.

What I expected to happen:
I expect my cards to be split into three columns on my desktop.

What happened instead:
If I use a mod-card as a wrapper to anything the lovelace just stacks everything into one column.

Minimal steps to reproduce:
Create few cards with and without using mod-card:

views:

  - title: test1
    id: test1
    cards:
      - type: entities
        title: Entities card sample
        show_header_toggle: true
        header:
          image: 'https://www.home-assistant.io/images/lovelace/header-footer/balloons-header.png'
          type: picture
        entities:
          - sensor.date
          - sensor.date
          - sensor.date
          - sensor.date
          - sensor.date
      - type: entities
        title: Entities card sample
        show_header_toggle: true
        header:
          image: 'https://www.home-assistant.io/images/lovelace/header-footer/balloons-header.png'
          type: picture
        entities:
          - sensor.date
          - sensor.date
          - sensor.date
          - sensor.date
          - sensor.date
      - type: entities
        title: Entities card sample
        show_header_toggle: true
        header:
          image: 'https://www.home-assistant.io/images/lovelace/header-footer/balloons-header.png'
          type: picture
        entities:
          - sensor.date
          - sensor.date
          - sensor.date
          - sensor.date
          - sensor.date

  - title: test2
    id: test2
    cards:
      - type: custom:mod-card
        card:
          type: vertical-stack
          cards:
            - type: entities
              title: Entities card sample
              show_header_toggle: true
              header:
                image: 'https://www.home-assistant.io/images/lovelace/header-footer/balloons-header.png'
                type: picture
              entities:
                - sensor.date
                - sensor.date
                - sensor.date
                - sensor.date
                - sensor.date
      - type: custom:mod-card
        card:
          type: vertical-stack
          cards:
            - type: entities
              title: Entities card sample
              show_header_toggle: true
              header:
                image: 'https://www.home-assistant.io/images/lovelace/header-footer/balloons-header.png'
                type: picture
              entities:
                - sensor.date
                - sensor.date
                - sensor.date
                - sensor.date
                - sensor.date
      - type: custom:mod-card
        card:
          type: vertical-stack
          cards:
            - type: entities
              title: Entities card sample
              show_header_toggle: true
              header:
                image: 'https://www.home-assistant.io/images/lovelace/header-footer/balloons-header.png'
                type: picture
              entities:
                - sensor.date
                - sensor.date
                - sensor.date
                - sensor.date
                - sensor.date

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

[X] Understand that this is a channel for reporting bugs, not a support forum (https://community.home-assistant.io/).

[X] Have made sure I am using the latest version of the plugin.

[X] Have followed the troubleshooting steps of the "Common Problems" section of https://github.com/thomasloven/hass-config/wiki/Lovelace-Plugins.

[X] Understand that leaving one or more boxes unticked or failure to follow the template above may increase the time required to handle my bug-report, or cause it to be closed without further action.

Hi Thomas,

first of all, thank you for your effort and work in this community and for your plug-ins, greatly appreciate that.

My Home Assistant version: 0.110.4

My lovelace configuration method (GUI or yaml):
GUI

What I am doing:
I am trying to get rid of the box shadow of Mini-Media-Player to suite my UI-Design:
see: https://community.home-assistant.io/t/google-inspired-home-assistant-on-mobile/202191

What I expected to happen:
i expect to get rid of the box shadow with following code:

entity: media_player.sonos_wohnzimmer
show_header_toggle: false
icon: 'mdi:play-box-outline'
name: Sonos Play One Wohnzimmer
artwork: full-cover
style: |
  ha-card {
    box-shadow: none;
    webkit-box-shadow: none;
  } 
type: 'custom:mini-media-player'

What happened instead:
nothing

Minimal steps to reproduce:

# The least ammount of code possible to reproduce my error

entity: media_player.sonos_wohnzimmer
show_header_toggle: false
icon: 'mdi:play-box-outline'
name: Sonos Play One Wohnzimmer
artwork: full-cover
style: |
  ha-card {
    box-shadow: none;
    webkit-box-shadow: none;
  } 
type: 'custom:mini-media-player'


# End of code

Error messages from the browser console:

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

[x] Understand that this is a channel for reporting bugs, not a support forum (https://community.home-assistant.io/).

[x] Have made sure I am using the latest version of the plugin.

[ ] Have followed the troubleshooting steps of the "Common Problems" section of https://github.com/thomasloven/hass-config/wiki/Lovelace-Plugins.

[x] Understand that leaving one or more boxes unticked or failure to follow the template above may increase the time required to handle my bug-report, or cause it to be closed without further action.

Please add support for one click "Add to Lovelace" link in HACS.

I recently set up a new HassOS test instance VM and I noticed HACS was added by default. I needed to get card-mod installed but for what ever reason, it was quite a bit more difficult than setting up most of my other plugins. With these other plugins a Link was provided via HACKS that added the entry into the "resources:" config of Lovelace and made the install effortless.

With HomeAssistant growing so quickly, this functionality would be awesome to add especially for new users. Additionally many of the popular plugins already support the "add to Lovelace" function.

FYI: the proper url listed in the install guide here is wrong as the module is no longer card-modder.js

My Home Assistant version: 0.105.3

My lovelace configuration method (GUI or yaml):
Yaml

What I am doing:
Simply upgraded to the newest card mod. Downgrading no-longer works either.

What I expected to happen:
This error is stopping all card-mod styles. Cards still work without styles. I'd expect the outcome would be to get styles back.

What happened instead:
No styles are applied.

Minimal steps to reproduce:
I don't know if I can. This is the error that is being produced from card tools that causes card-mod to fail. Removing card mod resources removes the error.

F12 Dev console (chrome):

Uncaught TypeError: Failed to resolve module specifier "card-tools/src/templates.js". Relative references must start with either "/", "./", or "../".

HA Logs:

2020-02-13 22:20:55 ERROR (MainThread) [frontend.js.latest.202001302] http://x:8123/lovelace/0:0:0 Uncaught TypeError: Failed to resolve module specifier "card-tools/src/templates.js". Relative references must start with either "/", "./", or "../".

The least ammount of code possible to reproduce my error

This is my test card that I play around with when developing appdaemon apps. I usually don't style it. Just added the 'example style' and it produces the same error.

  - id: testing
    icon: mdi:test-tube
    title: Testing
    style: |
      ha-card {
        color: red;
      }
    cards:
      - type: entities
        entities: 
          - switch.test_1
          - switch.test_2
          - light.test
          - light.test_1
          - light.test_2

Error messages from the browser console:

Uncaught TypeError: Failed to resolve module specifier "card-tools/src/templates.js". Relative references must start with either "/", "./", or "../".

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

[x ] Understand that this is a channel for reporting bugs, not a support forum (https://community.home-assistant.io/).

[x ] Have made sure I am using the latest version of the plugin.

[x ] Have followed the troubleshooting steps of the "Common Problems" section of https://github.com/thomasloven/hass-config/wiki/Lovelace-Plugins.

[x ] Understand that leaving one or more boxes unticked or failure to follow the template above may increase the time required to handle my bug-report, or cause it to be closed without further action.

My Home Assistant version: 0.95.4

My lovelace configuration method (GUI or yaml):
yaml

What I am doing:
The light is controlled from automation.

Lovelace Card Mod
The light switch vibrates and does not change the state.

- title: Test Card Mod
  icon: mdi:home
  cards:
    - type: entities
      style: |
        ha-card {
          border-radius: 10px;
        }
      entities:
        - entity: light.bedroom
    - type: entities
      style: |
        ha-card {
          border-radius: 10px;
        }
      entities:
        - type: custom:slider-entity-row
          entity: light.bedroom
          toggle: true
          name: Bedroom

Lovelace Card Modder
The light switch changes state without error.

- title: Test card-modder
  icon: mdi:home
  cards:
    - type: custom:card-modder
      style:
        border-radius: 10px
      card:
        type: entities
        entities:
         - entity: light.bedroom
    - type: custom:card-modder
      style:
        border-radius: 10px
      card:
        type: entities
        entities:
          - type: custom:slider-entity-row
            entity: light.bedroom
            toggle: true
            name: Bedroom

My Home Assistant version: 0.105.4

My lovelace configuration method (GUI or yaml): yaml

What I am doing:

Try to use it.

What I expected to happen:

To load correctly

What happened instead:

I get an error.

Minimal steps to reproduce:

Just install it and add this to ui-lovelace.yaml

  - url: /community_plugin/lovelace-card-tools/card-tools.js
    type: module  

  - url: /community_plugin/lovelace-card-mod/card-mod.js
    type: module

Error messages from the browser console:

(anonymous) @ bootstrap:83
(anonymous) @ calendar-card.js:1
index.js:21   CALENDAR-CARD     Version 3.108.2 
mini-graph-card-bundle.js:1  MINI-GRAPH-CARD  0.9.2 
button-card.js:1430   BUTTON-CARD   Version 3.1.0 
card-tools.js:1 CARD-TOOLS 2 IS INSTALLED  DeviceID: 0beeac99-09d49201
0:1 Uncaught TypeError: Failed to resolve module specifier "card-tools/src/templates.js". Relative references must start with either "/", "./", or "../".
simple-thermostat.js:1 simple-thermostat: 0.34.0
custom-header.js:145   CUSTOM-HEADER    Version 1.3.2  
banner-card.js:4 banner-card: 0.9.0
atomic_calendar.js:1 atomic_calendar v0.8.9 loaded

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

[X ] Understand that this is a channel for reporting bugs, not a support forum (https://community.home-assistant.io/).

[X] Have made sure I am using the latest version of the plugin.

[X] Have followed the troubleshooting steps of the "Common Problems" section of https://github.com/thomasloven/hass-config/wiki/Lovelace-Plugins.

[X] Understand that leaving one or more boxes unticked or failure to follow the template above may increase the time required to handle my bug-report, or cause it to be closed without further action.

My Home Assistant version: 0.105.2

My lovelace configuration method (GUI or yaml): YAML

What I am doing: Trying to change icon color based on entity state

What I expected to happen: The icon to change color

What happened instead: Got error in the logs and the color doesn't change (this was working before 0.105.x release

Minimal steps to reproduce:

# The least ammount of code possible to reproduce my error
          - type: entities
            show_header_toggle: false
            entities:
              - type: "custom:restriction-card"
                row: true
                card:
                  type: entities
                  name: UK Powerstrip
                  entity: switch.studio_andrea_uk_powerstrip
                  tap_action:
                    action: none
                style: |
                  :host {
                    --paper-item-icon-color:
                      {% if is_state(config.entity, 'on') %}
                        rgb(251, 205, 65);
                      {% elif is_state(config.entity, 'off') %}
                        rgb(2550, 0, 0);
                      {% else %}
                        rgb(128, 128, 128);
                      {% endif %}
                  }

# End of code

Error messages from the browser console:
None in the console, this is from HA logs:

2020-02-07 12:48:07 ERROR (MainThread) [homeassistant.components.websocket_api.http.connection.139907224751376] Error handling message: Unknown error
Traceback (most recent call last):
  File "/home/ha/homeassistant/lib/python3.7/site-packages/homeassistant/helpers/template.py", line 221, in async_render
    return compiled.render(kwargs).strip()
  File "/home/ha/homeassistant/lib/python3.7/site-packages/jinja2/asyncsupport.py", line 76, in render
    return original_render(self, *args, **kwargs)
  File "/home/ha/homeassistant/lib/python3.7/site-packages/jinja2/environment.py", line 1008, in render
    return self.environment.handle_exception(exc_info, True)
  File "/home/ha/homeassistant/lib/python3.7/site-packages/jinja2/environment.py", line 780, in handle_exception
    reraise(exc_type, exc_value, tb)
  File "/home/ha/homeassistant/lib/python3.7/site-packages/jinja2/_compat.py", line 37, in reraise
    raise value.with_traceback(tb)
  File "<template>", line 3, in top-level template code
  File "/home/ha/homeassistant/lib/python3.7/site-packages/jinja2/sandbox.py", line 440, in call
    return __context.call(__obj, *args, **kwargs)
  File "/home/ha/homeassistant/lib/python3.7/site-packages/homeassistant/helpers/template.py", line 983, in wrapper
    return func(hass, *args[1:], **kwargs)
  File "/home/ha/homeassistant/lib/python3.7/site-packages/homeassistant/helpers/template.py", line 646, in is_state
    state_obj = _get_state(hass, entity_id)
  File "/home/ha/homeassistant/lib/python3.7/site-packages/homeassistant/helpers/template.py", line 470, in _get_state
    state = hass.states.get(entity_id)
  File "/home/ha/homeassistant/lib/python3.7/site-packages/homeassistant/core.py", line 876, in get
    return self._states.get(entity_id.lower())
jinja2.exceptions.UndefinedError: 'dict object' has no attribute 'entity'

During handling of the above exception, another exception occurred:

Traceback (most recent call last):
  File "/home/ha/homeassistant/lib/python3.7/site-packages/homeassistant/components/websocket_api/connection.py", line 95, in async_handle
    handler(self.hass, self, schema(msg))
  File "/home/ha/homeassistant/lib/python3.7/site-packages/homeassistant/components/websocket_api/commands.py", line 254, in handle_render_template
    state_listener()
  File "/home/ha/homeassistant/lib/python3.7/site-packages/homeassistant/components/websocket_api/commands.py", line 242, in state_listener
    msg["id"], {"result": template.async_render(variables)}
  File "/home/ha/homeassistant/lib/python3.7/site-packages/homeassistant/helpers/template.py", line 223, in async_render
    raise TemplateError(err)
homeassistant.exceptions.TemplateError: UndefinedError: 'dict object' has no attribute 'entity'
2020-02-07 12:48:07 ERROR (MainThread) [homeassistant.components.websocket_api.http.connection.139907224751376] Error handling message: Unknown error
Traceback (most recent call last):
  File "/home/ha/homeassistant/lib/python3.7/site-packages/homeassistant/helpers/template.py", line 221, in async_render
    return compiled.render(kwargs).strip()
  File "/home/ha/homeassistant/lib/python3.7/site-packages/jinja2/asyncsupport.py", line 76, in render
    return original_render(self, *args, **kwargs)
  File "/home/ha/homeassistant/lib/python3.7/site-packages/jinja2/environment.py", line 1008, in render
    return self.environment.handle_exception(exc_info, True)
  File "/home/ha/homeassistant/lib/python3.7/site-packages/jinja2/environment.py", line 780, in handle_exception
    reraise(exc_type, exc_value, tb)
  File "/home/ha/homeassistant/lib/python3.7/site-packages/jinja2/_compat.py", line 37, in reraise
    raise value.with_traceback(tb)
  File "<template>", line 3, in top-level template code
  File "/home/ha/homeassistant/lib/python3.7/site-packages/jinja2/sandbox.py", line 440, in call
    return __context.call(__obj, *args, **kwargs)
  File "/home/ha/homeassistant/lib/python3.7/site-packages/homeassistant/helpers/template.py", line 983, in wrapper
    return func(hass, *args[1:], **kwargs)
  File "/home/ha/homeassistant/lib/python3.7/site-packages/homeassistant/helpers/template.py", line 646, in is_state
    state_obj = _get_state(hass, entity_id)
  File "/home/ha/homeassistant/lib/python3.7/site-packages/homeassistant/helpers/template.py", line 470, in _get_state
    state = hass.states.get(entity_id)
  File "/home/ha/homeassistant/lib/python3.7/site-packages/homeassistant/core.py", line 876, in get
    return self._states.get(entity_id.lower())
jinja2.exceptions.UndefinedError: 'dict object' has no attribute 'entity'

During handling of the above exception, another exception occurred:

Traceback (most recent call last):
  File "/home/ha/homeassistant/lib/python3.7/site-packages/homeassistant/components/websocket_api/connection.py", line 95, in async_handle
    handler(self.hass, self, schema(msg))
  File "/home/ha/homeassistant/lib/python3.7/site-packages/homeassistant/components/websocket_api/commands.py", line 254, in handle_render_template
    state_listener()
  File "/home/ha/homeassistant/lib/python3.7/site-packages/homeassistant/components/websocket_api/commands.py", line 242, in state_listener
    msg["id"], {"result": template.async_render(variables)}
  File "/home/ha/homeassistant/lib/python3.7/site-packages/homeassistant/helpers/template.py", line 223, in async_render
    raise TemplateError(err)
homeassistant.exceptions.TemplateError: UndefinedError: 'dict object' has no attribute 'entity'
2020-02-07 12:48:08 ERROR (MainThread) [homeassistant.components.websocket_api.http.connection.139907224751376] Error handling message: Unknown error
Traceback (most recent call last):
  File "/home/ha/homeassistant/lib/python3.7/site-packages/homeassistant/helpers/template.py", line 221, in async_render
    return compiled.render(kwargs).strip()
  File "/home/ha/homeassistant/lib/python3.7/site-packages/jinja2/asyncsupport.py", line 76, in render
    return original_render(self, *args, **kwargs)
  File "/home/ha/homeassistant/lib/python3.7/site-packages/jinja2/environment.py", line 1008, in render
    return self.environment.handle_exception(exc_info, True)
  File "/home/ha/homeassistant/lib/python3.7/site-packages/jinja2/environment.py", line 780, in handle_exception
    reraise(exc_type, exc_value, tb)
  File "/home/ha/homeassistant/lib/python3.7/site-packages/jinja2/_compat.py", line 37, in reraise
    raise value.with_traceback(tb)
  File "<template>", line 3, in top-level template code
  File "/home/ha/homeassistant/lib/python3.7/site-packages/jinja2/sandbox.py", line 440, in call
    return __context.call(__obj, *args, **kwargs)
  File "/home/ha/homeassistant/lib/python3.7/site-packages/homeassistant/helpers/template.py", line 983, in wrapper
    return func(hass, *args[1:], **kwargs)
  File "/home/ha/homeassistant/lib/python3.7/site-packages/homeassistant/helpers/template.py", line 646, in is_state
    state_obj = _get_state(hass, entity_id)
  File "/home/ha/homeassistant/lib/python3.7/site-packages/homeassistant/helpers/template.py", line 470, in _get_state
    state = hass.states.get(entity_id)
  File "/home/ha/homeassistant/lib/python3.7/site-packages/homeassistant/core.py", line 876, in get
    return self._states.get(entity_id.lower())
jinja2.exceptions.UndefinedError: 'dict object' has no attribute 'entity'

During handling of the above exception, another exception occurred:

Traceback (most recent call last):
  File "/home/ha/homeassistant/lib/python3.7/site-packages/homeassistant/components/websocket_api/connection.py", line 95, in async_handle
    handler(self.hass, self, schema(msg))
  File "/home/ha/homeassistant/lib/python3.7/site-packages/homeassistant/components/websocket_api/commands.py", line 254, in handle_render_template
    state_listener()
  File "/home/ha/homeassistant/lib/python3.7/site-packages/homeassistant/components/websocket_api/commands.py", line 242, in state_listener
    msg["id"], {"result": template.async_render(variables)}
  File "/home/ha/homeassistant/lib/python3.7/site-packages/homeassistant/helpers/template.py", line 223, in async_render
    raise TemplateError(err)
homeassistant.exceptions.TemplateError: UndefinedError: 'dict object' has no attribute 'entity'

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

[X] Understand that this is a channel for reporting bugs, not a support forum (https://community.home-assistant.io/).

[X] Have made sure I am using the latest version of the plugin.

[X] Have followed the troubleshooting steps of the "Common Problems" section of https://github.com/thomasloven/hass-config/wiki/Lovelace-Plugins.

[X] Understand that leaving one or more boxes unticked or failure to follow the template above may increase the time required to handle my bug-report, or cause it to be closed without further action.

My Home Assistant version: 0.105.5

My lovelace configuration method (GUI or yaml):
GUI

What I am doing:
Using mod-card.

What I expected to happen:
Not inject styles into my lovelace config.

What happened instead:
It injects styles into my lovelace config. ;)

      - type: 'custom:mod-card'
        style: |-

          ha-card {
            background: none;
            box-shadow: none;
          }
          ha-card {
            background: none;
            box-shadow: none;
          }
          ha-card {
            background: none;
            box-shadow: none;
          }
          ha-card {
            background: none;
            box-shadow: none;
          }

Minimal steps to reproduce:
Use card-mod to modify a vertical stack.

- type: 'custom:mod-card'
  style: |-
    ha-card {
      padding: 2px;
    }
  card:
    type: 'vertical-stack'
    cards:
    ...

Error messages from the browser console:
None

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

[x] Understand that this is a channel for reporting bugs, not a support forum (https://community.home-assistant.io/).

[x] Have made sure I am using the latest version of the plugin.

[x] Have followed the troubleshooting steps of the "Common Problems" section of https://github.com/thomasloven/hass-config/wiki/Lovelace-Plugins.

[x] Understand that leaving one or more boxes unticked or failure to follow the template above may increase the time required to handle my bug-report, or cause it to be closed without further action.

It's not obvious from any of the examples (despite showing colored bulbs etc) how this is achieved. I've only succeeded in changing the background color of icons, not the actual color. Many thanks.

My Home Assistant version: 0.105.4

My lovelace configuration method (GUI or yaml): yaml

What I am doing: basic test to see if card-mod works

- type: entities
          title: Family
          show_header_toggle: false
          style: |
            ha-card {
              color: red;
            }          
          entities:
            - entity: sensor.my_street
              name: John

What I expected to happen:

I expect "John" to be red

What happened instead:

Nothing happens.

Minimal steps to reproduce:

I've installed both card-mod and card-tools.

# The least ammount of code possible to reproduce my error

- type: entities
     title: Family
     show_header_toggle: false
     style: |
         ha-card {
           color: red;
         }          
     entities:
       - entity: sensor.my_street
          name: John

# End of code

Error messages from the browser console:

0:1 Uncaught TypeError: Failed to resolve module specifier "card-tools/src/templates.js". Relative references must start with either "/", "./", or "../".

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

[X] Understand that this is a channel for reporting bugs, not a support forum (https://community.home-assistant.io/).

[X] Have made sure I am using the latest version of the plugin.

[X ] Have followed the troubleshooting steps of the "Common Problems" section of https://github.com/thomasloven/hass-config/wiki/Lovelace-Plugins.

[X] Understand that leaving one or more boxes unticked or failure to follow the template above may increase the time required to handle my bug-report, or cause it to be closed without further action.

My Home Assistant version:0.106

My lovelace configuration method (GUI or yaml): Yaml

Hello, in my configuration I wrote this code and it worked fine before 105.5, but the 106 update gives me errors. You can help?
  I previously worked with card-modder and I am changing everything to this card.

In Google Chrome, I cleared the cache and it works, in Firefox too, ... but in the Android app it's still happening.
  Thank you for your work, it is very good !!!!!!!

This is the code:

 - type: custom:mod-card

   style: |  
     ha-card {                
       background-repeat: no-repeat;
       background-size: 100% 68px;
       background-image: url("/local/lovelace/cardbackK.png");
       border-radius: 10px;
       border: solid 1px rgba(100,100,100,0.3);
       box-shadow: 3px 3px rgba(0,0,0,0.4);     
       overflow: hidden;
       --ha-card-background: rgba(0,0,0,0) 
     }  
   card:                                

     type: entities
     title: Comedor Sur         
     show_header_toggle: false
     entities:
       - type: custom:vertical-stack-in-card
         cards:
           - type: custom:mod-card
             card:
                type: glance
                show_header_toggle: false
                entities: 
                 - entity: binary_sensor.puerta_sur
                   name: Puerta
                 - entity: binary_sensor.ventana_cocina
                   name: Cocina 
                 - entity: binary_sensor.balcon_comedor_sur
                   name: Balcón
                 - entity: binary_sensor.ventana_escaleras
                   name: Escalera
                 - entity: binary_sensor.ventana_mesa  
                   name: Mesa

             style: |  
               ha-card {
                 margin: 0px !important;
                 background: transparent;
               }
           - type: custom:mod-card
             card:
               type: thermostat
               entity: climate.kuc0000725  

             style: |  
               ha-card {      
                 margin: 0px !important;
                 background: transparent;    
               }             
           - type: custom:mod-card
             card:
                type: glance
                show_header_toggle: false
                entities: 
                 - switch.rele_1         
                 - sensor.temperatura_actual_sur
                 - sensor.temperatura_fijada_sur
                 - sensor.valvula_sur
                 - entity: binary_sensor.kuc0000725_lowbat
                   name: Batería
             style: |  
               ha-card {
                 margin: 0px !important;
                 color: transparent;
              }

End of code

Error messages from the browser console:

Cannot assign to read only property 'style' of object '#'
type: 'custom:mod-card'
style: |
ha-card {
background-repeat: no-repeat;
background-size: 100% 68px;
background-image: url("/local/lovelace/cardbackK.png");
border-radius: 10px;
border: solid 1px rgba(100,100,100,0.3);
box-shadow: 3px 3px rgba(0,0,0,0.4);
overflow: hidden;
--ha-card-background: rgba(0,0,0,0)
card:
type: entities
title: Comedor Sur
show_header_toggle: false
entities:
- type: 'custom:vertical-stack-in-card'
cards:
- type: 'custom:mod-card'
card:
type: glance
show_header_toggle: false
entities:
- entity: binary_sensor.puerta_sur
name: Puerta
- entity: binary_sensor.ventana_cocina
name: Cocina
- entity: binary_sensor.balcon_comedor_sur
name: Balcón
- entity: binary_sensor.ventana_escaleras
name: Escalera
- entity: binary_sensor.ventana_mesa
name: Mesa
style: |
ha-card {
margin: 0px !important;
background: transparent;
}
- type: 'custom:mod-card'
card:
type: thermostat
entity: climate.kuc0000725
style: |
ha-card {
margin: 0px !important;
background: transparent;
}
- type: 'custom:mod-card'
card:
type: glance
show_header_toggle: false
entities:
- switch.rele_1
- sensor.temperatura_actual_sur
- sensor.temperatura_fijada_sur
- sensor.valvula_sur
- entity: binary_sensor.kuc0000725_lowbat
name: Batería
style: |
ha-card {
margin: 0px !important;
color: transparent;
}

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

[ ] Understand that this is a channel for reporting bugs, not a support forum (https://community.home-assistant.io/).

[ ] Have made sure I am using the latest version of the plugin.

[ ] Have followed the troubleshooting steps of the "Common Problems" section of https://github.com/thomasloven/hass-config/wiki/Lovelace-Plugins.

[ ] Understand that leaving one or more boxes unticked or failure to follow the template above may increase the time required to handle my bug-report, or cause it to be closed without further action.

My Home Assistant version: 0.108.1
My lovelace configuration method (GUI or yaml): GUI
What I am doing: change icon color by sensor state
What I expected to happen:
What happened instead: nothing after update to 0.108, previous was ok
Minimal steps to reproduce:

entity: sensor.solar_grid_status
name: GRID
style: |
ha-card {
background:
{% if states('sensor.solar_ac_input')|int > 200%}
{% else %}
red
{% endif %};
--paper-item-icon-color:
{% if is_state('sensor.solar_grid_status', 'AC Use' ) %}
rgb(80, 171, 48)
{% endif %};
}
theme: default
type: sensor

[ x] Understand that this is a channel for reporting bugs, not a support forum (https://community.home-assistant.io/).

[x ] Have made sure I am using the latest version of the plugin.

[ x] Have followed the troubleshooting steps of the "Common Problems" section of https://github.com/thomasloven/hass-config/wiki/Lovelace-Plugins.

[x ] Understand that leaving one or more boxes unticked or failure to follow the template above may increase the time required to handle my bug-report, or cause it to be closed without further action.

My Home Assistant version: 0.101.3

My lovelace configuration method (GUI or yaml):

type: entities
entities:
  - entity: device_tracker.XXXX1
  - entity: device_tracker.XXXX2
style: |
  :host {
    color: {% if is_state(config.entity, 'Away') %}black{%else %}blue{% endif %};
  }

What I am doing:
Trying to color text in rows of an entities card

What I expected to happen:
Rows to be colored

What happened instead:
Rows are not colored

# See Above

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

[X] Understand that this is a channel for reporting bugs, not a support forum (https://community.home-assistant.io/).

[X] Have made sure I am using the latest version of the plugin.

[X] Have followed the troubleshooting steps of the "Common Problems" section of https://github.com/thomasloven/hass-config/wiki/Lovelace-Plugins.

[X] Understand that leaving one or more boxes unticked or failure to follow the template above may increase the time required to handle my bug-report, or cause it to be closed without further action.

Hi @thomasloven I know popup-card is deprecated but for now it's widely used in my HA.
I've started the process of replacing card-modder with card-mod in my setup, and the only thing missing are changing the popup-cards.

Tried also with ha-card, but still it doesn't apply the new CSS.

Old config:

  camera.bmw_530i_xdrive:
    title: Sist kjente lokasjon
    large: false
    card:
      type: custom:card-modder
      card:
        type: picture-entity
        entity: camera.bmw_530i_xdrive         
      style:
        border-radius: 0px
    style:                 
      border-radius: 15px
      background-color: rgba(100,100,100,0.3)
      box-shadow: 0px 0px 10px 10px rgba(57,128,228);

New config:

 camera.bmw_530i_xdrive:
    style: |
      :host {
        border-radius: 15px;
        background-color: rgba(100,100,100,0.3);
        box-shadow: 0px 0px 10px 10px rgba(57,128,228);
      }
    title: Sist kjente lokasjon
    large: false
    card:
      type: picture-entity
      entity: camera.bmw_530i_xdrive  

I hope you will still assist me in achieving this even if popup-card is deprecated.

My Home Assistant version: 0.105.3

My lovelace configuration method (GUI or yaml): YAML

What I am doing:

Since updating to 0.105.x (currently 0.105.3), some entity types in glance cards no longer accept my styles for the "active" color. Examples are input_boolean & automation, and both worked fine under 0.104.x. Here's a snippet from a glance card:

              - entity: input_boolean.heat_water
                name: Heat
                tap_action:
                  action: toggle
                hold_action:
                  action: more-info
                icon: 'mdi:fire'
                style: |
                  :host {
                    --paper-item-icon-color:
                      {% if states(config.entity) == 'on' %} red;
                      {% else %} green;
                      {% endif %}
                  }
            type: glance

When the input_boolean is off, the icon is green as expected. When it's on, I get the default color (yellow) instead of red. If I open the inspector, I still see the card-mod element in what looks like the correct place with the correct color based on the state, but the icon itself gets the default active color (yellow).

Adding state_color: true to the glance card doesn't help, but I don't think it's supposed to be used there anyway. Same happens for automation entities in a glance card.

Error messages from the browser console: None

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

[X] Understand that this is a channel for reporting bugs, not a support forum (https://community.home-assistant.io/).

[X] Have made sure I am using the latest version of the plugin.

[X] Have followed the troubleshooting steps of the "Common Problems" section of https://github.com/thomasloven/hass-config/wiki/Lovelace-Plugins.

[X] Understand that leaving one or more boxes unticked or failure to follow the template above may increase the time required to handle my bug-report, or cause it to be closed without further action.

My Home Assistant version: 0.98.1

My lovelace configuration method (GUI or yaml):
YAML

What I am doing:
I modified my map card to resize the marker as described in #8
(Plugin & HASS up2date - all caches cleared)

What I expected to happen:
At least to resize after some seconds - or better on page load

What happened instead:
With lovelace-card-mod version 4 & 5 the style is only applied while switching to another view. As soon as I press the icon of another view, the marker resizes.

Minimal steps to reproduce:
Map card with following style added:

# The least ammount of code possible to reproduce my error

      ha-entity-marker:
        $: |
          .marker {
            width: 24px!important;
            height: 24px!important;
            border: 0px!important;
            margin-top: 12px!important;
            margin-left: 12px!important;
          }

# End of code

Error messages from the browser console:
No errors or warnings (even in debug_cardMod: true mode)

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

[X] Understand that this is a channel for reporting bugs, not a support forum (https://community.home-assistant.io/).

[X] Have made sure I am using the latest version of the plugin.

[X] Have followed the troubleshooting steps of the "Common Problems" section of https://github.com/thomasloven/hass-config/wiki/Lovelace-Plugins.

[X] Understand that leaving one or more boxes unticked or failure to follow the template above may increase the time required to handle my bug-report, or cause it to be closed without further action.

I have problem with image css format, i try to reference with #id but do not work,

  - badges: []
    title: P ALTA
    panel: true
    cards:
      - type: picture-elements
        title: esto es una prueba
        style: |
          ha-card {
            height:70vh;
          }
          .card-header {
            font-size: 1px;
          }
          #image {
            height: 70vh;
            width: auto;
          }
        image: /local/3d_planta_alta.jpg
        elements:
          - entity: alarm_control_panel.alarma
            style:
              '--iron-icon-height': 50px
              '--iron-icon-width': 50px
              left: 94%
              top: 4%
            type: state-icon

My Home Assistant version: 0.110.1

My lovelace configuration method (GUI or yaml): yaml

What I am doing:
I am trying to get rid of shadow and border around auto-entities card using mod-card workaround

What I expected to happen:
Flattening the view due to shadow and border to be gone

What happened instead:
The shadow around the Brightness and Temperature box (auto-entities card) is not disappearing.

Minimal steps to reproduce:

# The least ammount of code possible to reproduce my error
cards:
- type: vertical-stack
  title: Kitchen Controls
  cards:
  - type: entities
    title: Kitchen Lights
    entities:
    - light.kitchen_intelite
    - type: custom:mod-card
      style: |
        ha-card {
          border: 0px;
          background: none;
          box-shadow: none;
        }
      card:
        type: custom:auto-entities
        show_empty: false
        card:
          type: entities
          show_header_toggle: false
        filter:
          template: |
            {% if is_state('light.kitchen_intelite','on') and is_state('switch.kitchen_intelite_dark_mode','off')%}
             input_number.kitchen_intelite_brightness
              input_number.kitchen_intelite_temperature
            {% endif %}
            {% if is_state('light.kitchen_intelite','on') and is_state('switch.kitchen_intelite_dark_mode','on')%}
             input_number.kitchen_intelite_brightness_dark_mode
            {% endif %}
    footer:
      type: buttons
      entities:
      - entity: switch.kitchen_intelite_mourn_mode
      - entity: switch.kitchen_intelite_noon_mode
      - entity: switch.kitchen_intelite_eve_mode
      - entity: switch.kitchen_intelite_dark_mode


# End of code

Error messages from the browser console:

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

[x] Understand that this is a channel for reporting bugs, not a support forum (https://community.home-assistant.io/).

[x] Have made sure I am using the latest version of the plugin.

[x] Have followed the troubleshooting steps of the "Common Problems" section of https://github.com/thomasloven/hass-config/wiki/Lovelace-Plugins.

[x] Understand that leaving one or more boxes unticked or failure to follow the template above may increase the time required to handle my bug-report, or cause it to be closed without further action.

hello
how can i solve this?
thanks

Is there any plans to add styling options for horizontal/vertical-stack card or custom:vertical-stack-in-card? I can not figure out how to change the background for these elements...

If it works now, I will be grateful for the tip of how to do it

Edit: I was unaware that I could not use the gui to add the cards but had to be chaning the config file directly. Still cant find that info in the docs but anyway now it works for me

My Home Assistant version: 0.XX.X

My lovelace configuration method (GUI or yaml):
GUI

What I am doing:
Trying to add a card with custom style

What I expected to happen:
Custom style to be applied

What happened instead:
ERror showing
Expected a value of type undefined for style

Minimal steps to reproduce:
Installed lovelace-card-mod through HACS, then pressed "add to lovelace", then restarted HA then used an example code:
type: entity-button
entity: light.malarbord
style: |
ha-card {
background: {% if is_state('light.bed_light', 'on') %} green {% endif %};
}

# The least ammount of code possible to reproduce my error



# End of code

Error messages from the browser console:

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

[x] Understand that this is a channel for reporting bugs, not a support forum (https://community.home-assistant.io/).

[x] Have made sure I am using the latest version of the plugin.

[x] Have followed the troubleshooting steps of the "Common Problems" section of https://github.com/thomasloven/hass-config/wiki/Lovelace-Plugins.

[x] Understand that leaving one or more boxes unticked or failure to follow the template above may increase the time required to handle my bug-report, or cause it to be closed without further action.

My Home Assistant version: 0.106.0

My lovelace configuration method (GUI or yaml): yaml

What I am doing:
Applying custom styles on vertical-stack-in cards.

What I expected to happen:
No errors

What happened instead:
Errors due to recent Lovelace changes: https://developers.home-assistant.io/blog/2020/02/18/106-custom-card-changes/

Minimal steps to reproduce:

- type: custom:mod-card
              style: |
                ha-card {
                  background-color: var(--primary-background-color);
                  border-radius: 15px;
                  box-shadow: 
                    {% if is_state('sun.sun', 'above_horizon') %}
                      -4px -4px 4px 0 rgba(255,255,255,.5),4px 4px 4px 0 rgba(0,0,0,.03);
                    {% else %}
                      -4px -4px 4px 0 rgba(50, 50, 50,.5),4px 4px 4px 0 rgba(0,0,0,.15);
                    {% endif %}
                }
              card:
                type: custom:vertical-stack-in-card
                cards:
                  - type: glance
                    title: Home Assistant
                    columns: 7
                    show_name: false
                    entities:
                      - entity: sensor.count_automations
                      - entity: sensor.count_binary_sensors
                  - type: entities
                    show_header_toggle: false
                    entities:
                      - entity: sensor.potential_breaking_changes
                      - entity: input_select.log_level
            

Error messages from the browser console:
[Error] mod-card
TypeError: Attempted to assign to readonly property.
setConfig — card-mod.js:1:7794
o — hui-warning-element.ts:18
_createCardElement — hui-horizontal-stack-card.ts:21
_rebuildCard — hui-horizontal-stack-card.ts:21
(anonymous function) — hui-horizontal-stack-card.ts:21
dispatchEvent
r — fire_event.ts:76
(anonymous function) — hui-warning-element.ts:18
promiseReactionJob
o (chunk.a7f86c7205b90ff898cc.js:2212:232412)
_createCardElement (chunk.a7f86c7205b90ff898cc.js:2696:328273)
_rebuildCard (chunk.a7f86c7205b90ff898cc.js:2696:328458)
(anonymous function) (chunk.a7f86c7205b90ff898cc.js:2696:328389)
dispatchEvent
r (app.83a8dbf7.js:2:45042)
(anonymous function) (chunk.a7f86c7205b90ff898cc.js:2212:232735)
promiseReactionJob

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

[x] Understand that this is a channel for reporting bugs, not a support forum (https://community.home-assistant.io/).

[x] Have made sure I am using the latest version of the plugin.

[x] Have followed the troubleshooting steps of the "Common Problems" section of https://github.com/thomasloven/hass-config/wiki/Lovelace-Plugins.

[x] Understand that leaving one or more boxes unticked or failure to follow the template above may increase the time required to handle my bug-report, or cause it to be closed without further action.

My Home Assistant version: 0.97.2

My lovelace configuration method (GUI or yaml):
GUI

What I am doing:
I modded the map card to reduce the size of the device_tracker markers.

What I expected to happen:
That they are always smaller from the beginning they appear

What happened instead:
When I load the view, the markers appear in their original size. After several seconds (2-15 sec) they scale down to the intended size. When I click on them, the scale down immediately.

Minimal steps to reproduce:
Add the yaml code for a map card with a device_tracker (no entity_picture needed)

# The least ammount of code possible to reproduce my error

aspect_ratio: '3:2'
dark_mode: true
default_zoom: 14
entities:
  - entity: device_tracker.first_tracker
  - entity: device_tracker.second_tracker
style:
  .: |
    .leaflet-control-zoom {
      opacity: 0.2;
    }
    .leaflet-control-attribution {
      opacity: 0.2;
    }
    paper-icon-button{
      opacity: 0.3;
    }
    .leaflet-marker-icon{
        margin-top: -18px!important;
        margin-left: -18px!important;
        width: 32px!important;
        height: 32px!important;
    }
  ha-entity-marker:
    $: |
      .marker {
        width: 32px!important;
        height: 32px!important;
      }
type: map


# End of code

Error messages from the browser console:
No errors

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

[x] Understand that this is a channel for reporting bugs, not a support forum (https://community.home-assistant.io/).

[x] Have made sure I am using the latest version of the plugin.

[x] Have followed the troubleshooting steps of the "Common Problems" section of https://github.com/thomasloven/hass-config/wiki/Lovelace-Plugins.

[x] Understand that leaving one or more boxes unticked or failure to follow the template above may increase the time required to handle my bug-report, or cause it to be closed without further action.

My Home Assistant version: 0.98.1

My Lovelace configuration method yaml:

What I am doing:
Trying to make dynamic image and icons color changes regarding status. It worked in version 3.

What I expected to happen:
Change background image and icons colors on status change.

What happened instead:
Nothing

Minimal steps to reproduce:

# The least ammount of code possible to reproduce my error
            style: |
               ha-card {
                 --paper-item-icon-color: white;
                 --primary-text-color: white;
                 --secondary-text-color: white;
                 background-image: url("/local/lovelace/home/weather-background-[[ sun.sun.state ]].gif");
               }


# End of code

Error messages from the browser console:

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

[x ] Understand that this is a channel for reporting bugs, not a support forum (https://community.home-assistant.io/).

[x ] Have made sure I am using the latest version of the plugin.

[x ] Have followed the troubleshooting steps of the "Common Problems" section of https://github.com/thomasloven/hass-config/wiki/Lovelace-Plugins.

[x ] Understand that leaving one or more boxes unticked or failure to follow the template above may increase the time required to handle my bug-report, or cause it to be closed without further action.

I have a rule to modify my style, but this is only updated when I reload lovelace, not on state change:

cards:
  - type: vertical-stack
    cards:
    - type: custom:layout-card
      layout: horizontal
      max_columns: 2
      max_width: [100%, 100%]
      cards:
        - type: entities
          title: Luzes
          entities:
            - entity: light.maindoor_light
            - entity: light.hallway_spotlight
            - type: custom:slider-entity-row
              entity: light.hallway_tablelight
              toggle: true
              style: |
                :host {
                  color: {% if is_state('binary_sensor.hallway_tablelight_autoon', 'on') %} green {% endif %};
                }
            - entity: light.christmas_light_1

My Home Assistant version: 0.105.2

My lovelace configuration method (GUI or yaml): GUI

What I am doing:
Modifying the CSS of the entities card.

What I expected to happen:
The code to not self duplicate

What happened instead:
When the UI editor is open or closed the code duplicates itself

Minimal steps to reproduce:
The code I'm using is below. The part that it is adding and duplicating is

ha-card {
   background: none;
   box-shadow: none;
 }

Below is the code I'm using in the card through the UI editor

type: 'custom:mod-card'
style: |


  ha-card {
     background: url(/local/pics/ui/small-master-bedroom.jpg);
   }
card:
  type: vertical-stack
  cards:
    - type: horizontal-stack
      cards:
        - type: 'custom:button-card'
          entity: script.good_night_all_lights_off
          name: Living room
          show_icon: false
          styles:
            card:
              - background: '#FF704D'
              - border-radius: 5%
              - width: 110px
              - height: 45px
              - border: 2px dashed
          tap_action:
            action: navigate
            navigation_path: '#p1'
        - type: 'custom:button-card'
          entity: light.garage
          name: Master
          show_icon: false
          styles:
            card:
              - background: '#FF704D'
              - border-radius: 5%
              - width: 110px
              - height: 45px
              - border: 2px dashed
          tap_action:
            action: navigate
            navigation_path: '#p2'
        - type: 'custom:button-card'
          entity: light.garage
          name: Andrew
          show_icon: false
          styles:
            card:
              - background: '#FF704D'
              - border-radius: 5%
              - width: 110px
              - height: 45px
              - border: 2px dashed
          tap_action:
            action: navigate
            navigation_path: '#p3'
    - type: vertical-stack
      cards:
        - type: 'custom:state-switch'
          entity: hash
          style: ''
          default: p1
          transition: slide-right
          states:
            p1:
              type: entities
              style: |
                ha-card {
                  background: none;
                  box-shadow: none;
                 }
              entities:
                - type: 'custom:slider-entity-row'
                  entity: light.livingroom_dimmer_level
                  icon: 'mdi:ceiling-light'
                - type: divider
                - type: 'custom:slider-entity-row'
                  entity: light.living_room_lamp
                  icon: 'mdi:floor-lamp'
                - type: 'custom:rgb-light-card'
                  entity: light.living_room_lamp
                  colors:
                    - rgb_color:
                        - 255
                        - 127
                        - 255
                    - rgb_color:
                        - 241
                        - 224
                        - 181
                    - rgb_color:
                        - 239
                        - 210
                        - 117
                    - rgb_color:
                        - 255
                        - 0
                        - 21
                      brightness: 255
                      transition: 1
            p2:
              type: entities
              entities:
                - light.dining_room
                - light.entrance




# End of code

Error messages from the browser console:

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

[X ] Understand that this is a channel for reporting bugs, not a support forum (https://community.home-assistant.io/).

[X ] Have made sure I am using the latest version of the plugin.

[X ] Have followed the troubleshooting steps of the "Common Problems" section of https://github.com/thomasloven/hass-config/wiki/Lovelace-Plugins.

[X ] Understand that leaving one or more boxes unticked or failure to follow the template above may increase the time required to handle my bug-report, or cause it to be closed without further action.

Cant get any of them to work card-mod or card- modder
i copied the raw code and made a .js file in www folder. i also added type an url to resources raw edit.

i keep getting custom element doesn't exist

My Home Assistant version: 0.101.X

My lovelace configuration method (GUI or yaml): yaml

What I am doing:
After update HA to 0.101 I have errors in browser console with card-mod:

and vertical-stack-in-card cards rendering is invalid (when I disable card-mod everything is normal)

What I expected to happen:
no errors, correct rendering vertical-stack-in-card cards

Minimal steps to reproduce:

• update HA to 0.101
• add some style from card-mod

resources:
 - url: /community_plugin/lovelace-card-mod/card-mod.js
    type: module
...
...
- type: custom:vertical-stack-in-card
  title: "Kuchnia"
  cards:
    - type: glance
      show_name: false
      entities:
        - sensor.temperature_kuchnia
        - sensor.humidity_kuchnia
    - type: entities
      show_header_toggle: false
      entities:
        - binary_sensor.window_kuchnia
        - climate.thermostat_kuchnia
        - entity: sensor.dishwasher_kuchnia
          style: |
            :host {
              --paper-item-icon-color:
                {% if states(config.entity) == "zmywanie" %}
                  var(--state-icon-active-color)
                {% else %}
                  var(--state-icon-color)
                {% endif %}
            }

Error messages from the browser console:

Uncaught (in promise) TypeError: Cannot read property 'style' of undefined
    at /community_plugin/lovelace-card-mod/card-mod.js:1
    at NodeList.forEach (<anonymous>)
    at HTMLElement.customElements.get.firstUpdated (/community_plugin/lovelace-card-mod/card-mod.js:1)
    at HTMLElement.performUpdate (/frontend_latest/app.34e7b19f.js:2)
    at HTMLElement._enqueueUpdate (/frontend_latest/app.34e7b19f.js:2)

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

[X] Understand that this is a channel for reporting bugs, not a support forum (https://community.home-assistant.io/).

[X] Have made sure I am using the latest version of the plugin.

[X] Have followed the troubleshooting steps of the "Common Problems" section of https://github.com/thomasloven/hass-config/wiki/Lovelace-Plugins.

[X] Understand that leaving one or more boxes unticked or failure to follow the template above may increase the time required to handle my bug-report, or cause it to be closed without further action.

Probably not a bug, only I can't find a way to select the ha-icon, below two nested shadow roots, and change its color. A hint which selector should work in this case would be very appreciated:

DOM

ui-lovelace

     - entity: sensor.ics_1 # Rest
       style:
         .: |
           hui-generic-entity-row {
             color: red;
           }

result

I guess this is kinda a feature request.

I've been working quite a bit lately with the subscribeRenderTemplate method and rendering Jinja from the frontend. With reference to card-mod.js. I noticed that HA will extract entities from the template automatically and update the template as needed, but once you define entity_ids it will no longer extract entities. And as I'm pretty sure your aware of based on your code in card-mod.js, HA won't extract an entity from config.entity, so you have to manually specify it in entity_ids.

I did a bit of testing and found that it will extract an entity_id from non-nested variables.
For example if your variables are

{
  "config": {
    "entity": "myid"
  },
  "entity": "myid"
}

and you use a template such as "{{ states(entity) }} {{ states("anotherid") }}",
HA will be able to extract "myid" and "anotherid".

Having people use entity instead of config.entity would remove the need for entity_ids (naturally excluding templates that don't use an entity).

It's a little quirky but I thought I'd just mention it.

HA's extract entities method here.

My Home Assistant version: 0.95.4

My lovelace configuration method (GUI or yaml):
yaml

What I am doing:
I am trying to add green background to vertical stack

What I expected to happen:
Green background to vertical stack

What happened instead:
Nothing

This is my code:

- type: vertical-stack
  style: |
    #root {
      background: green
    }

My Home Assistant version: 0.110.4

My lovelace configuration method (GUI or yaml): GUI

What I am doing:
Create a entities card with a battery sensor which I want to change the icon color.

What I expected to happen:
The batterie icon should change its color to green.

What happened instead:
The icons is still displayed in the color of the Lovelace Theme.

Minimal steps to reproduce:

# The least ammount of code possible to reproduce my error

entities:
  - entity: sensor.openclose_5_battery_level
    name: Name
    style: |
      :host {   
         --iron-icon-fill-color: green ;
      }
type: entities

# End of code

Error messages from the browser console:

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

[X] Understand that this is a channel for reporting bugs, not a support forum (https://community.home-assistant.io/).

[X] Have made sure I am using the latest version of the plugin.

[X] Have followed the troubleshooting steps of the "Common Problems" section of https://github.com/thomasloven/hass-config/wiki/Lovelace-Plugins.

[X] Understand that leaving one or more boxes unticked or failure to follow the template above may increase the time required to handle my bug-report, or cause it to be closed without further action.

Looks like the hacs install does not install mod-card (which I attempted to use to change a horizontal-stack style). How should I proceed?

My Home Assistant version: 0.XX.X
0.102.3

My lovelace configuration method (GUI or yaml):
yaml

What I am doing:
I am trying to add some custom css to the slider-entity-row. I wan't the slider to look more like the bar_card.

What I expected to happen:
I expected it to be able to change the styling of the slider, I have been fiddling around in the browser inspect element and changed the css to look like I want. But when I went to add in the stryling nothing happens.

What happened instead:
Nothing.

Minimal steps to reproduce:

# The least ammount of code possible to reproduce my error

          - type: entities
            style: |
              div { 
                padding: 0px !important;
                margin: 0px !important;
              }
            entities: 
              - type: custom:slider-entity-row
                style: |
                  #sliderContainer {
                    margin-left: 0px !important;
                    margin-right: 0px !important;
                  }
                entity: light.dinner_table_light
                name: hide_state
                full_row: true
                hide_when_off: false
                hide_state: true

# End of code

Error messages from the browser console:
No error message, nothing happens.

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

[X] Understand that this is a channel for reporting bugs, not a support forum (https://community.home-assistant.io/).

[X] Have made sure I am using the latest version of the plugin.

[X] Have followed the troubleshooting steps of the "Common Problems" section of https://github.com/thomasloven/hass-config/wiki/Lovelace-Plugins.

[X] Understand that leaving one or more boxes unticked or failure to follow the template above may increase the time required to handle my bug-report, or cause it to be closed without further action.

When viewing the page for card-mod in hacs, it claims the configuration process is:

- url: /community_plugin/lovelace-card-mod/card-mod.js
  type: null

should be

- url: /community_plugin/lovelace-card-mod/card-mod.js
  type: module

Have had to help a few people on the forums and this was the root cause of their problems.

My Home Assistant version: 0.107.5

My lovelace configuration method (GUI or yaml): yaml

What I am doing:
To load modded picture-elements card in dashboard

What I expected to happen:
Card loaded without help of lovelace-card-preloader custom plugin

What happened instead:
Card is not loaded, instead in Dashboard red message appears with title "Custom element doesn't exist: hui-picture-elements-card."

If lovelace-card-preloader custom plugin is installed and configure in lovelace yaml file a la

preload:
  - picture-elements

then card is loaded.
Minimal steps to reproduce:

# The least amount of code possible to reproduce my error

      - type: custom:mod-card
        style: |
          ha-card {
            --paper-card-background-color: #155c9d;
            --primary-text-color: white;
            font-size: 1.3rem;
            font-style: bold
          }
        card:
          type: picture-elements
          image: /local/images/transparent_background.png
          elements:
            - type: image
              entity: vacuum.servantess
              camera_image: camera.servantess_map
              style:
                top: 50%
                left: 50%
                width: 100%
            ...

# End of code

Error messages from the browser console:
None

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

[x] Understand that this is a channel for reporting bugs, not a support forum (https://community.home-assistant.io/).

[x] Have made sure I am using the latest version of the plugin.

[x] Have followed the troubleshooting steps of the "Common Problems" section of https://github.com/thomasloven/hass-config/wiki/Lovelace-Plugins.

[x] Understand that leaving one or more boxes unticked or failure to follow the template above may increase the time required to handle my bug-report, or cause it to be closed without further action.