Fun with custom:button-card

[shredder_guitarist (Andrew)]

@ktownsend-personal

Is your phone view zoomed?

I did some re-ordering of the cards. It seems that the order of the cards is the issue.
Note: These are all desktop screenshots, not tablet screenshots

This is the original layout and how i prefer it, but it cuts off the 4th button on the tablet version of the companion app.

It seems that this satisfies the tablet display, but i don’t prefer it.

Perhaps i can try putting these back in a grid layout or something…

update yeah, after putting these in a grid layout card that worked for displaying better on this specific screen, but nother for others. So I just have to keep moving stuff around and finding creative ways to get it to display correctly. I try to avoid stacking shit, but it is what it is…I consider this a functional flaw of HA. The sizing enforcements and card stacking and menu display options drive me absolutely fricking crazy.
These custom card containers are amazing though, thank you for your guidance and information out there and making it easy to follow.
The general rule I found is… On a tablet using companion app, If 4 buttons are in a container, the dashboard itself cannot exceed 3 card columns.

Have i mentioned how much i hate the display requirements of HA dashboards?

[ktownsend-personal (Keith)]

@shredder_guitarist, thanks for the appreciation.
Regarding card columns, I’ve noticed that on my PC I get 3 columns of cards but my tablets only get 2 columns in landscape and 1 column in portrait. It’s just the way the Home Assistant UI operates to handle different width screens.

[ktownsend-personal (Keith)]

@sajikur, I recommend using the developer tools in your web browser (F12 key) to examine the elements and the CSS they are applying. It’s very useful when things aren’t displaying as expected. There are many websites with instructions, but here is one at random that I didn’t read just to get you started: The Beginner’s Guide to Chrome Developer Tools

[themanbornwithin (Chris)]

I’ve tried reading through this thread the best I could, but I’m stuck. I’m trying to make a container the size of the master suite in the original post. Can you plese provide the code used to make that?

[ktownsend-personal (Keith)]

@themanbornwithin, the “container” template I use will grow to contain whatever you put inside. I use a grid of 1 column inside the container, and it contains two grids (one for each row) each with two columns to contain the cards showing the entities.

[jellytotz]

Can someone please advise what I need to add to make the font smaller for state of my sensor?
i.e. the “dolby atmos” sensor state wording below TV Power (this shows the state of sensor.sonos_audio_input_format), I want the font size of just this smaller, not the name of the card.

My current config, but this is making the button name and the sensor state the same font size.

> type: custom:button-card
> name: TV Power
> icon: mdi:power
> size: 215px
> styles:
>   card:
>     - font-size: 40px
>     - font-weight: 400
> entity: sensor.sonos_audio_input_format
> show_state: 'on'
> tap_action:
>   action: call-service
>   service: script.1663279780696

[Protoncek (Pavel)]

Under “styles” add “state” the same way you have “card” defined (or replace “card” with “state”) and define font size, it will be just for state then.

[fredrikpersson92 (Fredrik Persson)]

This has been asked a few times before in this thread, but without answers, so I’ll ask it too:

Has anybody found a way to use media queries IN the custom button card?
Like in the style section.

[VietNgoc (Ngoc John)]

I don’t know if that’s the right answer to your question. I think you can use extra styles.

GitHub - custom-cards/button-card: ❇️ Lovelace button-card for home assistant

I use this way myself, for example when I want to add css for mobile devices

ngocjohn/hass-config/blob/f849c7d1fd031ed1efd95d5a2693cc392ec0b816/config/dashboards/templates/button_card_templates/tpl_base.yaml#L197C2-L197C2

[mSilencers (Mike Zwijgers)]

Great tutorial!

Also having lots of fun with the Button-Card recently.
In combination with a state-switch or conditional-card it’s even shining more:

[jfitzell (JamesF)]

Hey Keith. I’ve used your layout with great success to show which amp outputs relate to which media player.

I’m having a few problems though… the biggest of which is that for some reason the mini-media-player is running long even when I’ve set info to short. (see the Living section in the middle of the screenshot).

The second issue (possibly related) is that the text of the mini-media-player is not left justified inside the button-card even though it is everywhere else I’ve ever used it.

The last problem is a weird one. The bits that say “Living On” were already a button-card and used to show volume attribute instead of state using (state_display: ‘[[[ return entity.attributes.volume_level ]]]’). But now that I’ve embedded that button-card within your existing button-card container, I get a whopping big undefined reading attributes error if I try to retrieve that volume attribute.

[ktownsend-personal (Keith)]

@jfitzell, your last issue is caused by a quirk of nesting button cards where entity is the outermost card, if I remember correctly. I got bit by that at one point and worked around it by specifying a variable for the entity.

I don’t have any suggestions for the other issues other than using the browser’s developer console to manipulate the CSS in realtime and see if you find a combination that achieves the result you need.

[carhukem]

Hello Mike, looks awesome!!! Any chance that you’re willing to share some code?
Regards.

[finity]

Not sure if anyone can help but…

I’m trying to style some buttons but the style for the card doesn’t seem to want to stick.

Here is the card config (only showing the config for one button but the others are identical):

    type: custom:stack-in-card
    title: Monthly Bills
    cards:
      - type: horizontal-stack
        cards:
          - type: 'custom:button-card'
            label: "Pay<br/>AES"
            entity: input_datetime.aes_due_date
            show_state: 'on'
            show_icon: false
            show_name: false
            show_label: true
            state_display: '[[[ return helpers.formatDateNumeric(states["input_datetime.aes_due_date"].state) ]]]'
            tap_action:
              action: call-service
              service: script.update_aes_due_date
            confirmation:
              text: '[[[ return `Are you sure?` ]]]'
            styles:
              grid:
                - grid-template-areas: '"l" "s"'
              card:
                - background-color: '#009900'
                - border-radius: 10%
                - padding: 10%
                - border: 1px solid lightgrey
              state:
                - font-size: 15px

and here’s what happens when I refresh the dashboard:

as you can see the card style gets applied for a second then vanishes.

But the card border style gets applied and sticks just fine.

Any Idea’s on how to see where it’s going wrong?

[mSilencers (Mike Zwijgers)]

Ill PM you the code

[Faecon (Jo)]

How can I align a card on the right of my screen ?

[mSilencers (Mike Zwijgers)]

You could use a spacer or add following to the card:

styles:
  card:
    - justify-self: end

[jfitzell (JamesF)]

Thanks @ktownsend-personal , I ended up switching to stack-in-card and have solved my issues that way.

[Faecon (Jo)]

Thanks for your reply

I used

        card_mod:
          style: |
            ha-card {
            left: 20px;
                       }

Thanks to @LiQuid_cOOled

[Still_ill]

Can you PM me the Code aswell? This would bei very nice.