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

[rhysb (Rhys)]

Is this the sort of thing you wanted?

Mushroom Folded Entities:

type: custom:stack-in-card
cards:
  - type: custom:layout-card
    layout_type: custom:grid-layout
    layout:
      grid-template-columns: auto 42px
      margin: '-4px -4px -8px -4px;'
    cards:
      - type: custom:mushroom-light-card
        entity: light.lounge_light
        layout: horizontal
        show_brightness_control: true
        card_mod:
          style: |
            ha-card {
              background: none;
              --ha-card-box-shadow: 0px;
            }
      - type: custom:mushroom-template-card
        entity: input_boolean.lounge_lights_dropdown
        primary: ''
        secondary: ''
        icon: >-
          {{ 'mdi:chevron-up' if is_state(entity, 'on') else 'mdi:chevron-down'
          }}
        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.lounge_lights_dropdown
        state: 'on'
    card:
      type: custom:auto-entities
      filter:
        include:
          - area: Lounge            
            domain: light
            options:
              type: custom:mushroom-light-card
              show_brightness_control: true
              layout: horizontal
              tap_action:
                action: toggle
              use_light_color: true
              card_mod:
                style: |
                  ha-card {
                    background: none;
                    padding: 4px 16px !important;
                    --ha-card-box-shadow: 0px;
                  }
      card:
        type: custom:layout-card
        cards: []
        layout_type: masonry
      sort:
        method: friendly_name

[Danny2100]

@rhysb is there anyway to customize the mushroom title card font type, font size, font color?

The font type or size does not match the rest of the mushroom cards. At least to me they don’t look the same. It would be great if it was possible to make them match with card-mod or in the future get them to match natively.

[berkans (Berkan Sezer)]

Yes exactly this!! However I already tried that but as far as I know, my slider card does not have a light color state property. So I switched to mushroom light card. Thank you very much.

[Posreg (Daros)]

so when you are planning to share the code :)?

[berkans (Berkan Sezer)]

I am not finished yet

I will post right after I complete it.

[Danny2100]

How can I make this template card take up as much space and be the same size as this lights card, with the picture on top and primary/secondary below just as it’s formatted in the second picture. Which is just the same code a as below but using a mushroom light card.

type: custom:auto-entities
card:
  type: grid
  columns: 2
  square: false
card_param: cards
filter:
  include:
    - domain: light
      state: 'on'
      entity_id: /[li]ghts/
      options:
        type: custom:mushroom-template-card
        primary: '{{ states[entity].name }}'
        secondary: '{{ states(entity) | title }}'
        picture: local/icons/custom_icons/ceiling-lamp.png
        vertical: true
        tap_action: none
        hold_action:
          action: toggle
        double_tap_action:
          action: more-info
        card_mod: null
        style: |
          mushroom-shape-icon {
          --shape-color: none !important;
          --shape-color-disabled: none !important;}
          ha-card { 
          background: transparent;
          width: px;
          border-radius: 30px;
          margin-left: auto;
          margin-right: auto;
          margin-bottom: 2px;
          --icon-border-radius: 0;
           }
sort:
  method: entity_id

[benm7 (Ben M)]

I am using DM Sans, which I personally think is a pretty cool font for HA! Screenshot below:

How to install and use (can apply to any font from Google by changing the name to match Google Fonts name, or adding extra lines to resources):

1. Add to your resources.yaml file the below. I have added a few myself, like the below:

  - url: 'https://fonts.googleapis.com/css?family=DM Sans'
    type: css
  - url: 'https://fonts.googleapis.com/css?family=Poppins'
    type: css
  - url: 'https://fonts.googleapis.com/css?family=Work Sans'
    type: css
  - url: 'https://fonts.googleapis.com/css?family=Nunito'
    type: css
  - url: 'https://fonts.googleapis.com/css?family=Raleway'
    type: css

