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

[Tyfoon]

Card is slightly updated now (here). solarnet is the solar power going back into the grid (so after deduction of own use of solar). The bars are actual power consumption. Green area = solar power generated

[Sddawson]

So to change, say, the blue used in a Mushroom card, I still need to use mush-rgb-blue: n, n, n in my own theme?

[rhysb (Rhys)]

Yes, that is correct.

[Airyphyla]

hi there everybody. Maybe someone here knows if its possible to merge these two together to one chip?

[oversponged]

And were ist the sidebar defined? i don’t get it.

[Tyfoon]

I have a 2 sensors called sensor.gad_today and sensor.gad_tomorrow. They hold fixed values: None, gft, papier, pmd or restafval. In the “custom button card” I can change the image that is shown in the button based on the state (see code below).

I know want to transform this into a button that belongs to the look and feel of Mushroom, like the rest of my dash. So the mushroom ‘icon’ should show an icon when value is non and use the pictures if any of the other states.

Probably can be done by a template but have not found one yet where an image is loaded. Help appreciated

So currently I have this:

My current custom button code:

`cards:

• entity: sensor.gad_today
  icon: mdi:trash-can
  layout: icon_name_state2nd
  name: Today
  show_entity_picture: true
  show_last_changed: false
  show_name: ‘yes’
  show_state: true
  size: 60%
  state:
  • entity_picture: /local/green.png
    value: gft
  • entity_picture: /local/paper.png
    value: papier
  • entity_picture: /local/pmd.png
    value: pmd
  • entity_picture: /local/grey.png
    value: restafval
    styles:
    card:
    • height: 67px
      entity_picture:
    • padding: 5px 60px 0px px
      name:
    • padding: 0px 10px
    • font-size: 15px
    • font-family: Helvetica
    • justify-self: end
      state:
    • font-size: 15px
    • font-family: Helvetica
    • padding: 0px 10px
    • justify-self: end
    • text-transform: capitalize
    • font-weight: bold
      tap_action:
      action: more-info
      type: custom:button-card
• entity: sensor.gad_tomorrow
  icon: mdi:trash-can
  layout: icon_name_state2nd
  name: Tomorrow
  show_entity_picture: true
  show_last_changed: false
  show_name: ‘yes’
  show_state: true
  size: 60%
  state:
  • entity_picture: /local/green.png
    value: gft
  • entity_picture: /local/paper.png
    value: papier
  • entity_picture: /local/pmd.png
    value: pmd
  • entity_picture: /local/grey.png
    value: restafval
    styles:
    card:
    • height: 67px
      entity_picture:
    • padding: 5px 60px 0px px
      name:
    • padding: 0px 10px
    • font-size: 15px
    • font-family: Helvetica
    • justify-self: end
      state:
    • font-size: 15px
    • font-family: Helvetica
    • padding: 0px 10px
    • justify-self: end
    • text-transform: capitalize
    • font-weight: bold
      tap_action:
      action: more-info
      type: custom:button-card
      type: horizontal-stack`

[Roflcopterer]

The sidebar is made using the Custom sidebar card: GitHub - DBuit/sidebar-card

You can see my sidebar code here: Mushroom Cards - Build a beautiful dashboard easily 🍄 - #129 by Roflcopterer

[glyn (Glyn Davies)]

Hi thee, I have the following card:

This was created with the following YAML:

type: custom:mushroom-climate-card
entity: climate.bathroom
primary_info: none
icon_type: none
show_temperature_control: true
secondary_info: none
card_mod:
  style:
    mushroom-climate-temperature-control$:
      mushroom-input-number$: |
        #container {
          background: none;
          padding: 0px;        
        }
        #container .button {
          height: 100%;
          width: 30%;
        }
        #container .button:nth-child(1) {
          background: rgba(var(--rgb-blue), 0.2);
        }
        #container .button:nth-child(3) {
          background: rgba(var(--rgb-red), 0.2);
        }

What I would like to do is remove or reduce the white space at the top of the card. Any ideas anyone?

Thanks

[Stuartie (Stuart)]

Maybe I’ve missed it because I’m on mobile and currently out so apologies if this has been explained before.

Everything on my dashboard now has an outline around it since updating to 2022.11 how do I remove this back to how it looked before?

