Need Some Help w/Some Small(ish) Edits to My Dashboard Please

First of all, thanks to everyone who has contributed in this forum. It’s been a rollercoaster of a ride but using lots of info I found online (including this forum) I’m finally seeing my HA mobile dashboard look more and more like what I had pictured in my mind’s eye.

Here’s my mobile device dashboard as it appears currently:


Largely a meld of a few different dashboards that I’ve seen, taking elements of each that I like.

There’s a few smaller design tweaks I’d like to make but I’m not quite sure how to go about them. I’ve poked around a bit but I’m afraid to do much more than I’ve already attempted so I figured I’d get some help from the experts. I’ll list them in number format below and invite anyone who thinks they’ve got a solution for one (or all of them) to reply with the details needed to make it happen.

  1. I’d like if I had the ability to add the humidity next to the temperature for each card. I think that most of these would be the same device that the temp is currently pulling from but I’ve got a mixture of sensor types in each room so I may need the ability to add a humidity from a 2nd device, if that makes sense.


    …it might also make sense to reduce the temperatures displayed to whole #'s only to free up a few character spaces for the humidity so it doesn’t get too busy/cluttered. Same thing for the humidity in terms of whole #'s are all I need to display.

  2. Not all of my area cards have a full 3 buttons to populate. I tried to delete 1 or 2 of them but it appears as though the dimensions of the card are indexed off of there being three buttons. How can I remove one (or two) of these buttons w/o changing the size of the card itself?

The code for the entire dashboard is pretty lengthy so I’m not sure if I should post all of it or not. If that’s frowned upon or goes against forum etiquette, let me know. If someone wants to provide guidance on what portion(s) would need to be modified I can share, as necessary. I can also just drop it all here if that’s customary protocol for something like this.

I looked in to code for one of the cards and tried modifying a few things but didn’t find anything that worked. Here’s the code for one of those cards for reference:

type: custom:button-card
template: room_card
name: Garage
icon: mdi:garage-variant
tap_action:
  action: navigate
  navigation_path: garage
entity: sensor.motion_sensor_air_temperature_2
custom_fields:
  btn:
    card:
      type: vertical-stack
      cards:
        - type: custom:button-card
          template: room_button
          entity: cover.garage_door_opener_double
          icon: mdi:garage-variant
          tap_action:
            action: toggle
        - type: custom:button-card
          template: room_button
          entity: cover.garage_door_opener_single
          icon: mdi:garage
          tap_action:
            action: toggle
        - type: custom:button-card
          template: room_button
          entity: switch.garage_overhead_light
          icon: mdi:ceiling-light-outline
          tap_action:
            action: toggle
styles:
  img_cell:
    - background: dimgray

I assume it’s the template portion of code that needs to be modified(?) to make these changes but I’m not sure where or how. Please let me know on how to go about making these tweaks or if there’s anything else I need to provide.

Thanks!

The easiest part - setting a number of small buttons.
The are placed in a vertical stack, so what you may do (means - there are more alternatives) is setting tap-action to none, icon to mid:blank (fictional icon), then the 1st button will be on a top, 2 others will be hidden.

As for adding more parameters (humidity or whatever) - this should be done inside a template “room card”.

I tried setting the tap action to “none” and the icon to mdi:blank and that almost worked but left a ring outline for where the button is:

type: custom:button-card
template: room_card
name: Living
icon: mdi:sofa
tap_action:
  action: navigate
  navigation_path: living
entity: sensor.kitchen_temp_and_humidity
custom_fields:
  btn:
    card:
      type: vertical-stack
      cards:
        - type: custom:button-card
          template: room_button
          entity: light.living_room_lamp
          icon: mdi:lamp-outline
          tap_action:
            action: toggle
        - type: custom:button-card
          template: room_button
          entity: light.in_wall_paddle_dimmer_300s_2
          icon: mdi:ceiling-light-outline
          tap_action:
            action: toggle
        - type: custom:button-card
          template: room_button
          entity: 
          icon: mdi:blank
          tap_action:
            action: none
styles:
  img_cell:
    - background: darkorange

Also, I’m not sure what it means to add parameters via a template “room card” as I’m new enough that much of this is still foreign to me.

I see, then try removing this border with something like (untested)

style:
  card:
    - border: none

Check docs for button-card for a proper syntax since I have not tested the code, but it gives an idea - remove the border.
Also, since you here need to adjust THREE things - blank icon, no tap-action, no border - consider creating a NEW template which will be used as a “blank button” and then use it.

As for you other question - you may not like my answer.
I would suggest you to start creating OWN button cards for learning (from simple to complex), and also use ready button-cards as examples.
Readme on GitHub repo contains examples both for simple cards and an advanced card with custom fields.