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

[dimitri.landerloos]

Not a problem.

You need to move your card mod code to the bottom and to the main chip card. Not to the individiual chip.

Like this:

type: custom:mushroom-chips-card
chips:
  - type: entity
    entity: sensor.sensore_potenza_casa_w
    icon: mdi:lightning-bolt
    icon_color: amber
    primary: Charge
  - type: entity
    entity: sensor.potenza_prodotta_fotovoltaico_realtime_watt
    icon: mdi:solar-power-variant
    icon_color: amber
    primary: Solar Panel
  - type: entity
    entity: sensor.temperatura_esterna_meteonetwork
    use_entity_picture: false
  - type: entity
    entity: sensor.umidita_esterna_meteonetwork
alignment: justify
card_mod:
  style:
    mushroom-entity-chip:nth-child(1)$: |
      ha-state-icon {
        animation: charge 1s linear infinite;
      }
      @keyframes charge {
        0%, 10%, 20%, 30%, 40%, 50%, 60%, 70%, 80%, 90%, 100% { transform: translate(0, 0); }
        5% { transform: translate({{ range(-10, 10) | random / 10 }}px, {{ range(-10, 10) | random / 10 }}px); }
        15% { transform: translate({{ range(-10, 10) | random / 10 }}px, {{ range(-10, 10) | random / 10 }}px); }
        25% { transform: translate({{ range(-10, 10) | random / 10 }}px, {{ range(-10, 10) | random / 10 }}px); }
        35% { transform: translate({{ range(-10, 10) | random / 10 }}px, {{ range(-10, 10) | random / 10 }}px); }
        45% { transform: translate({{ range(-10, 10) | random / 10 }}px, {{ range(-10, 10) | random / 10 }}px); }
        55% { transform: translate({{ range(-10, 10) | random / 10 }}px, {{ range(-10, 10) | random / 10 }}px); }
        65% { transform: translate({{ range(-10, 10) | random / 10 }}px, {{ range(-10, 10) | random / 10 }}px); }
        75% { transform: translate({{ range(-10, 10) | random / 10 }}px, {{ range(-10, 10) | random / 10 }}px); }
        85% { transform: translate({{ range(-10, 10) | random / 10 }}px, {{ range(-10, 10) | random / 10 }}px); }
        95% { transform: translate({{ range(-10, 10) | random / 10 }}px, {{ range(-10, 10) | random / 10 }}px); }
      }
    mushroom-entity-chip:nth-child(2)$: |
      ha-state-icon {
        animation: rays 2s infinite;
      }
      @keyframes rays {
        0%, 100% { clip-path: inset(0 0 0 0); }
        80% { clip-path: polygon(100% 99%, 0% 99%, 11% 50%, 57% 48%, 56% 31%, 41% 31%, 33% 25%, 29% 18%, 27% 11%, 27% 6%, 74% 6%, 73% 15%, 69% 23%, 62% 29%, 71% 42%, 87% 47%); }
      }

[alessandro.bardi]

Fixed!
Thank you so much for your support
Best regards,

Alessandro

[Fe1sar]

I’m trying to change the icon background shape in my mushroom template card to make it wider.
A bit like the ones in the example below:

I’ve been experimenting with the icon styles in card mod but I can’t seem to find which parameter I need for this.
Any suggestions?

[BMWAddict (Jasper)]

Hi All, stupid question but how do I add a more fancy mushroom graph for temp history (24 hours)? There is no template available, so should I be adding it as a mushroom template card? How to get a graph ?

I’m now using the standard history graph option from home assistant - but it looks terrible and is big.

edit: so not the Mushroom Climate Card (this works good btw) but a historical graph of 24 hours up to know to show temps in different rooms.

So what mushroom template card to add to create a graph like below - but in mushroom style (not default HA). I’ve tried via chips but there is no graph option.

[siwilson (Simon Wilson)]

Although not mushroom, I like the custom:mini-graph-card. Install via HACS.

[paddy0174 (Patrick)]

Use either one of these two custom_components:

As said above from @siwilson, mini-graph-card

Lovelace: mini graph card

Lovelace: mini-graph-card A minimalistic and customizable graph card for Home Assistant Lovelace UI. The card works with entities from within the sensor domain and displays the sensors current state as well as a line graph representation of the history. [Preview] Instructions Please visit the GitHub repository for installation and usage instructions. Let me know if you have any questions, issues or suggestions!

or for all fancy graphics, the really, really cool, apex-charts-card

ApexCharts card - A highly customizable graph card

Hi folks, I’ve built a new card to display some graphs in Lovelace . It is in its early stage and is not meant to replace the mini-graph-card at all. It gives some new possibilities to display data in Home-Assistant and has some extensive customizability. It is based on ApexChartsJS, and you’ll find all kind of examples of what you could build over here [Image] Usage stable releases documentation can be found here beta/dev releases documentation ca…

[dimitri.landerloos]

Do you mean the blue background of the icon?

If so does something like this work for you?

