Mushroom Cards - Build a beautiful dashboard easily 🍄 (Part 1)

[Mariusthvdb (Marius)]

found the solution:

Card-mod - Add css styles to any lovelace card

simple challenge, no easy fix? have a picture-entity card with a default camera stream from Buienradar integration. I want to have it squared, so I can fit it in a stack/grid or other config, next to a 1/1 custom:button-card. There is no property I can find to auto resize this picture-entity so it always covers the square it should. I can give it a larger canvas, but then it doesnt resize properly, and ofc, therein lies the challenge. Have it show properly on desktop And mobile: - type: h…

- type: custom:stack-in-card
      mode: horizontal
      cards:
        - !include /config/dashboard/includes/button/include_button_animated_weather.yaml
        - type: picture-entity
          card_mod:
            style:
              hui-image:
                $: |
                  #image {
                    aspect-ratio: 1/1;
                  }
          entity: camera.buienradar
          show_state: false
          show_name: false
          camera_view: auto

as main body structure.

or use core cards, with a little card_mod tweaking:

    - type: custom:mod-card
      card_mod:
        style: |
          ha-card {
            --grid-card-gap: 0px;
            --ha-card-box-shadow: none;
          }
      card:
#         type: horizontal-stack
        type: grid
        columns: 2
        cards:
          - !include /config/dashboard/includes/button/include_button_animated_weather.yaml
          - type: picture-entity
            card_mod:
              style:
                hui-image:
                  $: |
                    #image {
                      aspect-ratio: 1/1;
                    }
            entity: camera.buienradar
            show_state: false
            show_name: false
            # camera_view: auto

you can also use the horizontal-stack, and then use

card_mod:
  style: |
    :host {
      --stack-card-margin: 0px;
    }

the gap mods are essentially what custom stack-in-card does.

