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

Is it possible to display conditional chips based on numerical conditions? The following code unfortunately does not work:

              - type: conditional
                conditions:
                  - entity: sensor.humidity_zimmer_hannah
                    condition: numeric_state
                    above: 70
                chip:
                  type: entity
                  entity: sensor.humidity_zimmer_hannah
                  icon_color: red
                  tap_action:
                    action: none
                  content_info: none
                  icon: mdi:water-percent

Have a look at this card?

7 Likes

Is there a way to add secondary data to a mushroom fan card?
I have two ‘Modern Forms’ brand fans, and the integration will tell me which direction the fans are running, and I’d like to change their direction based on environmental conditions, so I’d like to have the fan direction displayed on the card.

I tried building my own fan card from scratch, but sadly mushroom cards dont let you easily take that nice spinning fan icon and use it in a mushroom template card, or use the fan/dimmer horizontal slider. Is there a way to do this, or am I out of luck unless mushroom cards get an update letting folks use those elements in template cards?

The layout card (GitHub - thomasloven/lovelace-layout-card: 🔹 Get more control over the placement of lovelace cards.) will give you the flexibility you want for this.

1 Like

@rhysb kindly guide

You could try this:

{{ as_timestamp(states.binary_sensor.voordeur.last_changed) | timestamp_custom('%H %M',True) }}

Found at: Last_updated State and last-changed in Lovelave - #18 by weado

1 Like

Thanks for your help.
I got it working now without the “expander card”.
now just use the mushroom cards.

image
image

1 Like

That worked. Can someone explain why this is not a standard option?

I made a couple remotes mostly using mushroom, stack-in, stack, and grid cards.

I’d like to make two more improvements if possible, so I’m seeking suggestions:

  • The navigation area with the arrows and select button would be better as a track pad style, but I cannot find a good card for that.
  • The volume works well for tapping, but I’d prefer a large slider style that would look and work like the mushroom light card dimmer control. I know I can customize one of the media player cards (core, mini, or mushroom), but (1) they’re all horizontal and (2) they’re all very thin and hard to see at a glance.

Any ideas?

3 Likes

Hi,
nice card!
Can you share te code?

1 Like

so, I’m almost there with my car charging card.
One thing would freak me out - if the icon from the template card would sit in the left corner like in the picture below AND if the ping animation would work - as shown here:

Mushroom Cards - Build a beautiful dashboard easily 🍄 - #2925 by rhysb?

I have already spent hours combining the various CSS “commands” - I just can’t get it combined.
No chance, maybe @rhysb still has an idea ? :star_struck:

skoda

2 Likes

I made this thermostat card with some controls. How can I make it glow around the border based on the thermostat status?

image

code:

      - type: custom:vertical-stack-in-card
        cards:
          - type: custom:mushroom-climate-card
            entity: climate.room_climate_office
            name: Office
            icon: mdi:briefcase
            fill_container: false
            show_temperature_control: true
            layout: horizontal
            collapsible_controls: false
          - type: horizontal-stack
            cards:
              - type: custom:mushroom-template-card
                entity: light.office_group_1
                icon: mdi:ceiling-light
                icon_color: |
                  {% if is_state('light.office_group_1', 'on') %}
                    yellow
                  {% else %}
                    disabled
                  {% endif %}
                tap_action:
                  action: toggle
                primary: ''
                layout: vertical
                secondary: Lights1
                badge_color: ''

              - type: custom:mushroom-template-card
                entity: light.office_group_2
                icon: mdi:ceiling-light
                icon_color: |
                  {% if is_state('light.office_group_2', 'on') %}
                    yellow
                  {% else %}
                    disabled
                  {% endif %}
                tap_action:
                  action: toggle
                primary: ''
                layout: vertical
                secondary: Lights2

              - type: custom:mushroom-template-card
                primary: ''
                secondary: >-
                  {% if is_state_attr('climate.room_climate_office', 'preset_mode',
                  'boost') %}
                    Boost ON
                  {% else %}
                    Boost OFF
                  {% endif %}
                icon: mdi:radiator
                layout: vertical
                tap_action:
                  action: call-service
                  service: script.climate_boost_toggle
                  data:
                    climate_entity: climate.room_climate_office
                  target: {}
                icon_color: >-
                  {% if is_state_attr('climate.room_climate_office', 'preset_mode',
                  'boost') %}
                    red
                  {% else %}
                    disabled
                  {% endif %}

              - type: custom:mushroom-template-card
                primary: ''
                secondary: |-
                  T: {{states('sensor.temperature_office')}}°C
                  H: {{states('sensor.humidity_office')}}%
                  V: {{states('sensor.office_thermostat_valvetappet')}}%
                icon: ''
                layout: vertical
                icon_color: ''
                multiline_secondary: true
                tap_action:
                  action: none
                hold_action:
                  action: none
                double_tap_action:
                  action: none
1 Like