card_mod:
  style:
    mushroom-shape-icon$: |
      .shape {
        width: 100px !important;
        border-radius: 10px !important;
      }

[Fe1sar]

Yes, that’s exactly what I’m looking for!
Unfortunately this doesn’t seem to work for me.

This is the code I’m trying for this card:

type: custom:mushroom-template-card
primary: Home
secondary: ''
icon: mdi:arrow-left
icon_color: ''
tap_action:
  action: navigate
  navigation_path: /lovelace-mushroom/Home
hold_action:
  action: none
double_tap_action:
  action: none
card_mod:
  style: |
    ha-card {
      box-shadow: 0px 0px;
      border-radius: 20px;
      margin-top: 5px;
    }
    mushroom-shape-icon$: |
      .shape {
        width: 100px !important;
        border-radius: 10px !important;
      }

[dimitri.landerloos]

Ah you need to do this:

card_mod:
  style: 
    mushroom-shape-icon$: |
      .shape {
        width: 100px !important;
        border-radius: 10px !important;
      }
    .: |
     ha-card {
       box-shadow: 0px 0px;
       border-radius: 20px;
       margin-top: 5px;
     }

Cant have 2 instances of | under eachother without splitting it with .:
Think of the .: as resetting yourself back to style where you can then drill further down into the elements.

[Fe1sar]

This seemed to do the trick.
Thanks so much!

[BMWAddict (Jasper)]

Thanks @paddy0174 and @siwilson . Unfortuantely I’m stuck with the installation of this mini graph card.

Any tips?

I installed via HACS and missing resource reference. I add

resources:

• url: /local/mini-graph-card-bundle.js?v=0.11.0
  type: module

to configuration.yaml but am getting errors.

Integration error: resources - Integration ‘resources’ not found.
Integration error: type - Integration ‘type’ not found.

Also tried the graphical editor method - but don’t know where to find Configuration → lovelace dashboards and resources tab. Is this somehwere in HACS?

[siwilson (Simon Wilson)]

No, no need to add anything to configuration.yaml. Once installed via HACS it should appear as a choice when adding cards to a dashboard.

[BMWAddict (Jasper)]

Awesome @siwilson - I was thinking too hard.

Challenge is that my sensor requires a different approach. It’s working for 50%. See NaN screenshot.

I’m using this code in a custom vcard to get it:
{{ state_attr(‘climate.bijkeuken’, ‘current_temperature’) }}°C

Any idea’s on how to integrate that in the code of mini graph? The HVAC temp card also works without additional code when I set the temperator mode to on in the vcard.

[dimitri.landerloos]

type: custom:mini-graph-card
entities:
  - entity: climate.thermostat
    attribute: current_temperature

I would suggest you read the github page of content you install. It is within the first couple of sections on how to use the card.

[BMWAddict (Jasper)]

@dimitri.landerloos

type: custom:mini-graph-card
entities:
  - entity: climate.thermostat
    attribute: current_temperature

Thanks Dimitri this works. Will read the docs better next time.

[Ben82cgn (Ben)]

how did you do this “Living Aread” in the same line can you give me the code?

[alexeiw123]

Happy to share, not sure which bit it is that you like?

This is what my climate page looks like now. It’s a simple-thermostat card on the top for controlling the air, then each zone is done using a mushroom climate card. This is because of how my izone air conditioning controller handles individual room temperatures.

The code for the living area part is below, but there’s nothing tricky about that, so not sure it’s what you’re asking for?

type: custom:mushroom-climate-card
entity: climate.living_area
fill_container: true
hvac_modes: []
show_temperature_control: true
collapsible_controls: true
icon: mdi:sofa-outline
hold_action:
  action: more-info
layout: horizontal

[gbusolo]

Hi, congrats on the cards…
I also created everything with mushroom cards…
But I can’t get the animations to work…
Can you help me?
Thank you

[bocchinofr]

Hi,
i don’t see the notifications badge on the bell.

I used only one sensor group but it’s not wok

the code below

type: custom:stack-in-card
cards:
  - type: custom:mushroom-chips-card
    chips:
      - type: menu
      - type: template
        content: '{{ now().strftime("%A, %-d %B") }}'
        card_mod:
          style: |
            /* Style date & time */
            ha-card {
              --chip-box-shadow: none;
              --chip-background: none;
              --chip-border-width: 0;
            }
      - type: template
        entity: input_boolean.notifications
        icon: mdi:bell
        tap_action:
          action: toggle
        hold_action:
          action: none
        card_mod:
          style: |
            /* Notification indicator */
            ha-card:after {
              /* Turn on indicator if there is a notification */
              {% set notifications = (expand(states.light.tutte_luci) | selectattr('state', 'eq', 'on') | list | count)
              {% if notifications >= 0 %}
                content: "";
              {% endif %}

              /* Position & style notification */
              position: absolute;
              background: rgb(var(--rgb-red));
              border-radius: 50%;
              top: 6px;
              right: 6px;
              width: 8px;
              height: 8px;
            } 

[dimitri.landerloos]

Post your yaml and we can help