Solved: How do I add custom cards for lovelace?

Roboman · August 9, 2019, 11:40am

I’m replying in case others have the same issue.

~~The solution was made clear here - https://www.reddit.com/r/homeassistant/comments/alcuv1/lovelace_custom_cards_without_uilovelaceyaml/~~

~~While every single piece of instruction I’ve read instructs me to add the resource to ui-lovelace.yaml, it turns out that this isn’t the case (perhaps it was on previous versions).~~

~~Instead, I had to click the top right ellipsis, select ‘Configure UI’, then click it again, and select ‘Raw config editor’, then add the following at the top.~~

~~</s> <s>resources:</s> <s> - url: /community_plugin/monster-card/monster-card.js?v=1</s> <s> type: js</s> <s>~~

~~Voilà - my custom cards were instantly recognised!~~

I hope this helps someone else like me.

Update: see Solved: How do I add custom cards for lovelace? for new method.

eggman · August 9, 2019, 11:53am

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

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

Vaughanza · March 23, 2020, 8:44am

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 ?

tag0304 · March 26, 2020, 4:11am

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.

Tical84 · April 25, 2020, 5:17pm

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

Roboman · April 28, 2020, 12:40am

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.

hassFan · April 28, 2020, 1:09am

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?

xAPPO · April 28, 2020, 11:41pm

John.McDowell · April 29, 2020, 10:03pm

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?

markmghali · April 30, 2020, 7:11pm

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.

SeanM · April 30, 2020, 7:18pm

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).

markmghali · April 30, 2020, 7:38pm

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

John.McDowell · May 3, 2020, 4:56pm

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

PPatou · May 11, 2020, 8:20pm

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

PPatou · May 11, 2020, 8:22pm

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

nakigal · June 14, 2020, 9:38am

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

AdrianSmith · October 12, 2020, 2:36am

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

SeanM · October 12, 2020, 4:11am

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

AdrianSmith · October 12, 2020, 1:20pm

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

ZSasha · May 20, 2021, 5:52am

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?