I’ve upgraded Home Assistant to 2023.10.0 and I lost a couple of views of my Dashboard. Trying to rebuild them right now, but running into a card_mod problem which was not there before the upgrade!
See screenshot below, I’m getting the error message: property card_mod is not allowed! What am I doing wrong?
And the configuration.yaml file I’ve the following:
And I’ve upgraded the card_mod.js file to the latest version as well! What am I doing wrong?
style
should be indented under card_mod
. So:
card_mod:
style: |
And the url should be “/local” not “/config/www”.
1 Like
Thanks for the suggestions, but unfortunately that doesn’t solve the problem, see screenshots.
Other suggestions ?
And where should the card_mod.js file be stored? Currently I’ve it in: /config/www/community/lovelace-card-mod/card-mod.js
If your config works, and this is only about the error messages in the vscode addon, i think you have to live with it.
opened 11:00PM - 02 Feb 21 UTC
closed 10:21PM - 09 Jun 21 UTC
bug
wontfix
This issue came up after [frenck's comment](https://github.com/keesschollaart81/… vscode-home-assistant/issues/840#issuecomment-771923391) in https://github.com/keesschollaart81/vscode-home-assistant/issues/840
I think related: https://github.com/keesschollaart81/vscode-home-assistant/issues/132
After inspecting and cleaning up my lovelace config i found a few problems that i can not resolve.
**1. An entity card with a sensor (this is the most confusing)**
```YAML
1936 - type: entities
1937 title: HACS
1938 show_header_toggle: false
1939 state_color: true
1940 entities:
1941 - entity: sensor.hacs
1942 name: Updates
1943 style: |
1944 :host {
1945 {% if states(config.entity)|int > 0 %}
1946 --paper-item-icon-color: var(--my-orange);
1947 {% endif %};
1948 }
```
![Auswahl_432](https://user-images.githubusercontent.com/26381449/106671197-664d7800-65ae-11eb-86aa-d1fd4d65949c.png)
After commenting out the style (1943 - 1948) the first two problems with 'attribute' and 'type' are also gone.
**2. A senor card**
```YAML
3678 - type: sensor
3679 entity: sensor.date_time_formatted
3680 style: |
3681 ha-icon {
3682 color: {% if is_state('binary_sensor.workday_sensor', 'on') %} var(--my-red) {% else %} var(--my-green) {% endif %};
3683 }
3684 :host {
3685 display: block !important;
3686 }
```
![Auswahl_433](https://user-images.githubusercontent.com/26381449/106671589-060b0600-65af-11eb-973e-70709dcd5819.png)
**3. A few picture-entities**
```YAML
3789 - type: picture-entity
3790 entity: person.rainer
3791 show_name: false
3792 show_state: false
3793 aspect_ratio: 95%
3794 state_image:
3795 "home": /local/pictures/people/rainer.png
3796 "not_home": /local/pictures/people/rainer_sw.png
3797 "office": /local/pictures/people/rainer_sw.png
3798 style: |
3799 ha-card {
3800 box-shadow: {% if 'Rainer' in states('sensor.birthday_today') %} 0px 0px 10px 3px var(--my-pink) {% endif %};
3801 }
```
![Auswahl_434](https://user-images.githubusercontent.com/26381449/106671790-4ec2bf00-65af-11eb-9dd2-9597292291a0.png)
**4. A markdown card conditional**
```YAML
3922 - type: conditional
3923 conditions:
3924 - entity: sensor.tv_vdr_now
3925 state_not: "off"
3926 card:
3927 type: markdown
3928 style: |
3929 ha-card {
3930 background: transparent
3931 }
3932 content: >-
3933 <ha-icon icon="mdi:audio-video"></ha-icon> **{{ states('sensor.tv_vdr_now').split('~')[0] }}** -
3934 {{ states('sensor.tv_vdr_now').split('~')[1] }}
```
![Auswahl_435](https://user-images.githubusercontent.com/26381449/106672133-ddcfd700-65af-11eb-9348-8d5842c58a22.png)
**5. And at last a view definition with a [browser_mod](https://github.com/thomasloven/hass-browser_mod#replacing-more-info-dialogs) key**
```YAML
5722 - title: PV Anlage
5723 path: tpad_pv_anlage
5724 #icon: mdi:numeric-3-box
5725 background: center / cover no-repeat url("/local/pictures/backgrounds/solar01.jpg") fixed
5726
5727 popup_cards:
5728 sensor.ug_new_temperature:
5729 title: Heizung Keller neu
5730 ...
```
![Auswahl_436](https://user-images.githubusercontent.com/26381449/106672284-1bccfb00-65b0-11eb-9483-81c358b32ca8.png)
Extension runs in:
- [X] VS Code for Desktop
- [ ] Hassio Add-on
- [ ] Visual Studio Online
- [ ] Other:
I'm running VS Code on:
- [ ] Windows
- [ ] Mac
- [X] Linux
I'm accessing my files:
- [ ] From local disk
- [X] Via remote SSH
- [ ] Smb
- [ ] Other:
Nope, the config doesn’t work. The text on the button is not displayed at a smaller font size, unfortunately
Hi dude, did you managed to solve this?
I was on the same boat and noticed that if you got card-mod installed from HACS in the card page on HACS there is a little step by step config tutorial where it says that you must specify the path like this:
frontend:
extra_module_url:
- /hacsfiles/lovelace-card-mod/card-mod.js
I’ve already done this way and it worked.
Cheers!