[rhysb (Rhys)]

Is this what you wanted?

type: custom:mushroom-climate-card
entity: climate.bathroom
primary_info: none
icon_type: none
show_temperature_control: true
secondary_info: none
card_mod:
  style:
    mushroom-climate-temperature-control$:
      mushroom-input-number$: |
        #container {
          background: none;
          padding: 0px;
        }
        #container .button {
          height: 100%;
          width: 30%;
        }
        #container .button:nth-child(1) {
          background: rgba(var(--rgb-blue), 0.2);
        }
        #container .button:nth-child(3) {
          background: rgba(var(--rgb-red), 0.2);
        }
    .: |
      ha-card {
        padding-top: 0px !important;
      }

[rhysb (Rhys)]

Have a look here:

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

This change has been reverted, so you will need to change this back to --chip-box-shadow. Unfortunately you will not be able to do a ‘Replace All’ as --ha-card-box-shadow is used by Mushroom Cards. If you would like to remove the new border, you can add ha-card-border-width: 0 to your theme. It is nice to see some being added to HA with the new Tile Card.

[P4SQL]

Morning Intro_Verti,

this conditional approach for having an overview on the main dashboard is awesome. I will have a look into this for sure and as far as I understood this correctly it can be used for all kind of things with an entity e.g. a disk in my NAS is not ok, but the state is not “on” or “off” so something to consider, or one of many docker containers which I use is down etc.

Thanks for sharing this with us

Cheers
P4SQL

[glyn (Glyn Davies)]

Rhys, that is exactly what I wanted . I couldn’t work out how to insert the ha-card modifier. Thanks, you are a genius.

[rhysb (Rhys)]

If you want to use the animations with the Tile Card I’ve added some instructions to Part 4.

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

Mushroom Animations - Part 4 Even More Mushroom Card Icon Animations [Mushroom HA Animation]

HA Animation