2. Add the below to the theme you are using, changing the of the font on the first line to the one you want to use globally across HA:

  primary-font-family: 'DM Sans,sans-serif'
  paper-font-common-base_-_font-family: "var(--primary-font-family)"
  paper-font-common-code_-_font-family: "var(--primary-font-family)"
  paper-font-body1_-_font-family: "var(--primary-font-family)"
  paper-font-subhead_-_font-family: "var(--primary-font-family)"
  paper-font-headline_-_font-family: "var(--primary-font-family)"
  paper-font-caption_-_font-family: "var(--primary-font-family)"
  paper-font-title_-_font-family: "var(--primary-font-family)"
  ha-card-header-font-family: "var(--primary-font-family)"

3. Reload themes and resources, or restart.

[shogun168 (Edwin)]

@benm7

'https://fonts.googleapis.com/css?family=Raleway'

Amazing, that worked! Thanks a bunch

[mase]

mind to share some more screenshots of your setup? this looks good!

[rhysb (Rhys)]

Yes, have a look here:

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

If anyone needs to modify the Mushroom Title card, it can be done with card_mod like this: [Mushroom Title Card] type: custom:mod-card card: type: custom:mushroom-title-card title: I'd rather be picking subtitle: Mushrooms card_mod: style: mushroom-title-card$: | .title { --primary-text-color: rgb(var(--rgb-grey)); --title-font-size: 20px; --title-font-weight: lighter; } .subtitle { --secondary-text-color: rgb(var(--rgb-red)); …

[swifty]

@rhysb - I’m using the css you posted earlier in this thread for applying background art to my room cards, and wondered if there is any way to resize the background width to around half and fade it out to blend into the text area in my screenshot below?

I’m thinking something that covers approximately the red squared area, then blends to the card background color to the left of that?

I tried a bunch of CSS after searching online, but can’t seem to get anything that looks nice.

[benm7 (Ben M)]

Sure, here you go! Haven’t had the chance to put much time in to it recently so lots of things are still a work in progress hence why some cards may look off…

Mostly based off Minimalist with a bit of Mushy in there for good measure

[mase]

that´s a nice and clean setup. mind sharing your “header/title” code?

[benm7 (Ben M)]

You can find most of my code here:

GitHub - benmac7/Home-Assistant

You will need to use my theme “minimalist-shadow” for all the colours, or copy the colour codes, main-theme and -bg variables to your own.

[Danny2100]

Awesome thank you.

Any idea on this?

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

How can I make this template card take up as much space and be the same size as this lights card, with the picture on top and primary/secondary below just as it’s formatted in the second picture. Which is just the same code a as below but using a mushroom light card. type: custom:auto-entities card: type: grid columns: 2 square: false card_param: cards filter: include: - domain: light state: 'on' entity_id: /[li]ghts/ options: type: custom:mushroom-template…

[CommittotheIndian]

I am curious if this is possible and surprised no one else has done it.

I am trying to display a person entity picture IF they are home. If they are not home, I don’t want anything to display.

I get the entity picture just fine using the code below. I tried setting up a template using a similar card for my garage covers where only if the garage cover is open will it display an mdi icon, if it’s closed I don’t see anything. I can’t seem to figure out how to use a picture instead of an mdi icon and then associate that to a person (or even a device_tracker) being present.

type: custom:mushroom-person-card
entity: person.guest
use_entity_picture: true
tap_action:
  action: call-service
  service: switch.toggle
  data: {}
  target:
    entity_id: switch.home

[tempus2016 (Tempus)]

Try this. Also commented on your FB post.

type: custom:mushroom-template-card
primary: Hello, {{user}}
secondary: How are you?
picture: >- 
          {% if is_state('device_tracker.john', 'home') -%}
          IMAGE
          {% else %}
          IMAGE
          {%- endif %}

When you say you dont want anything to show, do you mean you dont want the image/icon to show or you dont want the card to show? If it’s the latter, you can use a conditional card to show an entity card if the person is at home, or you can use my code above (without the condition for the picture).

[rhysb (Rhys)]

Is this the sort of look you want?

Mushroom Room Card with faded background:

