Card-modder will not display

Configuration Frontend
1

I get an error when trying to use the lovelace card-modder - using the example by thomasloven.

I have placed the card-tools.js in the www folder (just by copy paste) and tried to place card-modder.js (copy paste) in www folder, www/custom_ui folder - same result everytime.

I get this error in lovelace: “Can’t find card-tools. See https://github.com/thomasloven/lovelace-card-tools”

This is my lovelace.yaml file (other cards are omitted from the below code)
resources:

  • url: /local/card-tools.js #?v=0
    type: js

  • url: /local/custom_ui/card-modder.js
    type: module

  • title: Test
    icon: mdi:music
    cards:

    • type: custom:card-modder
      style:
      – paper-card-background-color: rgba(0, 100, 0, 0.2)
      – paper-item-icon-color: white
      border-radius: 5px
      color: rgb(0, 0, 100)
      card:
      type: glance
      title: Styled card
      entities:
      - light.carport
      - light.hallway
      - light.kommode
    • type: glance
      title: Unstyled card
      entities:
      - light.carport
      - light.hallway
      - light.kommode
2

Looks like the path to your card-tools is different to the one used for card-modder are they in the same location?

3

I have tried to have them in the same folder - with no luck.

4

It’s hard to tell with out it being formatted correctly but there seems to be a hash tag before the version tag. Let me get my config to show you

resources:
  - url: /local/custom_ui/dark-sky-weather-card.js?v=4
    type: js
  - url: /local/custom_ui/mini-media-player-bundle.js?v=0.9.8
    type: module
  - url: /local/custom_ui/tracker-card.js?v=0.1.5
    type: js
  - url: /local/custom_ui/surveillance-card.js?v=0.0.1
    type: module
  - url: /local/custom_ui/mini-graph-card/mini-graph-card-bundle.js?v=0.1.0
    type: module
  - url: /local/custom_ui/card-modder.js?v=35eb37
    type: module
  - url: /local/custom_ui/slider-entity-row.js?v=d6da75
    type: js
  - url: /local/custom_ui/card-tools.js?v=445b68
    type: js
  - url: /local/custom_ui/layout-card.js?v=bd7e5a
    type: js
5

I have both tried to include the text behind the # like this:

  • url: /local/card-tools.js?v=0
    type: js

and leaving it out like this

  • url: /local/card-tools.js
    type: js

I have tried with the car-modder both in the /local folder and in the /local/custom_ui folder.

Any other ideas are greatly appreciated and thank you for taking your time :slight_smile:

6

can you double check the card-tools.js file matches the one from his github I had this error with the custom-tracker card where i didn’t copy correctly. Make sure you click on the raw and copy from there.

7

I will try that. In my search for solutions I just came across this comment from thomasloven:

‘I forgot to mention in the docs that card-tools and any card that uses it required Home Assistant version 0.84.0 or later.’

As I was running 0.83 I will try to update HA first :wink:

1 Like
8

Didn’t help with the upgrade to 0.84.6 - but then again now I use the rawconfig editor to edit lovelace an not the ui_lovelace.yaml file. Not sure what to think about that….

9

Figured it out at last. CSS does not work on Edge or Safari :frowning: - so now I am using Chrome :slight_smile:

1 Like