Split config - Simple card - issues - switch layout

Hey everyone.

Ive been digging since yesterday on yaml and i have a test card that im doing, simple, before doing anything more confusing or even trying.
So, i have card-mod and button-card installed (or so i think, you’ll get why in a sec).

And i pick a manual card so i have total freedom to install my code on the dashboard:

type: custom:button-card
entity: sensor.test_sensor
name: "test"
state: "1234"
show_name: true
show_state: true
styles:
  card:
    - padding: 2px
    - background-color: white
  icon:
    - color: red
    - width: 50px
    - height: 50px
  name:
    - color: blue
  state:
    - color: green
icon: "mdi:home"  # PNG check for later! It should work.......... i think 

After which i have this lovely message:
image

So yeah, i go back and i recheck the plugins, and yaml

They are both installed, and supposedly both being pulled into HA correctly.

(i also tried to put the logical path in the config file, still didnt work with same error output


I then reverted to original path just in case)

Can someone point me on what im missing? (and yes i reloaded everything already and restarted too)

Many thanks in advance lovely people :smiley:

Hi Miguel, where did you get those instructions to reference the custom button card file in your configuration.yaml?
Check this: https://github.com/custom-cards/button-card?tab=readme-ov-file#installation

Hello @Nick4 good morning,

Probably in some outdated youtube video… I know its a bad habit to look on YT, but the view part of something working after they do it, its well easy to fool me.

Just a doubt, on:

ui-lovelace-card.yaml - where is this? i cant locate it anywhere ?
(when i eventually find the above yaml, i assume the “title: Home” is the name of the dashboard whenre i wanna pull the resources into? - so on every new dashboard i would have to write it down as:
title: home
title: home2
title: xyz
Etc ?
-------

Also, this one: ui-lovelace.yaml
Cant locate it anywhere ?? :confused:

Where is my current folder/files output:

Thanks a lot kind sir :slight_smile:

Sorry, my bad: you are using a splitted configuration! :blush:

What is this ‘www / community’: is community a subfolder from www?

Adding a custom button can be done manually by downloading it and putting in the right folder.
Then, you have to reference to it in your resourses in Settings → Dashboards → upper right corner (3 dots) Resources

Hello :slight_smile:

I assume so, i didnt manually create any of them - i just followed the step by step to make HA run on a VM.

image

But it looks like a subfolder

Read my edit on my previous post.

In that case, you are not referencing to that file the right way.
Also, don’t use images to post yaml code please.

TBH: I have never used a splitted configuration.

TBH i have no idea why its splitted… most of the tuts i followed to manually add rss didnt work, like 99% lol.

I added it the way you said now, reloading HA and testing in a moment :slight_smile:

EDIT: installed, reloaded HA (restart) tried again, same error :frowning:

Whatever way you use - splitted or not - it has to be correct.
Maybe read the doc about splitted configuration.

There are of course advantages to split up.
If the file is in the right place, correctly referenced, it should work.
I also use some custom cards, including this button card.

Forgot to mention this :innocent: : you also have to refresh your browser / clear the cache after adding js (java script, runs in your browser) files.

So i did the reading, plus config reload, creation of non existing files, reload again, same error.

Im removing all lovelace related configs and items, and im willing to start from the begining, can someone guide me please on a step by step? because clearly on my own im not start enough to do it.

Starting point as of now is, i ONLY have mushroom cards active and working, nothing else.

Please :pleading_face:

Will you be using a splitted config or not?
How is the mushroom configured?

If i could have it all in one, it would be best for me, as i only need the HA to control a few tuya lights and smart sockets, plus my hikvision cctv.

Mushroom is config as it came, i didnt change anything other than install it, and play around to see the diff option i had to use in dashboard view

Mushroom is not a standard card so it must have been installed manually.

But the simple/straightforward way is to:

  • download the JS file and put it in the www folder of your HA system
  • add the resource (Dashboards) as /local/button-card.js

Restart your HA and refresh the browser and it should work.

Ok so here we go for another round in the park.
Steps i taken this (4th) time:
Download file “button-card.js” from: Release v4.1.2 · custom-cards/button-card · GitHub ;
Create a folder for the button-card ;
Go to Studio Code Server, and put the previously downloaded file in the folder (including downloaded all scr code files as .gz and left them into the same folder) ;

HA restarted
Browse cache cleared for past 24h - all deleted cache cookies, temp images, etc
result…

image

tried as simple type, and custom, both with same outcome

You still need to do this:

and make sure that this entry corresponds with the dir you have put the file in

I did added it, but my dir is diff maybe thats the issue?
mine is www/community/lovelace-button/button-card.js

I though the local would grab all the files from www/community by default

Miguel, you are making it complicated.
Put the button-card.js file in /www - it’s only 1 file, why create a directory for just 1 file?

Tell your system where to find that file in resources.
Restart HA & refresh your browser.
That’s it

I tried all the options… all the possible paths (in folder) and out of it - added the rss in the dashboard, restarted HA, cleaned cache also
Always the same error - is there anyway i could put the HA as a single config file? instead of splitted configuration?