Lovelace: Button card


#472

I presume the font-size: still isn’t working. I know you can change it in the .js, but that changes every instance of the card, and I would like to try and change it based on per entity, as some of mine have longer names than others, so just wanted to shorted one by a px or two, to keep the card size uniform. Unfortunately, I wouldn’t have a clue as where to look to try and fix it.


#473

And where could I find the latest update of the button card? Kuuji’s is 6 days old. That was before the problems started I believe??


#474

I don’t think so. The problems were a couple of weeks ago so 6 days is pretty right for the working card. You can look at the PR’s to get the upcoming version if there is one but the only current proposed changes are the style ones I posted above.


#475

Font-size works for me.
I have problem if I use default card but if I use color_type: card it works fine.

10 - 15 - 20 in the top row.

14px on the rest.

style:

  • text-transform: none
  • color: black
  • background-color: white
  • font-size: 14px
  • font-weight: normal

#476

So it does seem to work if you have color_type: card but unfortunately that doesn’t help me, as I am using the defualt, or color_type: icon as I have the motion sensor green when clear, and then change to red when motion detected, and same with door sensors, and when I have it icon mode, the font-size: stops working unfortunately.

  - type: custom:card-modder
    card:
      type: "custom:button-card"
      entity: binary_sensor.door_window_sensor_158d000239432d
      icon: mdi:door-closed
      action: more_info
      name: Front Door
      show_state: false
      color_type: card
      style:
        - font-size: 8px
      state:
        - value: 'Closed'
          color: rgb(17, 221, 23)
          icon: mdi:door-closed
        - value: 'Open'
          color: rgb(221, 17, 17)
          icon: mdi:door-open

icon%20card

  - type: custom:card-modder
    card:
      type: "custom:button-card"
      entity: binary_sensor.door_window_sensor_158d000239432d
      icon: mdi:door-closed
      action: more_info
      name: Front Door
      show_state: false
      color_type: icon
      style:
        - font-size: 8px
      state:
        - value: 'Closed'
          color: rgb(17, 221, 23)
          icon: mdi:door-closed
        - value: 'Open'
          color: rgb(221, 17, 17)
          icon: mdi:door-open

card%20card

Don’t suppose anyone cleverer than me could help out. Many thanks in advance.


#477

I found a thing last night that makes the default to work.
I don’t know if its the best solution but it works for me.

If you open the button-card.js and edit (I dont know the line since I have edit alot in mine) but under
iconColoredHtml(state, config)
change these two lines.
{config.name ? html<div> {config.show_state ? html

and change

<div></div> into <span></span>
Then it works so it looks like the CSS doesn’t want to affect the div just span… I am trying to fix mine since its not working perfect yet.

I have also made a “link-card” and also a “space-card” like the blank-card but this also affect the height so you can create space like in the gif.
I am only using the button-card.js here nothing extra.


#478

I take that back, I needed to clear the cache, and that seem’s to have worked. Going to have a play and see. Thank you very much @Rondom


#479

No problems!
When I think my version is good enough I will try to figure out how to post it on github or I just post a url here with it and instructions :slight_smile:


#480

I have an issue to where “style” will not apply unless “color_type” is set to “card”. If I set it to icon then “style” is not being applied.


#481

If you read my comment 2 post up you will find the solution…


#482

Thank you! That worked great!

Since it seems like you are pretty familiar with this card maybe you can help me with another request I have for this card.

I would love to be able to set and Icon color for On/Off state on a button card. This would give me full control of both background and icon color when state is on and off, right now when using button card the icon is white/black for me and it does not work with the colors I would love to use.


#483

The answer to this question is in the very first post of the thread under Options. You need to set the color and color_off strings to the color you want.


#484

But with that I only control 1 color on each state. If I use the button card (coloring the background) the values I put in only controls the background color states and not the icons, I would love to be able to also set the icon colors.


#485

Add the color: value to your state: declaration along with color_type: icon

                  state:
                    - value: 'on'
                      color_type: icon
                      color: rgb(181, 142, 49)

#486

Didn’t seem to work for me :confused:


#487

If I am reading the Github page correctly, it appears you can color either the icon or button but not both at the same time. You might be able to use Card Modder to set the color of the button and then color the icon using the native settings but I haven’t tried that myself.


#488

I dont understand what you are trying to get out of this?
First you declare color_type: card and later color_type: icon but you never declare what custom-card you should use?

Do you want a blue button that remains blue all the time and then change the color of the icon depends if the state is on or off?

Like this?

card:
  - type: "custom:button-card"
    entity: switch.hallway
    icon: mdi:spotlight-beam
    name: Lights
    color: #af6a71
    color_off: #f1d6c8
    size: 40px
    style:
      - text-transform: none
      - color: black
      - background-color: blue
      - font-size: 14px
      - font-weight: normal

#489

I think he means that he wants the button to change color depending on state as well as the icon. Like Apple Homekit does for example, in Homekit the button is grey and the icon as well, when turning it on, the button turns white and the icon receives a color. As far as I know this isn’t possible with this card.


#490

Ah I see… :frowning:

I was thinking that I had seen this before and I got it to work like this now.

cards:
 - type: "custom:button-card"
   color_type: card
   name: Light
   entity: light.computer
   icon: mdi:lamp
   size: 40px
   action: toggle
   show_state: true
   state:
     - value: 'on'
       color: rgb(0, 0, 255)
     - value: 'off'
       color: rgb(255, 255, 255)
   style:
     - text-transform: none
     - font-size: 14px
     - font-weight: normal

#491

Hi @gurukid

can you share the code?
I’m interested at the Lamp part, where you have the Dim, Custom and Edit buttons.

39

Thanks