Mushroom Cards - Build a beautiful dashboard easily šŸ„ (Part 1)

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

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.

1 Like

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

I am not finished yet :slight_smile:

I will post right after I complete it.

1 Like

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

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
  1. 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)"
  1. Reload themes and resources, or restart.
6 Likes

Amazing, that worked! Thanks a bunch :slight_smile:

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

Yes, have a look here:

1 Like

@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?

Screenshot 2022-08-04 105622

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.

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









36 Likes

thatĀ“s a nice and clean setup. mind sharing your ā€œheader/titleā€ code?

1 Like

You can find most of my code here:

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.

13 Likes

Awesome thank you.

Any idea on this?

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

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

Is this the sort of look you want?

Mushroom Room Card with faded background:

Room Card - Background Fade - Light

Room Card - Background Fade - Dark

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') }}
    }
18 Likes

Exactly that, amazing thank you!

I had been trying linear gradient but couldnā€™t get it to look as good as that! :laughing:

1 Like

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 :slight_smile: Thanks.

Hey guys,
Ive found a problem and want to ask if someone else can confirm thisā€¦ I have a mushroomt-template-card configured with card_mod and want to grey out the icon if a specified state is set. Im using this code:

  - type: custom:mushroom-template-card
    primary: ''
    icon: ''
    entity: switch.docker_watchtower
    layout: vertical
    multiline_secondary: true
    picture: /local/images/watchtower.png
    tap_action:
      action: none
    hold_action:
      action: none
    double_tap_action:
      action: none
    secondary: '{{states(entity)}}'
    card_mod:
      style: >
        mushroom-shape-avatar {

        {{'filter: grayscale(100%);' if
        is_state('switch.docker_watchtower','off') }}

        }

This is working fine on google chrome:

image

But its not working on my IOS home assistant app. The icon stays colorful. Is this issue known?

regards
Alex