#Help creating a small room card

1 messages · Page 1 of 1 (latest)

twin sparrow
#

Hi everyone, I'm having some trouble trying to recreate a room card that shows:
Icon
Name of room next to icon
Temperature (sensor.temp) underneath name

Line of shortcuts (lights, ac..): currently only have climate.name (pressing shortcut would turn AC on/off and holding it would open up the climate card) as shortcut to use.

Reference (found here): https://community-assets.home-assistant.io/original/4X/5/3/8/5387a4d38266beef14e681b15ee5425cb5a6733e.png

I know of the room summary card but it's rather bigger than I want it to be.

I've tried with Mushroom chip cards but the shortcuts end up being different cards etc

bleak kindle
#

Hey made you this, would it fit your needs ?

image.png
#

If so here's the yaml, using mushroom-template-card and card-mod

type: custom:mod-card
style: |
  ha-card {
    padding:  0px 5px 0px 5px;
    background: var(--ha-card-background,var(--card-background-color,#fff));
    box-shadow: var(--ha-card-box-shadow,none);
    border-radius: var(--ha-card-border-radius,12px);
    border-width: var(--ha-card-border-width,1px);
    border-style: solid;
    border-color: var(--ha-card-border-color,var(--divider-color,#e0e0e0));
  }
card:
  type: vertical-stack
  cards:
    - type: custom:mushroom-template-card
      primary: room name here
      secondary: Temp template here
      icon: mdi:home
      icon_color: orange
      card_mod:
        style: |
          ha-card {
              border: none;
              background: none;
          }
    - type: horizontal-stack
      cards:
        - type: custom:mushroom-template-card
          icon: mdi:lightbulb
          primary: ""
          secondary: ""
          icon_color: amber
          card_mod:
            style: |
              mushroom-shape-icon {
                --shape-color: rgba(var(--rgb-primary-background-color), 0.2) !important;
              }
              ha-card {
                border: none;
                background: none;
              }
        - type: custom:mushroom-template-card
          icon: mdi:door
          primary: ""
          secondary: ""
          icon_color: red
          card_mod:
            style: |
              mushroom-shape-icon {
                --shape-color: rgba(var(--rgb-primary-background-color), 0.2) !important;
              }
              ha-card {
                border: none;
                background: none;
              }
        - type: custom:mushroom-template-card
          icon: mdi:window-closed-variant
          primary: ""
          secondary: ""
          icon_color: red
          card_mod:
            style: |
              mushroom-shape-icon {
                --shape-color: rgba(var(--rgb-primary-background-color), 0.2) !important;
              }
              ha-card {
                border: none;
                background: none;
              }
        - type: custom:mushroom-template-card
          icon: mdi:curtains
          primary: ""
          secondary: ""
          icon_color: cyan
          card_mod:
            style: |
              mushroom-shape-icon {
                --shape-color: rgba(var(--rgb-primary-background-color), 0.2) !important;
              }
              ha-card {
                border: none;
                background: none;
              }
        - type: custom:mushroom-template-card
          icon: mdi:speaker
          primary: ""
          secondary: ""
          icon_color: grey
          card_mod:
            style: |
              mushroom-shape-icon {
                --shape-color: rgba(var(--rgb-primary-background-color), 0.2) !important;
              }
              ha-card {
                border: none;
                background: none;
              }
grid_options:
  columns: 6
  rows: auto
#

just change whatever colors or sizes with card-mod and obviously add your clic actions

#

technically it's multiple cards but heh, looks like a single one

twin sparrow
cobalt monolith
#

For something like this, I like the custom:stack-in-card. It does the same thing that Leipz's example with the mod-card, but it cuts down on the card_mod needed in each child card to hide the border and background. Here's the same code using the stack-in-card. I removed the extra card_mod and the primary and secondary fields as they're extraneous with the mushroom-template-card since the default is blank.

# 
type: custom:stack-in-card
cards:
  - type: custom:mushroom-template-card
    primary: room name here
    secondary: Temp template here
    icon: mdi:home
    icon_color: orange
  - type: horizontal-stack
    cards:
      - type: custom:mushroom-template-card
        icon: mdi:lightbulb
        icon_color: amber
        card_mod:
          style: |
            mushroom-shape-icon {
              --shape-color: rgba(var(--rgb-primary-background-color), 0.2) !important;
            }
      - type: custom:mushroom-template-card
        icon: mdi:door
        icon_color: red
        card_mod:
          style: |
            mushroom-shape-icon {
              --shape-color: rgba(var(--rgb-primary-background-color), 0.2) !important;
            }
      - type: custom:mushroom-template-card
        icon: mdi:window-closed-variant
        icon_color: red
        card_mod:
          style: |
            mushroom-shape-icon {
              --shape-color: rgba(var(--rgb-primary-background-color), 0.2) !important;
            }
      - type: custom:mushroom-template-card
        icon: mdi:curtains
        icon_color: cyan
        card_mod:
          style: |
            mushroom-shape-icon {
              --shape-color: rgba(var(--rgb-primary-background-color), 0.2) !important;
            }
      - type: custom:mushroom-template-card
        icon: mdi:speaker
        icon_color: grey
        card_mod:
          style: |
            mushroom-shape-icon {
              --shape-color: rgba(var(--rgb-primary-background-color), 0.2) !important;
            }