First of all thank you very much for sharing this code. I used it and it looks great!

I have an issue when i use 1 decimal for setting the temperature. The minus sign gets under the temperature and the layout is ruined. i tried altering the lettertype size but css not really my thing. Any suggestions would really be appreciated.
I tried this but nothing changed

cards:
          - type: custom:simple-thermostat
            style: |
              ha-card {
               --st-font-size-xl: 16px;
               --st-font-size-m: 14px;
               --st-font-size-title: 16px;
               --st-font-size-sensors: 18px;
               --st-spacing: 2px;
              }
              ha-card {
                --st-spacing: 0px;
              }
              ha-card .current--value {
                color: #ffffff;
              }
              header {
                margin-bottom: 10px !important;
                padding-bottom: 0px !important;
              }
              ha-card .thermostat-trigger { 
                color: #6f6f6f;
              }

Full code:

type: custom:stack-in-card
keep:
  margin: false
  box_shadow: false
  background: false
cards:
  - type: grid
    square: false
    columns: 2
    cards:
      - type: custom:mushroom-template-card
        style: |
          ha-card {
            padding-bottom: 14px !important;
          }
        primary: Office
        secondary: |
          {{ state_attr('climate.office_thermostaat', 'hvac_action') }}
        icon: |-
          {% set mode = states('climate.office_thermostaat') %}
          {% if mode == 'off' %}
          mdi:power
          {% elif mode == 'cool' %}
          mdi:snowflake
          {% elif mode == 'heat' %}
          mdi:fire
          {% elif mode == 'heat_cool' %}
          mdi:autorenew
          {% else %}
          mdi:home-thermometer
          {% endif %}
        icon_color: >-
          {% set status = state_attr('climate.office_thermostaat','hvac_action')
          %}

          {% if status == 'off' %}

          grey

          {% elif status == 'cooling' %}

          blue

          {% elif status == 'heating' %}

          red

          {% else %}

          grey

          {% endif %}
        tap_action: none
      - type: vertical-stack
        cards:
          - type: custom:simple-thermostat
            style: |
              ha-card {
                --st-spacing: 0px;
              }
              ha-card .current--value {
                color: #ffffff;
              }
              header {
                margin-bottom: 10px !important;
                padding-bottom: 0px !important;
              }
              ha-card .thermostat-trigger { 
                color: #6f6f6f;
              }
            entity: climate.office_thermostaat
            header:
              name: false
              icon: false
            decimals: '0'
            fallback: 'Off'
            hide:
              temperature: true
              state: true
            layout:
              mode:
                names: false
                icons: false
                headings: false
              step: row
            step_size: '1'
            control:
              hvac:
                'off': false
                heat: false
                cool: false
                heat_cool: false
  - type: custom:simple-thermostat
    style: |
      ha-card {
        --st-font-size-toggle-label: 6px
        --st-spacing: 0px;
        --st-default-spacing: 0px;
        --st-mode-background: #2d2d2d;
        margin-left: 12px;
        margin-right: 12px;
      }
      ha-card .mode-item.active.off { 
        background: #363636;
        color: #9e9e9e;
      }
      ha-card .mode-item.active.cool { 
        background: #1d3447;
        color: #2196f3;
      }
      ha-card .mode-item.active.heat { 
        background: #472421;
        color: #f44336;
      }
      ha-card .mode-item.active.heat_cool { 
        background: #493516;
        color: #ff9800;
      }
      ha-card .mode-item.active { 
        background: #263926;
        color: #4caf50;
      }
      ha-card .mode-item.active:hover { 
        background: #363636;
        color: #9e9e9e;
      }
      ha-card .mode-item:hover { 
        background: #363636;
        color: #9e9e9e;
      }
      ha-card .mode-item {
        --st-spacing: 10px;
        border-radius: 10px;
      }
      ha-card .modes {
        grid-gap: 12px
      }
    entity: climate.office_thermostaat
    header: false
    setpoints: false
    hide:
      temperature: true
      state: true
    layout:
      mode:
        headings: false
        icons: true
        names: false
      step: row
    control:
      hvac:
        'off':
          name: Power
        heat:
          name: Heat
        cool:
          name: Cool
        heat_cool:
          name: Auto
  - type: custom:mushroom-chips-card
    style: |
      ha-card {
        --chip-box-shadow: none;
        --chip-background: none;
        --chip-spacing: 0px;
        --chip-padding: 0 0.2em
      }
    alignment: justify
    chips:
      - type: template
        content: '{{state_attr(entity, ''current_temperature'')}} °C'
        entity: climate.office_thermostaat
        icon: mdi:home-thermometer
        tap_action:
          action: more-info
        icon_color: |-
          {% set state=states(entity) %}
          {% if state=='cool' %}
          blue
          {% elif state=='heat' %}
          red
          {% else %}
          grey
          {% endif %}
        style: |
          ha-card {
            margin-left: 6px;
          }
      - type: template
        entity: climate.office_thermostaat
        content: |
          {{ state_attr(entity, 'fan_mode') }}
        icon: mdi:fan
        icon_color: green
        tap_action: none
      - type: template
        double_tap_action:
          action: none
        content: '{{ states(entity) }}% '
        entity: sensor.lumi_lumi_sens_humidity
        icon: mdi:water
        icon_color: blue
        tap_action:
          action: none
        hold_action:
          action: none
      - type: template
        icon: |-
          {% if is_state(entity, 'off') %}
            mdi:chevron-down 
          {% elif is_state(entity, 'on') %}   
            mdi:chevron-up    
          {% endif %}
        tap_action:
          action: toggle
        entity: input_boolean.thermostat_dropdown_office
        icon_color: disabled
        style: |
          ha-card {
            --chip-icon-size: 1em
          }
  - type: conditional
    conditions:
      - entity: input_boolean.thermostat_dropdown_office
        state: 'on'
    card:
      type: custom:stack-in-card
      keep:
        margin: false
        box_shadow: false
        background: false
      cards:
        - type: grid
          square: false
          columns: 2
          cards:
            - type: custom:mushroom-entity-card
              entity: sensor.19791209321807_outdoor_temperature
              primary_info: state
              secondary_info: name
              name: Out
              icon_color: blue
            - type: custom:simple-thermostat
              style: |
                ha-card {
                  --st-font-size-toggle-label: 6px
                  --st-spacing: 0px;
                  --st-default-spacing: 1.6px;
                  --st-mode-background: #2d2d2d;
                  margin-right: 12px;
                }
                ha-card .mode-item.active { 
                  background: #263926;
                  color: #4caf50;
                }
                ha-card .mode-item.active:hover { 
                  background: #363636;
                  color: #9e9e9e;
                }
                ha-card .mode-item:hover { 
                  background: #363636;
                  color: #9e9e9e;
                }
                ha-card .mode-item {
                  --st-spacing: 6px;
                  border-radius: 10px;
                }
                ha-card .modes {
                  grid-gap: 12px
                }
              entity: climate.werkkamer_airco
              header: false
              setpoints: false
              hide:
                temperature: true
                state: true
              layout:
                mode:
                  headings: false
                  icons: true
                  names: false
                step: row
              control:
                hvac:
                  'off': false
                  heat: false
                  cool: false
                  heat_cool: false
                  fan_only: false
                  dry: false
                  auto: false
                fan:
                  LOW_MID: false
                  NATURE: false
                  MID_HIGH: false
                  MID:
                    icon: mdi:fan-speed-2
                    name: false
                  HIGH:
                    icon: mdi:fan-speed-3
                    name: false
                  Auto: false
                  LOW:
                    name: 'On'
                    icon: mdi:fan-speed-1
        - type: custom:mini-graph-card
          entities:
            - entity: sensor.lumi_lumi_sens_temperature
              name: Inside Temperature
              color: '#4caf50'
            - entity: sensor.19791209321807_outdoor_temperature
              name: Outside Temperature
              color: '#2196f3'
              y_axis: secondary
          hours_to_show: 24
          line_width: 3
          font_size: 50
          animate: true
          show:
            name: false
            icon: false
            state: false
            legend: false
            fill: fade

