Button card that is blank?

Configuration Frontend
1

I am setting up a grid card and in it I have button cards. I would like to leave some button areas empty for layout purposes. I can make empty button cards but they still show the button outline. Is it possible to remove the button outline so there is nothing visually present?
Let’s say I have a remote control. The ‘arrow up’ button is the second button in row 1. I would like button 1 and 3 in row one to be completely blank, without even a button outline. Is that possible ?

2

You should definitely check out this custom button card addon. Lots of perks including what you are looking for.

3

Oh my … that’s a pretty involved card!
Thanks for the link!

4

You’re not wrong. I put off using it for ages because of the vast array of configuration options.

Tips:

Start simple. Work up from there.
Use the card’s template ability to reduce repetition.
Read other peoples config/templates here to get ideas.

5

Tom, if you have implemented this card, may I ask you a couple of quick questions?

The install instructions say:

  • Place the file in your config/www folder
  • Include the card code in your ui-lovelace-card.yaml 
  Title: Home
  resources: 
     - url: /local/button-card.js 
       type: module`
  • Write configuration for the card in your ui-lovelace.yaml

I have generated the www directory and put the button-card.js file in there as per instructions
I have no file called ‘ui-lovelace-card.yaml’ nor do I have a file ‘ui-lovelace.yaml’… is that a left-over from early days? Are there in fact two separate files or is there a typo ? Which folder does each of the files go into?
There is a file called /config/.storage/lovelace (not yaml) where all the current lovelace data is kept - should that be used for the code?

Thanks!

6

Excellent recommendation, that’s a pretty cool add-on that got added the instant I saw what you can do with it.

Goodbye free time this weekend :slight_smile:

7

Apparently nobody but me is having problems figuring out how to install this add-on :frowning:
CO_4X4 please feel free to answer my questions from the post above yours.

8

I used HACS to install it so it took all of 2 seconds. However, the manual install didn’t look any different, just copy and paste. To play with it I created a custom card (I didn’t modify the ui-lovelace-card.yaml) and just popped in the sample code edited for my light:

type: 'custom:button-card'
entity: light.office_lamp_hue_1
icon: 'mdi:home'
color: auto
color_type: card
tap_action:
  action: more-info
name: Home
styles:
  card:
    - font-size: 12px
    - font-weight: bold
9

I decided to do a hacs install … and whoa … what an eye opener!
I also looked at the various files on HA and it would seem that the instructions for the manual install of the button-card are outdated because none of the files they are talking about exist

Now I have to learn both hacs and the button-card … looks pretty intimidating so far.

10

HACS is pretty straight forward. you dont have to do almost anything. Just search the integration or custom component, click install, if you have to restart server, HACS itself will notify you that. Update of component is also similar. If you want new repositories to add to HACS there is option. All straight forward and easy.

Button cars, you just have to follow the docs, its not as simple but then again it heavy with features…as said start simple build on it.

11

Looks like things are harder than advertised because I have hacs installed, I have the button-card installed but I still can’t get things going.
I am puzzled about this step in the installation instructions:



3 Add the configuration to your ui-lovelace.yaml

resources:
  - url: /hacsfiles/button-card/button-card.js
    type: module

There is no ui-lovelace.yaml file that I can see

If I go to my custom lovelace window and look at the underlying code there might be a line such as

cards:
  - type: button
    tap_action:
      action: toggle
    entity: script.shaw_pvr
    show_icon: false
    name: PVR

I assume that I could replace type:button with type:‘custom: button-card’ but this results in an error being shown in the visual representation of that button. The error message is:
Custom element doesn’t exist: button-card.

type: ‘custom:button-card’
tap_action:
action: toggle
entity: script.shaw_pvr
show_icon: false
name: PVR

I am sure I am doing something basic wrong but don’t know where to look considering I couldn’t do one of the installation steps.

Help … please!

12

If you are installing button card using HACS, you dont need to do the step 3. Its only required if you are doing the manual method.

13

The step 3 I showed is listed under the hacs install method.
The bottom line is that I am still doing something wrong …

14

Partial progress - I copy-and-pasted an entire card description from an example and it gave me an error message but after reloading my browser window it displayed correctly.
I saw mention of the - type: “custom:no-card” element but that type still throws an error. From what I read, this type is part of the button-card but I am not 100% sure - could someone please confirm that this should work?

15

Ok … now we are cooking …
Turns out this is a bad case of outdated information.
What used to be


   - type:  "custom:no-card"

is now

  - type: 'custom:button-card'
    color_type: blank-card
2 Likes
16

Thanks for the help ! Now to learn …

17

Oh, just to confirm that the installation instructions for the button card install under hacs are indeed outdated and step number 3 is indeed no longer needed.

1 Like
18

Not really outdated, as I put that in my example above when I replied and that was a direct example from the Git page.

19

CO_4X4, my comments were of a general nature and in no way directed at you or anybody else here. There is a lot of stuff out there (even on Git pages) that just doesn’t apply any more. Part of the reason I made the comments is because there are bound to be more people trying to follow the Git pages on how to install hacs and getting confused. I am hoping that they will find this thread and not spend way too much time trying to figure out what are outdated instructions and what is current. Sorry if it sounded like I was directing my comments to anyone here.
Actually, the exact opposite is true … it is the response I get from people like you that either directly or indirectly help me to solve my issues … so thanks for chiming in!

Edit: Unfortunately, with a rapid pace of development comes a dearth of accurate information. In an ideal world Git pages would be up-to-date but if a developer moves on or looses interest, there is nobody to jump in and maintain those instructions.

20

Oh I wasn’t put off in the least, I was just commenting that you had a bit of a challenge getting the first button to set up because you didn’t use ‘custom:button-card’ and I was just pointing out that I had put that in my reply to you :slight_smile: