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

I have the same problem, did you get it to show the artist?

Not yet. This should be the minimum that has to be shown. Strange itā€™s not there. Hope someone can help.

I have searched this thread and found the answer after a little bit of tinkering:

The setting that worked is this in line 19:

    .: |
type: custom:stack-in-card
cards:
  - type: custom:mushroom-media-player-card
    entity: media_player.wohnzimmer_pi
    icon: mdi:play
    use_media_info: true
    use_media_artwork: false
    show_volume_level: false
    media_controls:
      - play_pause_stop
      - previous
      - next
    fill_container: false
    card_mod:
      style:
        mushroom-state-info$: |
          .primary:before {
            content: "{{ (state_attr(config.entity, "media_artist")) }} - ";
          }
        .: |
          mushroom-shape-icon {
            display: flex;
            {% set media_type = state_attr(config.entity, 'media_content_type') %}
            {% if media_type == 'tvshow' %}
              --card-mod-icon: mdi:television-classic;
              animation: flicker 1s linear infinite alternate;
            {% elif media_type == 'movie' %}
              --card-mod-icon: mdi:movie-roll;
              animation: spin 2s linear infinite reverse;
            {% elif media_type == 'music' %}
              --card-mod-icon: mdi:music;
              animation: beat 1.3s ease-out infinite both;
            {% elif media_type == 'playlist' %}
              --card-mod-icon: mdi:music;
              animation: beat 1.3s ease-out infinite both;
            {% else %}
              --card-mod-icon: mdi:play;
            {% endif %}

            {{ 'animation: none;' if not is_state(config.entity, 'playing') }}

          }
          @keyframes flicker {
            0%, 31.98%, 32.98%, 34.98%, 36.98%, 39.98%, 67.98%, 68.98%, 95.98%, 96.98%, 97.98%, 98.98%, 100% { --icon-color: rgba(var(--rgb-indigo), 1); }
            32%, 33%, 35%, 36%, 37%, 40%, 68%, 69%, 96%, 97%, 98%, 99% { --icon-color: rgba(var(--rgb-indigo), 0.6); }
          }
          @keyframes beat {
            0%, 60% { --icon-symbol-size: 21px; }
            5%, 17%, 57% { --icon-symbol-size: 22px; }
            10%, 20%, 51% { --icon-symbol-size: 23px; }
            25%, 45% { --icon-symbol-size: 24px; }
            30%, 39% { --icon-symbol-size: 25px; }
            33% { --icon-symbol-size: 26px; }
          }
          ha-card {
            --ha-card-border-width: 0;
          }
          mushroom-state-info$: |
            .primary:before {
              content: "{{ (state_attr(config.entity, "media_artist")) }} - ";
            }
          ha-card:before {
            transform: translate3d(0,0,0);
            -webkit-transform: translate3d(0,0,0);
            content: "";

            background: url('/local/images/idle.png') center no-repeat;
            {% if not is_state(config.entity, 'idle') %}
              background: url( '{{ state_attr(config.entity, "entity_picture") }}') center no-repeat;
            {% endif %}

            background-size: contain;
            margin: 4px 4px 16px;
            filter: drop-shadow(4px 4px 6px rgba(0, 0, 0, 0.5));
            border-radius: var(--control-border-radius);

            {% set media_type = state_attr(config.entity, 'media_content_type') %}
            {% if media_type == 'tvshow' %}
              aspect-ratio: 16 / 9;
            {% elif media_type == 'movie' %}
              aspect-ratio: 2 / 3;
            {% else %}
              aspect-ratio: 1 / 1;
            {% endif %}
          }
  - type: custom:layout-card
    layout_type: custom:grid-layout
    layout:
      grid-template-columns: auto 60px
      margin: '-14px 0px -8px -4px;'
    cards:
      - type: custom:mushroom-media-player-card
        entity: media_player.wohnzimmer_mediaplayer_plex
        volume_controls:
          - volume_set
          - volume_buttons
        media_controls: []
        show_volume_level: true
        use_media_info: false
        icon_type: none
        primary_info: none
        secondary_info: none
        card_mod:
          style: |
            ha-card {
              --ha-card-border-width: 0;
              box-shadow: none;
              margin-right: -8px !important;
            }
      - type: custom:mushroom-chips-card
        chips:
          - type: conditional
            conditions:
              - entity: input_boolean.multiroom_status
                state: 'on'
            chip:
              type: action
              icon: mdi:music-box
              tap_action:
                action: call-service
                service: script.multiroom_off
              card_mod:
                style: |
                  ha-card {
                    --chip-background: rgba(var(--rgb-disabled), 0.2);
                    margin-top: 12px; 
                    --chip-box-shadow: none;
                    --chip-border-radius: var(--control-border-radius);
                    --chip-border-width: 0;
                    --chip-height: 42px;
                  }
          - type: conditional
            conditions:
              - entity: input_boolean.multiroom_status
                state: 'off'
            chip:
              type: action
              icon: mdi:music-box-multiple
              tap_action:
                action: call-service
                service: script.multiroom_on
              card_mod:
                style: |
                  ha-card {
                    --chip-background: rgba(var(--rgb-disabled), 0.2);
                    margin-top: 12px; 
                    --chip-box-shadow: none;
                    --chip-border-radius: var(--control-border-radius);
                    --chip-border-width: 0;
                    --chip-height: 42px;
                  }
  - type: custom:layout-card
    layout_type: custom:grid-layout
    layout:
      grid-template-columns: auto 60px
      margin: '-14px 0px -8px -4px;'
    cards:
      - type: conditional
        conditions:
          - entity: media_player.squeezelite_ha_addon
            state_not: 'off'
          - entity: media_player.squeezelite_ha_addon
            state_not: idle
        card:
          type: custom:mushroom-media-player-card
          entity: media_player.squeezelite_ha_addon
          volume_controls:
            - volume_set
          media_controls: []
          show_volume_level: true
          use_media_info: false
          icon_type: none
          primary_info: none
          secondary_info: none
          card_mod:
            style: |
              ha-card {
                --ha-card-border-width: 0;
                box-shadow: none;
                margin-right: -8px !important;
              }
      - type: conditional
        conditions:
          - entity: media_player.squeezelite_ha_addon
            state_not: 'off'
          - entity: media_player.squeezelite_ha_addon
            state_not: idle
        card:
          type: custom:mushroom-chips-card
          chips:
            - type: template
              icon: mdi:knife
              card_mod:
                style: |
                  ha-card {
                    --chip-background: rgba(var(--rgb-disabled), 0.2);
                    margin-top: 12px; 
                    --chip-box-shadow: none;
                    --chip-border-radius: var(--control-border-radius);
                    --chip-border-width: 0;
                    --chip-height: 42px;
                  }
  - type: conditional
    conditions:
      - entity: media_player.wohnzimmer_pi
        state_not: 'off'
      - entity: media_player.wohnzimmer_pi
        state_not: idle
    card:
      entity: media_player.wohnzimmer_pi
      hide:
        icon: true
        name: true
        runtime: true
        source: true
        power: true
        state_label: true
        volume: true
        info: true
        progress: false
        controls: true
      more_info: false
      type: custom:mini-media-player
      toggle_power: false
      group: true
      card_mod:
        style:
          mmp-progress$: |
            paper-progress {
              {{ '--paper-progress-container-color: rgba(var(--rgb-orange-color), 0.2) !important;' if is_state(config.entity, 'playing') }}
            }
          .: |
            ha-card {
              margin: 0px 12px 12px;
              --mmp-progress-height: 12px !important;
              height: var(--mmp-progress-height);
              --mmp-accent-color: rgb(var(--rgb-orange-color));
              --mmp-border-radius: 12px !important;
              --ha-card-border-width: 0;
            }
  - type: custom:stack-in-card
    mode: horizontal
    margin: false
    cards:
      - type: custom:mushroom-entity-card
        entity: script.playplaylist_wohnzimmer
        name: Metal
        icon: mdi:playlist-music
        secondary_info: none
        tap_action:
          action: toggle
card_mod:
  style: |
    ha-card:before {
      transform: translate3d(0,0,0);
      -webkit-transform: translate3d(0,0,0);
      content: "";
      position: absolute;
      height: 100%;
      width: 100%;

      background: url('/local/images/idle.png') center no-repeat;
      {% if not is_state('media_player.currently_playing', 'idle') %}
        background: url( '{{ state_attr('media_player.currently_playing', "entity_picture") }}' ) center no-repeat;
      {% endif %}

      filter: blur(150px) saturate(200%);
      background-size: 100% 100%;
    }
    ha-card {
      transform: translate3d(0,0,0);
      -webkit-transform: translate3d(0,0,0);
    }

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

2 Likes

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%); }
      }