Solved: How do I add custom cards for lovelace?

So, you would add it to lovelace.yaml if you were in yaml mode.

This was, indeed, the only way for a while.

Hi Roboman,
I can not find resources as you describe any chance you can help. I have the same problem, can not find resources at the top of the RAW editor ?

Im still figuring this out as well but it appears its changed now. If you go to Configuration, then Lovelace Dashboard, you will find an area to add resources now.

Is this still the case or has it changed again? When I go there I just see my current dashboard and no options to change/add anything.
Thanks

Thanks for the update - yes, it has now been changed to a menu option under Configuration > Lovelace dashboard.

You can then click the Orange + at the bottom right and copy in the configuration entries.

2 Likes

So all I see on the Configuration -> Lovelace area is Dashboards only. I don’t see anywhere to add resources.

Clicking the big button in bottom right lets me add dashboards, but not resources. Am I in the wrong place?

2 Likes
2 Likes

I have a similar question. I have added a card via HACS (mini-media-player). It installed fine. The entry in Lovelace dashboard resources is there. Also, the code is all in the place that is referenced in the resource. However, when I try to add a card to the front end (via the UI in a manual card) I get an error.

“no card type configured”

the ui yaml is:

- entity: media_player.livingsamsungtvip
  type: 'custom:mini-media-player'

any ideas on what I have missed?

1 Like

Agreed I am in the same boat. I added a custom card via HACS I see it is in the resources properly. But I do not understand how to add it to the frontend UI. There is something I am not understanding for sure.

You need to remove that hyphen when adding it via the manual card method. So paste this in and it should work:

entity: media_player.livingsamsungtvip
type: 'custom:mini-media-player'

(same for @markmghali question too).

2 Likes

This is what ended up working for the card I was using:

1 Like

Thanks Sean, that did the trick. I hate it when a simple YAML issue kicks my butt!!

1 Like

Hello I read carefully all the post related to this issue but still do not understand why it do not work for me. Using Home Assistant 0.109.3
The card is added sucessfully to the configuration/lovelace dashboard/ressources
And I get the error “a is undefined”


Can somebody help ?
Thanks in advance

Oups I read again and found entity must be entities !!
Sorry I am an old guy!

Thank you. This also resolved something I have been trying to get to work for around 2-3 weeks :slight_smile:

Hi Sean. I’m sorry to sound dense but I can’t get this exact card working. When I follow the steps you outlined for mini-media-player I get the default media_player card with the power button and nothing else. I’ve downloaded the mini-media–player-bundle.js to config/www, I’ve added it as a resource in Lovelace->Resouces, but when I do the manual add I still get the default card. Do you have any suggestions?

Thanks in advance!
-Adrian Smith

When I say manual card method, I am referring to the actual “Manual” card at the very bottom of the card picker. I think you might have been copying that code into the wrong place (Media Control card).

Some other suggestions:

  • If you just created the /www/ folder for the first time, you need to restart.
  • You might have to “Reload Resources” via the Lovelace menu (three dots icon in top right corner of screen)
  • Ludeeus has a good tutorial here that might help: my custom cards don’t work

Thanks for the reply!

Nope, I’m trying to add the card manually using the manual card entry at the bottom of the card selector panel. The generic “Media Control” card is all that appears.

I’m reasonably comfortable with HA - I’ve been using it for a year now - but this one has me stumped. My www folder isn’t new, I’ve reloaded Resources repeatedly, I’ve tried adding the card by changing my Lovelace mode to YAML and creating the card manually in ui-lovelace.yaml… No matter what I do whenever I create the mini-media-player card I get the standard Media Control card.

I’ll take a look at Ludeeus’ tutorial. Thanks.

-Adrian

Sorry for probably a stupid question but just to confirm - all custom elements installed from HACS/Frontend require lovelace to be in “yaml” mode?
They can’t be added if lovelace is in “normal” mode - is this correct?

I was having this exact problem with another repo installed via HACS. I discovered that the resource for LoveLace was installed with the URL starting at the /hacsfiles/ directory, and had a bunch of extra gobbiltygook in the path at the end, including a hacstag. I added a new resource that simply started with /local/ and that seemed to make the error go away.

Now its saying the configured entity can’t be found. Don’t entities get installed with the repo? I’m so confused.

1 Like