type: custom:stack-in-card
cards:
  - type: custom:mushroom-template-card
    primary: Lounge
    secondary: '{{ states("sensor.lounge_sensor_temperature") | round(0) }} °C'
    icon: mdi:sofa
    entity: light.lounge_light
    tap_action:
      action: navigate
      navigation_path: lounge
    hold_action:
      action: toggle
    icon_color: '{{ ''red'' if is_state(entity, ''on'') else ''disabled'' }}'
    fill_container: true
    layout: horizontal
    multiline_secondary: false
    card_mod:
      style: |
        :host([dark-mode]) {
          background-blend-mode: darken;
        }
        :host {
          background-image: url('/local/lounge.jpg') , linear-gradient(to right, rgba(var(--rgb-card-background-color), 1), rgba(var(--rgb-card-background-color), 0));
          background-size: 50% 100%;
          background-position: right;
          background-repeat: no-repeat;
          background-blend-mode: lighten;
          --mush-icon-size: 76px;
          height: 66px;
          margin-left: -18px !important;
        }
  - type: custom:mushroom-chips-card
    chips:
      - type: conditional
        conditions:
          - entity: binary_sensor.lounge_motion_occupancy
            state: 'on'
        chip:
          type: template
          icon_color: disabled
          icon: mdi:motion-sensor
          tap_action:
            action: none
          hold_action:
            action: none
      - type: conditional
        conditions:
          - entity: media_player.lounge_tv
            state_not: 'off'
          - entity: media_player.lounge_tv
            state_not: unavailable
        chip:
          type: template
          icon_color: disabled
          icon: |-
            {% set media_type = state_attr('media_player.lounge_tv',
            'media_content_type') %}
            {% if media_type == 'tvshow' %}
              mdi:television-classic
            {% elif media_type == 'movie' %}
              mdi:movie-open
            {% elif media_type == 'music' %}
              mdi:music
            {% elif media_type == 'playlist' %}
              mdi:music
            {% else %}
              mdi:plex
            {% endif %}
          tap_action:
            action: none
          hold_action:
            action: none
      - type: conditional
        conditions:
          - entity: climate.air_conditioner
            state_not: 'off'
        chip:
          type: template
          entity: climate.air_conditioner
          icon_color: disabled
          icon: |-
            {% if is_state(entity, 'heat_cool') %}
              mdi:sync 
            {% elif is_state(entity, 'heat') %}
              mdi:fire
            {% elif is_state(entity, 'cool') %}
              mdi:snowflake
            {% elif is_state(entity, 'dry') %}
              mdi:water-percent
            {% elif is_state(entity, 'fan_only') %}
              mdi:fan
            {% else %}
              mdi:air-conditioner
            {% endif %}
          tap_action:
            action: none
          hold_action:
            action: none
          card_mod:
            style: |
              @keyframes rotation {
                0% {
                  transform: rotate(0deg);
                }
                100% {
                  transform: rotate(360deg);
                }
              }
              ha-card {
                {% if is_state(config.entity, 'fan_only') %}
                   animation: rotation 2s linear infinite;
                {% endif %}
              }
      - type: conditional
        conditions:
          - entity: group.lounge_windows
            state: 'on'
        chip:
          type: template
          icon_color: disabled
          icon: mdi:window-open
          tap_action:
            action: none
          hold_action:
            action: none
    alignment: end
    card_mod:
      style: |
        ha-card {
          --chip-box-shadow: none;
          --chip-background: none;
          --chip-spacing: 0;
        }
card_mod:
  style: |
    ha-card {
      height: 102px;
      {{ 'filter: grayscale(100%);' if is_state('light.lounge_light', 'off') }}
    }

[swifty]

Exactly that, amazing thank you!

I had been trying linear gradient but couldn’t get it to look as good as that!

[brewston (Tim Jones)]

Hello @rhysb I followed your example from a few weeks back to animate a fan. I used it to animate my hot tub pump (spins faster when the pump is on high etc) but now wanted a nice animation when the heater is on, I wanted to alternate between mdi:radiator-disabled and mdi-radiator in a pulsing red circle (think I can manage that bit) Any pointers gratefully received Thanks.