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

found the solution:

- 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 :wink:

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…

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.

Hey,

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

Hello geniuses!! :slight_smile:

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:

image

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…

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

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

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.

Could you share the code?

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

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.

image

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.

Hi,

I created my own cards, it looks like this:

image

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
1 Like

Room Cards for Home Assistant

1_resized

  • 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.

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.

17 Likes

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!

1 Like

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

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

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?

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.
image

What can I do to fix this?

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

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.

Copy_of_Studio_Project (1)

1 Like