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

tfmeier · August 18, 2022, 11:10pm

Rookie question here

I have a chip on my dashboard where I show available updates to Home Assistant core, OS and supervisor (or any other for that matter).

{% if is_state('update.home_assistant_core_update', 'on')
   or is_state('update.home_assistant_operating_system_update', 'on')
   or is_state('update.home_assistant_supervisor_update', 'on')
 %}
  red
{% endif %}

Three related questions to this:

Say two updates are available how can I show ‘2’ on the chip?
Would it be possible for me to have a tap action going to a list showing where the 2 updates (above example) come from?
(optional) Say I have a core update and an OS update; would it be possible for me to trigger the update from the list in point 2?

I can see further applications to this; e.g. at 10pm every night I check ‘security related’ evants - e.g. unlocked doors, open windows, open garage door etc. and show the number of events on the above chip.

Another application is battery monitoring; show the number of devices where the battery level is below a certain threshold etc.

berkans · August 19, 2022, 1:11am

You welcome. Would love to see outcome when you finish.

theandouz · August 19, 2022, 4:34am

Not sure if this has been shared here before but I made the navigation buttons on my page sticky. This way if you scroll down a page the nav button follows. Any chips placed in this card should stick to the header as you scroll

ezgif-5-3fba582b68

type: custom:mushroom-chips-card
chips:
  - type: action
    icon: mdi:arrow-left
    tap_action:
      action: navigate
      navigation_path: home
  - type: entity
    entity: media_player.andrews_desk_speakers
    icon_color: red
    icon: mdi:remote-tv
    tap_action:
      action: navigate
      navigation_path: andrews-tv-remote
    content_info: none
alignment: justify
card_mod:
  style: |
    :host {
      z-index: 999;
      position: sticky;
      position: -webkit-sticky;
      top: var(--header-height);
    }
    ha-card {
      margin-left: 10px;
      margin-top: 10px;
      margin-right: 10px;
    }

atomicpapa · August 19, 2022, 6:30am

Not quite as pretty as yours but it gets the job done.

Westham for the Mrs, Forest for me, and Liverpool because she watched with her best friend.

hainesy · August 19, 2022, 9:20am

That’s very pretty, can you share how you achieve the click to open scenes panel please? I’ve been fiddling around for a few days searching how to do that!

I’ve just applied your sticky chips technique - that’s really neat - thanks!

EDIT: Also… which temperature card are you using that lets you do the multiple overlays of sensors?

krth8 · August 19, 2022, 9:57am

I see some of you have a nice overlay on the whole card instead of only the icon, when its activated. How is this done? Theme variables, or in the cards?

Art1 · August 19, 2022, 10:38am

Hello,

Is it possible somehow change only the border color of a icon? I am trying to do simple weather card with the template card, I would like to change the icon based on the weather condition (icon color white) AND icon border color.

For example: Weather is sunny, icon changes to sunny and icon color is white, but the border color is Yellow. When it is cloudy, icon color stays white but icon changes to cloudy, icon border changes to blue.

I can only find the icon color option which changes both icon and icon border color.

Edit: And to specify: I mean by icon border color the circle around the icon.

Screenshot 2022-08-19 at 13.34.19

theandouz · August 19, 2022, 1:37pm

Yea no worries! Both cards were shared earlier but I couldn’t find the link for the scenes card

Scenes Card