type: custom:mushroom-template-card icon: mdi:home-assistant icon_color: blue primary: Home Assistant card_mod: style: mushroom-shape-icon$: | ha-icon { --icon-animation: boing 3s ease infinite; transform-origin: 50% 90%; } @keyframes boing { 0% { transform: scale3d(1, 1, 1); } 7% { transform: scale3d(1.25, 0.75, 1); } …

[RKor (Rani)]

Did you find a solution?

[berkans (Berkan Sezer)]

A custom Spotify page created with Mushroom.

This when a music is being played.

And this when nothing is played.

• Media players are listed as buttons below the image and with a press you can easily navigate between them.
• Music follow integration are also implemented. Spotify music follows you around the house automatically. It can also be turned off with a simple button.
• There is a hidden feature under the Spotify logo. When you press it, the music starts on the last motion detected rooms media player.
• Force start will be implemented if nothing was playing at the moment.
• Media controls are down below of the page.
• Total time of which you listened Spotify is also implented in time details.
• One Media player controls all others
• Spotify playlists are also displayed in the page and with a simple click you can start listening right away on your media player.

[ArenaCloser]

Maybe this is what you’re looking for? Mushroom Cards - Build a beautiful dashboard easily 🍄 - #2142 by rhysb

[ArenaCloser]

The custom:mushroom-template-card has a picture option, where you can add a template. If sensor value is ‘papier’ show that image, etc. Else no picture, just the mdi:delete icon.

I’m using it in a simplistic weather card, to show an icon based on the current weather. It’s with images from the web, but should be possible with local files too?

Code

type: custom:mushroom-template-card
primary: 'Nu: {{states(''sensor.openweathermap_weather'')}}'
secondary: '{{states(''sensor.openweathermap_temperature'') | round(1) }} ºC'
icon: mdi:weather-partly-cloudy
entity: sensor.openweathermap_condition
picture: >-
  {% set cloud = states("sensor.openweathermap_cloud_coverage")|int %}  {% set
  rain = states("sensor.buienalarm_precipitation")|float %}  {% if entity ==
  "exceptional" %}
  http://www.gstatic.com/images/icons/material/apps/weather/2x/isolated_scattered_tstorms_day_dark_color_96dp.png
  {% elif entity == "fog" %}
  http://www.gstatic.com/images/icons/material/apps/weather/2x/haze_fog_dust_smoke_dark_color_96dp.png
  {% elif entity == "hail" %}
  http://www.gstatic.com/images/icons/material/apps/weather/2x/wintry_mix_rain_snow_dark_color_96dp.png
  {% elif entity == "lightning" %}
  http://www.gstatic.com/images/icons/material/apps/weather/2x/strong_tstorms_dark_color_96dp.png
  {% elif entity == "lightning-rainy" %}
  http://www.gstatic.com/images/icons/material/apps/weather/2x/strong_tstorms_dark_color_96dp.png
  {% elif entity == "snowy" %}
  http://www.gstatic.com/images/icons/material/apps/weather/2x/flurries_dark_color_96dp.png
  {% elif entity == "snowy-rainy" %}
  http://www.gstatic.com/images/icons/material/apps/weather/2x/wintry_mix_rain_snow_dark_color_96dp.png
  {% elif rain > 0 and rain <= 0.5 %}
  http://www.gstatic.com/images/icons/material/apps/weather/2x/drizzle_dark_color_96dp.png
  {% elif rain > 0.5 and rain <= 1.5 %}
  http://www.gstatic.com/images/icons/material/apps/weather/2x/showers_rain_dark_color_96dp.png
  {% elif rain > 1.5 %}
  http://www.gstatic.com/images/icons/material/apps/weather/2x/heavy_rain_dark_color_96dp.png
  {% elif states("sun.sun") == "below_horizon" %} {% if cloud < 20 %}
  http://www.gstatic.com/images/icons/material/apps/weather/2x/clear_night_dark_color_96dp.png
  {% elif cloud < 40 %}
  http://www.gstatic.com/images/icons/material/apps/weather/2x/mostly_clear_night_dark_color_96dp.png  
  {% elif cloud < 60 %}
  http://www.gstatic.com/images/icons/material/apps/weather/2x/partly_cloudy_night_dark_color_96dp.png
  {% elif cloud < 80 %}
  http://www.gstatic.com/images/icons/material/apps/weather/2x/mostly_cloudy_night_dark_color_96dp.png
  {% else %}
  http://www.gstatic.com/images/icons/material/apps/weather/2x/cloudy_dark_color_96dp.png
  {% endif %}  {% else %}  {% if cloud < 20 %}
  http://www.gstatic.com/images/icons/material/apps/weather/2x/sunny_dark_color_96dp.png
  {% elif cloud < 40 %}
  http://www.gstatic.com/images/icons/material/apps/weather/2x/mostly_sunny_dark_color_96dp.png
  {% elif cloud < 60 %}
  http://www.gstatic.com/images/icons/material/apps/weather/2x/partly_cloudy_dark_color_96dp.png
  {% elif cloud < 80 %}
  http://www.gstatic.com/images/icons/material/apps/weather/2x/mostly_cloudy_day_dark_color_96dp.png
  {% elif cloud <= 100 %}
  http://www.gstatic.com/images/icons/material/apps/weather/2x/cloudy_dark_color_96dp.png
  {% else %} none {% endif %} {% endif %}
multiline_secondary: false
icon_color: grey
tap_action:
  action: navigate
  navigation_path: /lovelace-tablet/weather
card_mod:
  style: |
    ha-card {
      {% if config.entity == "exceptional" %}
      background: rgba(var(--mush-rgb-orange), 0.3);
      {% elif config.entity == "fog" or config.entity == "snowy" or config.entity == "snowy-rainy" %}
      background: rgba(var(--mush-rgb-blue-grey), 0.3);
      {% elif config.entity == "hail" or config.entity == "lightning" or config.entity == "lightning-rainy" or (states("sensor.buienalarm_precipitation") | float) > 0 %}
      background: rgba(var(--mush-rgb-indigo), 0.3);
      {% elif states("sun.sun") == "below_horizon" %}
      background: rgba(var(--mush-rgb-deep-purple), 0.4);
      {% else %}
      background: rgba(var(--mush-rgb-blue), 0.3);
      {% endif %}
    }

[Tyfoon]

Cool. Thanks, will try that

[SteffenDE (Steffen)]

Hi,

I’m making everything new with Mushroom and now I have borders and can not remove these. I try many hints from here but maybe I’m wron. I using newest version without special theme:

type: custom:vertical-stack-in-card
cards:
  - cards: null
    type: custom:mushroom-title-card
    title: Umgebung
    subtitle: null
  - type: custom:mushroom-template-card
    entity: sensor.dwd_wetterwarnung_current_warning_level
    layout: horizontal
    primary: DWD Wetterwarnung
    tap_action:
      action: more-info
    secondary: >-
      {% if
      is_state_attr('sensor.dwd_wetterwarnung_current_warning_level','warning_count',0)
      %}
        Keine
      {% elif
      (state_attr('sensor.dwd_wetterwarnung_current_warning_level','warning_count',0)|int)
      > 0 %}
        {{ state_attr('sensor.dwd_wetterwarnung_current_warning_level','warning_1_name') }}
      {% else %}
        Unbekannt
      {% endif %}
    icon: >-
      {% if
      is_state_attr('sensor.dwd_wetterwarnung_current_warning_level','warning_count',0)
      %}
        mdi:check-circle
      {% elif
      (state_attr('sensor.dwd_wetterwarnung_current_warning_level','warning_count',0)|int)
      > 0 %}
        mdi:alert-outline
      {% else %}
        mdi:circle-outline
      {% endif %}
    icon_color: >-
      {% if
      is_state_attr('sensor.dwd_wetterwarnung_current_warning_level','warning_count',0)
      %}
        green
      {% elif
      (state_attr('sensor.dwd_wetterwarnung_current_warning_level','warning_count',0)|int)
      > 0 %}
        red
      {% else %}
        grey
      {% endif %}
  - type: custom:vertical-stack-in-card
    horizontal: true
    cards:
      - type: custom:mushroom-template-card
        entity: sensor.netatmo_terrasse_temperature
        primary: Außentemperatur
        secondary: >-
          {{- states('sensor.netatmo_terrasse_temperature') -}} {{- " " -}} {{-
          state_attr('sensor.netatmo_terrasse_temperature','unit_of_measurement')
          -}}
        icon: mdi:thermometer
        icon_color: grey
        tap_action:
          action: more-info
      - type: custom:layout-card
        layout_type: custom:masonry-layout
        layout:
          width: 220
          max_cols: 2
          height: auto
          padding: 0px
          card_margin: var(--masonry-view-card-margin, 4px 4px 4px 4px)
        cards:
          - type: custom:mini-graph-card
            name: Außentemperatur
            entities:
              - entity: sensor.netatmo_terrasse_temperature
                state_adaptive_color: true
                show_fill: false
            decimals: 1
            hour24: true
            hours_to_show: 24
            height: 80
            line_width: 4
            show:
              name: false
              graph: line
              icon: false
              state: false
              legend: false
              points: false
              labels: false
            color_thresholds:
              - color: '#636154'
                value: 0
              - color: '#6ac6f9'
                value: 10
              - color: '#fbed63'
                value: 20
              - color: '#ffb748'
                value: 30
              - color: '#f0341f'
                value: 40
            card_mod:
              style: |
                ha-card {
                  background: none;
                  box-shadow: none;
                  --ha-card-border-width: 0;
                }
  - type: custom:vertical-stack-in-card
    horizontal: true
    cards:
      - type: custom:mushroom-template-card
        entity: sensor.sts_terrassetemp_min
        primary: 24h Min.
        secondary: >-
          {{- states('sensor.sts_terrassetemp_min') -}} {{- " " -}} {{-
          state_attr('sensor.sts_terrassetemp_min','unit_of_measurement') -}}
        icon: mdi:thermometer-minus
        icon_color: blue
        tap_action:
          action: more-info
      - type: custom:mushroom-template-card
        entity: sensor.sts_terrassetemp_mean
        primary: 24h Ø
        secondary: >-
          {{- states('sensor.sts_terrassetemp_mean') -}} {{- " " -}} {{-
          state_attr('sensor.sts_terrassetemp_mean','unit_of_measurement') -}}
        icon: mdi:thermometer-off
        tap_action:
          action: more-info
      - type: custom:mushroom-template-card
        entity: sensor.sts_terrassetemp_max
        primary: 24h Max.
        secondary: >-
          {{- states('sensor.sts_terrassetemp_max') -}} {{- " " -}} {{-
          state_attr('sensor.sts_terrassetemp_max','unit_of_measurement') -}}
        icon: mdi:thermometer-plus
        icon_color: red
        tap_action:
          action: more-info
  - type: custom:vertical-stack-in-card
    horizontal: true
    cards:
      - type: custom:mushroom-template-card
        entity: sensor.mmx_haus_temp_average
        layout: horizontal
        primary: Innen Lufttemperatur
        secondary: >-
          {{ "Ø  " }} {{- states('sensor.mmx_haus_temp_average') | round(1) -}}
          {{ " " }} {{-
          state_attr('sensor.mmx_haus_temp_average','unit_of_measurement') -}}
        tap_action:
          action: more-info
        icon: >-
          {%- set temp = states('sensor.mmx_haus_temp_average') | float -%} {%-
          if (temp >= 23.0) -%} 
              mdi:alert-outline
          {%- elif (temp >= 22.0) -%}
              mdi:alert-circle-outline
          {%- elif (temp >= 20.5) -%}
              mdi:check-circle
          {%- elif (temp >= 19.5) -%}
              mdi:alert-circle-outline
          {%- else -%}
              mdi:alert-outline
          {%- endif -%}
        icon_color: >-
          {%- set temp = states('sensor.mmx_haus_temp_average') | float -%} {%-
          if (temp >= 23.0) -%} 
              red
          {%- elif (temp >= 22.0) -%}
              yellow
          {%- elif (temp >= 20.5) -%}
              green
          {%- elif (temp >= 19.5) -%}
              yellow
          {%- else -%}
              red
          {%- endif -%}
      - type: custom:mushroom-template-card
        entity: group.grp_innenco2
        layout: horizontal
        primary: Innen Luftqualität
        secondary: >-
          {% set thresholdWarn = 1200 %} {% set thresholdAlarm = 2200 %} {% set
          output = namespace(wert=0) %} {% for entity in
          states.group.grp_innenco2.attributes.entity_id %}
            {% if float(states(entity),0) > thresholdWarn %}
              {% set output.wert = output.wert + 1 %}
            {% elif float(states(entity),0) > thresholdAlarm %}
              {% set output.wert = output.wert + 11 %}
            {% endif %}
          {% endfor %} {% if output.wert > 10 %}
            {{- 'CO² Alarm - Ø ' -}}
            {{- states('sensor.mmx_haus_co2_average') | round(0) -}}
            {{- ' ppm' -}}
          {% elif output.wert > 0 %}
            {{- 'CO² Warnung - Ø ' -}}
            {{- states('sensor.mmx_haus_co2_average') | round(0) -}}
            {{- ' ppm' -}}
          {% else %}
            OK
          {% endif %}
        tap_action:
          action: more-info
        icon: >-
          {% set thresholdWarn = 1200 %} {% set thresholdAlarm = 2200 %} {% set
          output = namespace(wert=0) %} {% for entity in
          states.group.grp_innenco2.attributes.entity_id %}
            {% if float(states(entity),0) > thresholdWarn %}
              {% set output.wert = output.wert + 1 %}
            {% elif float(states(entity),0) > thresholdAlarm %}
              {% set output.wert = output.wert + 11 %}
            {% endif %}
          {% endfor %} {% if output.wert > 10 %}
            mdi:alert-outline
          {% elif output.wert > 0 %}
            mdi:alert-circle-outline
          {% else %}
            mdi:check-circle
          {% endif %}
        icon_color: >-
          {% set thresholdWarn = 1200 %} {% set thresholdAlarm = 2200 %} {% set
          output = namespace(wert=0) %} {% for entity in
          states.group.grp_innenco2.attributes.entity_id %}
            {% if float(states(entity),0) > thresholdWarn %}
              {% set output.wert = output.wert + 1 %}
            {% elif float(states(entity),0) > thresholdAlarm %}
              {% set output.wert = output.wert + 11 %}
            {% endif %}
          {% endfor %} {% if output.wert > 10 %}
            red
          {% elif output.wert > 0 %}
            yellow
          {% else %}
            green
          {% endif %}

Thansk for help, Steffen