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

[Blook (Klaus Dieter)]

Hi, after I installed it via HACS and rebooted, the cards don’t show up when I try to customize my dashboard. Is there anything else I need to install?

[rhysb (Rhys)]

You can specify an upper_bound, lower_bound or min_bound_range for the primary and secondary Y-axis.

lower_bound	number or string		v0.2.3	Set a fixed lower bound for the graph Y-axis. String value starting with ~ (e.g. ~50) specifies soft bound.
upper_bound	number or string		v0.2.3	Set a fixed upper bound for the graph Y-axis. String value starting with ~ (e.g. ~50) specifies soft bound.
min_bound_range	number		v0.x.x	Applied after everything, makes sure there’s a minimum range that the Y-axis will have. Useful for not making small changes look large because of scale.
lower_bound_secondary	number or string		v0.5.0	Set a fixed lower bound for the graph secondary Y-axis. String value starting with ~ (e.g. ~50) specifies soft bound.
upper_bound_secondary	number or string		v0.5.0	Set a fixed upper bound for the graph secondary Y-axis. String value starting with ~ (e.g. ~50) specifies soft bound.
min_bound_range_secondary	number		v0.x.x	Applied after everything, makes sure there’s a minimum range that the secondary Y-axis will have. Useful for not making small changes look large because of scale.

Like this:

type: custom:vertical-stack-in-card
cards:
  - type: grid
    square: false
    columns: 2
    cards:
      - type: custom:mushroom-entity-card
        entity: sensor.rhys_office_sensor_temperature
        primary_info: state
        secondary_info: name
        name: Temperature
        icon_color: green
      - type: custom:mushroom-entity-card
        entity: sensor.rhys_office_sensor_humidity
        primary_info: state
        secondary_info: name
        name: Humidity
        icon_color: blue
  - type: custom:mini-graph-card
    entities:
      - entity: sensor.rhys_office_sensor_temperature
        name: Temperature
        color: rgb(var(--rgb-green-color))
      - entity: sensor.rhys_office_sensor_humidity
        name: Humidity
        color: rgb(var(--rgb-blue-color))
        y_axis: secondary
    min_bound_range: 10
    min_bound_range_secondary: 20
    hours_to_show: 24
    line_width: 3
    font_size: 50
    animate: true
    show:
      name: false
      icon: false
      state: false
      legend: false
      fill: fade

Full documentation for Mini Graph Card here:

GitHub - kalkih/mini-graph-card: Minimalistic graph card for Home Assistant...

[Moss (Marco)]

Do you occasionally read this thread? That is evident in quite a few posts.
You can fade in chips permanently or fade them in like other cards depending on conditions.
Just browse through or look only at the posts of Rhys in this thread, then you will definitely find.

Have a look here as an example.

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

Here is my combination welcome card. Tried to find a good way to display family status with more than two members. I will be adding better away & location status once I work that out. Light mode: [Welcome-light] Dark mode: [Welcome-dark] type: custom:stack-in-card cards: - type: custom:layout-card layout_type: masonry layout: {} cards: - type: custom:mushroom-chips-card chips: - type: menu - type: alarm-control-panel entity: alar…

Greetings Moss

[Clockyx82 (Dennis Bell)]

Just recently I made the move from the minimalist UI to Mushroom cards.
Redesigned my dashboard and really happy with it.

There is one thing I couldn’t figure out, and that is a chip with 2 values.

Like indoor and outdoor temperature or
Consumed and produced energy, who can give me an example of this?

Thanks

[Moss (Marco)]

Like this?

type: custom:mushroom-chips-card
chips:
  - type: template
    icon: mdi:thermometer
    content: |-
      Inside {{ states('sensor.your_room') }} | Outside {{
       states('sensor.your_town') }}

[Sylwester (Sylwester Olik)]

Thanks
I used this solution for local files.

Use TTF in Lovelace

Hi! I’ve been trying to set up seven segment font for one of my custom card following the summary above without success. Is there someone who can describe the steps from import the right font format, config resource in UI to lovelace config. Thanks!

[Sylwester (Sylwester Olik)]

How I can make icon as a picture more flat so flag image is rectangle?

flag image size 532x302