type: custom:stack-in-card
cards:
  - type: custom:layout-card
    layout_type: custom:grid-layout
    layout:
      grid-template-columns: auto 33px
      margin: '-4px -4px -8px -4px'
    cards:
      - type: custom:mushroom-template-card
        primary: Scenes
        secondary: All
        icon: mdi:home-roof
        icon_color: grey
        tap_action:
          action: toggle
        entity: input_boolean.andrews_scenes
        card_mod:
          style: |
            ha-card {
              background: none;
              --ha-card-box-shadow: 0px;
            }
      - type: custom:mushroom-template-card
        entity: input_boolean.andrews_scenes
        primary: ''
        secondary: ''
        icon: >-
          {{ 'mdi:chevron-down' if is_state(entity, 'off') else 'mdi:chevron-up'
          }}
        icon_color: disabled
        hold_action:
          action: none
        card_mod:
          style: |
            ha-card {
              align-items: flex-end;
              background: none;
              --ha-card-box-shadow: 0px;
            }
            mushroom-shape-icon {
              --shape-color: none !important;
            }  
  - type: conditional
    conditions:
      - entity: input_boolean.andrews_scenes
        state: 'on'
    card:
      type: custom:stack-in-card
      mode: vertical
      cards:
        - type: custom:stack-in-card
          mode: horizontal
          cards:
            - type: horizontal-stack
              cards:
                - type: custom:mushroom-template-card
                  icon: mdi:desk
                  icon_color: grey
                  layout: vertical
                  tap_action:
                    action: call-service
                    service: scene.turn_on
                    service_data: {}
                    target:
                      entity_id: scene.andrew_s_room_casual
                  secondary: Ambient
                - type: custom:mushroom-template-card
                  icon: mdi:movie-open
                  icon_color: grey
                  tap_action:
                    action: call-service
                    service: scene.turn_on
                    service_data: {}
                    target:
                      entity_id: scene.andrews_room_video_editing
                  hold_action:
                    action: none
                  double_tap_action:
                    action: none
                  layout: vertical
                  secondary: Video Editing
                - type: custom:mushroom-template-card
                  layout: vertical
                  entity: script.1590801199735
                  icon: mdi:lightbulb-on
                  icon_color: grey
                  tap_action:
                    action: call-service
                    service: light.turn_off
                    service_data: {}
                    target:
                      entity_id: light.andrews_room
                  double_tap_action:
                    action: none
                  hold_action:
                    action: none
                  secondary: 'Off'
          style: |
            ha-card {
              box-shadow: none;
              border-radius: 12px;
              background: none;
            }    
      card_mod:
        style: |
          ha-card {
            background: rgba(155,155,155,0.05);
          }

Temperature card

snairolf · August 19, 2022, 2:53pm

Is there a way to combine different cards (other than stacking)? E.g. I’d like to use the templated badge_icon on a cover card.

Generally, I am curious about what the reason is that not every card is basically a template card with all the same fields and then some additional stuff, like the cover slider in this case? I.e. why don’t all cards allow templating?

berkans · August 19, 2022, 7:26pm

Perfect!!! Well done. It looks nice and clean.

Did you also use the automations ?

atomicpapa · August 19, 2022, 7:57pm

No, just pretty basic pages. Navigation under the banner. Atomic Revive Calendar as appropriate on each page. Using @iantrich 's Feedparser and List Card to display news for each team (and overall on the EPL page). News is updated hourly. Pulling from a variety of sources since none provided adequate results overall.

Here’s an example of one of the pages:

views:
  - title: Home
    cards:
      - type: custom:mushroom-title-card
        title: Football
        subtitle: Liverpool
        alignment: center
      - type: custom:mushroom-chips-card
        chips:
          - type: back
          - type: template
            icon: mdi:home
            tap_action:
              action: navigate
              navigation_path: /lovelace-phone
          - type: template
            picture: /local/football/epl.png
            content: EPL
            tap_action:
              action: navigate
              navigation_path: /phone-footie
          - type: template
            picture: /local/football/westham.png
            content: Westham
            tap_action:
              action: navigate
              navigation_path: /phone-westham
          - type: template
            picture: /local/football/forest.png
            content: Forest
            tap_action:
              action: navigate
              navigation_path: /phone-forest
          - type: template
            picture: /local/football/liverpool.png
            content: Liverpool
            tap_action:
              action: navigate
              navigation_path: /phone-liverpool
        alignment: center
      - type: custom:atomic-calendar-revive
        name: Football Calendar
        entities:
          - calendar.liverpool
        enableModeChange: true
        showWeekDay: true
        firstDayOfWeek: 1
        maxDaysToShow: 7
        refreshInterval: 60
      - type: custom:list-card
        entity: sensor.liverpool
        title: News
        row_limit: 10
        feed_attribute: entries
        columns:
          - title: ''
            type: image
            add_link: link
            field: media_thumbnail
          - title: Title
            field: title
          - title: Description
            field: summary