Screenshot_2022-12-28-17-30-46-51_40deb401b9ffe8e1df2f1cc5ba480b12|320x500

1 Like

You did a great job here. Do you mind sending us the whole dashboard source config so we can reuse?

Hi,

In the picture from 7ahang that @piitaya lists as an inspiration, there is a “device count” under the “living room” title, and I’ve been wanting to make a similar count to use in my “room cards”.
I’ve tried to search and look through this whole thread (and others) but I haven’t found a way to do it yet.
Does anyone know if there is an easy way to do that?

I have a regular “area” for all the devices, so I was hoping to just do some template area count.

Hi, a css style question. I would like to center bottom button but my css skills are failing me, anyone have a take? They are horizontally stacked, mushroom template cards (I have card mod etc installed). Been searching the forum and perhaps css god @rhysb could help?

Thanks in advance.

How can I make this only animate when its on?

features:
  - type: light-brightness
type: tile
entity: light.master_bedroom_main_lights
icon: mdi:lightbulb-on
card_mod:
  style:
    ha-tile-icon$: |
      ha-icon {
        animation: illumination 1s infinite;
      }
      @keyframes illumination {
        0%, 100% { clip-path: inset(0 0 0 0); }
        80% { clip-path: polygon(0% 99%, 20% 55%, 22% 37%, 39% 20%, 61% 21%, 77% 35%, 79% 57%, 99% 100%); }
      }

check this …

animation: 
  {% if is_state('light.master_bedroom_main_lights', 'on')  %} 
    illumination 1s infinite;
  {% endif %}

Did you ever figure this one at? I’m at the same point right now.

nice man & can you share you code pleas ?