both cards now have aspect_ratio: 1/1, so perfect fit assured. (or plain aspect_ratio: 1 of course

[johntdyer (John Dyer)]

Has anyone been able to make use of the keypad features along w/ the restriction card? Basically I want a touch screen pin pad, just like the alarm mushroom card, to restrict a card action from my children…

[AwesomeGuyNamedMatt (Matt)]

Is there a card that allows you to have a slider control an input_number entity? I tried using the light card with the dimmer settings, but it would not take that entity type. I found the my-slider card mentioned in this thread, but that card seems to be dead now.

[reesion (Reesion Tee)]

@Fabian_V

popup window

Hey,

I copied your code but i couldn’t get the popup window working. Any idea why?

[pppaulie_s (Paul)]

Hello geniuses!!

I can’t really find a way of adding a stop-watch so that when an entity has been turned on, I can see how long it has been in that state and have it displayed “live” in a Mushroom card, Secondary information area. For example:

Is there a way to perhaps use a template and the last changed status?
Or history_stats?

For example, I can get the time of last_changed. could this be used “somehow” and subtracted from current time which in theory would show “time running”?

Scratching my head…

[StefanHabel]

Is there a way to add additional information to the title card? Like the average temperature in that floor e.g.?

[StefanHabel]

And is there a way to change the default action for all cards?

[MRobi (Mike)]

You can use
secondary_info: last-updated

It will round to the nearest minute/hour/day though so may not be as accurate as you’re looking for.

[ettom]

Could you share the code?

[finalbillybong]

Looks great. I love the yaml for this if possible?

[HA_n00b]

Is there any way to create “entities card”? As you can see below, I created 4 entity cards.
But, I want to get rid the space in between. Something like multiple entities in 1 card.
I tried by adding all into 1 yaml code, but that didn’t work.

[stefdewilde]

Is it possible to add more buttons to the cover card? I use shutters. I would like to add a half open button and a button that the shutter are on 90% procent.

[RonM (Ron Meijsen)]

Hi,

I created my own cards, it looks like this:

where you can create your own buttons, is this what you are looking for?

type: vertical-stack
cards:

• type: custom:mushroom-template-card
  primary: |-
  {% if states(‘cover.rolluik_kamer’) == “closed” %}
  Rolluik kamer dicht
  {% else %}
  Rolluik kamer open
  {% endif %}
  secondary: ‘’
  icon: |-
  {% if states(‘cover.rolluik_kamer’) == “closed” %}
  mdi:window-shutter
  {% else %}
  mdi:window-shutter-open
  {% endif %}
  entity: Rolluik kamer
  icon_color: blue
  fill_container: false
  tap_action:
  action: none
  hold_action:
  action: more-info
  double_tap_action:
  action: none
  multiline_secondary: true
  layout: vertical
• type: horizontal-stack
  cards:
  • type: custom:button-card
    icon: mdi:arrow-down-drop-circle
    entity: cover.rolluik_kamer
    name: Rolluik kamer down
    show_state: false
    show_name: false
    layout: vertical
    styles:
    card:
    - height: 60px
    icon:
    - color: grey
    tap_action:
    action: call-service
    service: cover.close_cover
    service_data:
    entity_id: cover.rolluik_kamer
  • type: custom:button-card
    icon: mdi:pause-circle
    entity: cover.rolluik_kamer
    name: Rolluik kamer still
    show_state: false
    show_name: false
    layout: vertical
    styles:
    card:
    - height: 60px
    icon:
    - color: grey
    tap_action:
    action: call-service
    service: cover.stop_cover
    service_data:
    entity_id: cover.rolluik_kamer
  • type: custom:button-card
    icon: mdi:arrow-up-drop-circle
    entity: cover.cover.zonnescherm
    name: Rolluik kamer up
    show_state: false
    show_name: false
    layout: vertical
    styles:
    card:
    - height: 60px
    icon:
    - color: grey
    tap_action:
    entity: cover.rolluik_kamer
    action: call-service
    service: cover.open_cover
    service_data:
    entity_id: cover.rolluik_kamer

[berkans (Berkan Sezer)]

Room Cards for Home Assistant

• automatically resizeable, swipeable cards
• Light, volume and scene control
• Room cards that display album cover when spotify plays
• Device controls directly from the cards
• Shows room picture when lights are on.
• When the room temperature drops below a certain degree, it displays an animation on the card.
• Remote controls for devices within the card
• Cards are minimalistic. You can switch between multiple layouts with an help of a button.
• To listen to music, it is enough to hover over the room cards and press twice, in this way, the music starts in the room you want to listen to.
• All motion movements, devices updates, applications running on your android tv, sensor status, light and volume control exists in these cards
• With a press to the Spotify button, the music will start playing on the last motion detected room.
• Full climate control avaliable within one single card.

All gifs and icons used in the code are added to the page.

Room Cards for Home Assistant

Code Explanation:

If you are a beginner in coding, don’t worry. You can find all the explanations of the codes I used in the below link. All the details such as what and where to put are in the description section. Every line of code is explained for you to customize your own example. After reading this guide, you can create your own page much more easily.

Room Cards 2X Manual

[aleksander.lyse]

Since this is almost 5500 posts, this might have been asked before; have anyone replicated the popups from minimalist on light and thermostat? I think those designs look great, but if anyone have made them it would be great if it could be shared!

[seanmccabe (Seán McCabe)]

Yer click on the other reply to the post and I’ve responded with the yaml

[stefdewilde]

@RonM

looks good. can you please put the code between ```?

[WoJWoJ]

I just installed Mushroom and after successfully creating a basic card, I tried to get to the more complex settings from the GitHub page:

Unfortunately, the only thing I get is the setup of the card itself, not the “container” around:

Where can I find the former one?

[slingshot]

Hi,
I want to use this creates cards but I don’t have the cards avaible.
When I go to the front-end I get this error.

What can I do to fix this?

Answer from myself: I reloaded the mushroom and now it’s there.

[spo0n125]

Hi @berkans

Good work, and thanks for sharing the code.

Your cards gave me ideas for my own cards.

Where’s my own if someone is interested I will share the code.