Custom:button-card -- are paddings/margins documented somewhere?

Configuration Frontend
1

(also asked at Are paddings/margins documented somewhere? · custom-cards/button-card · Discussion #1125 · GitHub)

I am just starting with custom:button-card and after some very basic configuration I have this test card:

image
image727×369 13 KB

I now would like to modify the style, especially the spacing (some examples above in the image - these are just examples to set the idea). The closest I found in the documentation is Styling - custom:button-card documentation but it is still too much of a high level.

Is there a place I should look into? Or a naming condition for elements or classes, I could address in the styling? Or should I dig into the code?

2

The link you pointed to is a good start. Next is to check out the different layout options. The image you show looks to have the icon layout, but no icon. You can either use one of the standard layouts or define your own. Layouts are grid based so you can first look to adjust areas by adjusting the grid styling with usual grid css as config items in grid style. Once you have mastered this, then you might need further style tweaks. But don’t jump to css height, padding, margins to alter layout without understanding and mastering the inbuilt layout options.

As for overall size and fit with other cards, if you use sections make sure you have the right options set. If you use GUI to create a button-card, valid defaults are set depending if you are in sections dashboard or say masonry.

I hope this helps you on the way with button-card. If you have any further questions happy to help.

1 Like
3

Thank you - I will dig in and come back here if needed to keep one thred.

4

I read the docs up to down and I did not find one answer :slight_smile:

This is the code

type: custom:button-card
entity: sensor.versailles_temperature_2
section_mode: true
name: dehors
show_state: true
show_icon: false
show_label: false
styles:
  state:
    - font-size: 80px

for this card:

image
image485×247 4.53 KB

There is a big space above “dehors”. I thought (following-up on @dcapslock comment) that show_icon: false would fix that, but it is not the case.

I dug a bit into the page code and I see that

image
image493×289 7.89 KB

It looks like the card is evenly split between its elements (grid-style) and the label is justified to the end (bottom in this case).

Is there anything I can do with the basic configuration, or should I now attack the styling of the grid layout to modify the default grid style?

5

Good question and yes, you can style grid-template-rows when the standard layouts don’t suit, which they won’t as they all assume icon.

All grid css can be styled in the grid styles section.

type: custom:button-card
entity: sensor.versailles_temperature_2
section_mode: true
name: dehors
show_state: true
show_icon: false
show_label: false
styles:
  grid:
    - grid-template-rows: min-content 1fr
  state:
    - font-size: 80px