type: custom:mushroom-template-card
picture: /local/formula1/flags/United_Arab_Emirates.jpg
primary: ABU DHABI GRAND PRIX 2022
secondary: 18 NOV 2022 - 20 NOV 2022
layout: vertical
card_mod:
  style: |
    ha-card {    
      font-family: "Formula1-regular";
      --card-primary-font-size: 16px;
      --card-secondary-font-size: 12px;
    }
    :host {
      --mush-icon-border-radius: 6px;
    }

[Clockyx82 (Dennis Bell)]

Yeah perfect!,

[Thekholm]

Hi again,

Is it possible to have a floating card? What I want is to have condition card (alarm, birthdays and so on) floating over de other cards, that you also can dismiss when needed!?

Best regards
Thekholm

[janiv (Janiv Ratson)]

Thanks,
I haven’t found a conditional chip that is shown while there is a value and hidden when not.

[rhysb (Rhys)]

Yep, added one for you.

[rhysb (Rhys)]

You can do it like this:

type: custom:mushroom-chips-card
chips:
  - type: conditional
    conditions:
      - entity: sensor.lounge_sensor_temperature
        state_not: 'null'
    chip:
      type: entity
      entity: sensor.lounge_sensor_temperature

[rhysb (Rhys)]

If you want to use the original aspect ratio, you can do it like this:

type: custom:mushroom-template-card
picture: /local/formula1/flags/United_Arab_Emirates.jpg
primary: ABU DHABI GRAND PRIX 2022
secondary: 18 NOV 2022 - 20 NOV 2022
layout: vertical
card_mod:
  style:
    mushroom-shape-avatar$: |
      .picture {
        height: auto !important; 
      }
    .: |
      ha-card {    
        font-family: "Formula1-regular";
        --card-primary-font-size: 16px;
        --card-secondary-font-size: 12px;
      }
      :host {
        --mush-icon-border-radius: 6px;
      }

[berkans (Berkan Sezer)]

A work in progress with Netflix/FireTV-AndroidTV page. It will include :

• A live view of AndroidTV screen
• Fast remote control
• Start Netlix shows
• Tv Usage statistics
• App starting buttons
• Alexa integration of non amazon store contents
• Bypass netflix auth. screen and start show directly
• tv and all other IR controls can be made from the page

This is a work in progress and wiki page will be ready soon.

[Intro_Verti]

Thanks for adding the correct Yaml code!
So I created something similar, without changing your config and when I look at my mobile…I don’t have the issue you’re experiencing

The only change I’ve made, is that I use the vertical-stack-in-card instead.

[Intro_Verti]

Someone who can help to make the slider less in height?
Any advise?

[Tyfoon]

I have 2 side by side in one column in the mobile screen. I think your screenshot is just 1 over the full screen, not?

p.s. strange that you have this bar behind the icons.

[Andrea_Ciullini]

Hi, can you explain how create all sensors? thank you

[Intro_Verti]

I just took a screenshot of my mobile phone screen.
I don’t have a dashboard made for mobile or whatsoever. I took only your config, changed stack-in-card to vertical-stack-in-card and amended the sensors to my personal sensors. That’s it

[josuabarron]

I absolut love this! You have helped me so much and it looks so great. There is just one thing I can’t figure out. I want to have a background color in the card and also animate the Icon. I got both working separately, but I can’t figure out how to get both at the same time.

type: custom:mushroom-template-card
primary: '{{ state_attr(''binary_sensor.warning_blaubeuren_stadt_1'',''headline'') }}'
secondary: '{{ state_attr(''binary_sensor.warning_blaubeuren_stadt_1'',''description'') }}'
icon: mdi:alert-circle
entity: binary_sensor.warning_blaubeuren_stadt_1
multiline_secondary: true
icon_color: white
card_mod:
  style: 
    mushroom-shape-icon$: |
      .shape {
        --shape-animation: ping 1.5s infinite, blink 1.5s ease-in-out infinite;;
      }
      
      @keyframes ping {
      0% { box-shadow: 0 0 0 0 rgba(var(--rgb-white), 0.7); }
      100% { box-shadow: 0 0 5px 15px transparent; }
      }
      @keyframes blink {
      100% {opacity: 0;}
      }
  mushroom-state-info$: |
      {% if (states.binary_sensor.warning_blaubeuren_stadt_1.attributes.severity=='Severe')%} 
        ha-card {
          background: red;
          --primary-text-color: AliceBlue;
          --secondary-text-color: white
        } 
      {% endif %}

This is my current try. Some help would be greatly appreciated