berkans · August 19, 2022, 9:17pm

Nice one mate.

I have now started to work on my news page. I will also publish it on github when I complete.

By the way I have also added Tips and Tricks to the end of my wiki for better reading the contents without ads and on a fullscreen page. Anyone interested may check it out.

berkans · August 19, 2022, 11:31pm

Hi Sdomotica

Can you share your code ? I just started working on a new page but I am struggling to place news horizontally just like you did in the picture.

rhysb · August 20, 2022, 8:12am

You can use overflow: hidden; like this:

        card_mod:
          style: |
            :host {
              --mush-icon-size: 130px;
              height: 100px;
              background: url('https://img.freepik.com/free-vector/terrace-with-mountain-lake-view-home-villa-hotel-area-with-sofa-ottoman-stand-wooden-patio-with-scenery-nature-landscape-background-with-rocks-water-pond-cartoon-vector-illustration_107791-11419.jpg?t=st=1658807264~exp=1658807864~hmac=8ec279678398cc8813f10112ecb27e57af9e4d4da6e42611c78c0a6e290e0946&w=1380') center;
              background-size: cover;
              background-blend-mode: overlay;
              background-color: rgba(var(--rgb-card-background-color), 0.9);
              margin-left: -33px !important;
              overflow: hidden;
            }

As for learning CSS, a good place to start is W3 Schools

rhysb · August 20, 2022, 8:52am

you can change the size of a Mushroom Chip like this:

Large Chip

type: custom:mushroom-chips-card
chips:
  - type: template
    icon: mdi:mushroom
    icon_color: red
    content: Mushroom
card_mod:
  style: |
    ha-card {
      --chip-height: 90px;
      --chip-border-radius: 45px;
    }

rhysb · August 20, 2022, 9:20am

Try like this:

--primary-text-color: {{ 'rgb(var(--rgb-white))' if is_state('sun.sun', "below_horizon") }};

Andrea_Ciullini · August 20, 2022, 1:50pm

Hi all. beautiful project.
I don’t understand why you use code if this project if called “beautiful dashboard easily”. why isn’t it only via GUI?
I don’t speak english very well. Sorry for my poor english.
Thank you

tfmeier · August 20, 2022, 10:07pm

I think I found part of the answer. From the chip’s tap action I can open a view to the Lovelace home feed card which lists the notifications/events found.

Question is how do I get the notifications, e.g. battery critical, door unlocked etc. into the card. and secondly counting these events so the number can be shown on the dashboard. Will have to be a dynamic list that gets built… Wonder if someone has some code snippets I could start from

image969 · August 21, 2022, 1:19am

Can someone please help me with cache issue. I clear the cache and all is fine. But then my last several udpates revert back. I hit refresh on my broswer or pull down to refresh on my phone and all is fine but then it happens again. I even tried a new computer and new browser and problem remains

Here are the three examples I’m having trouble with. Before and after pictures.

rhysb · August 21, 2022, 2:48am

Yes, you can change the shape color like this:

Shape Color

type: custom:mushroom-entity-card
entity: weather.weatherflow_day_based_forecast
name: Daily Forcast
icon_color: light-blue
card_mod:
  style: |
    mushroom-shape-icon {
      --mush-rgb-amber: 255, 193, 7;
      --shape-color: rgba(var(--mush-rgb-amber), 0.2) !important;
    }