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

You can format the date/time with .strftime() like this:

{{ now().strftime("%A, %-d %B %Y") }}

Format code reference:
https://strftime.org/

Made it… :pray: :slight_smile:
you are really Genius.

Thank you So much… you are the best

1 Like

You can change the Mushroom Climate Buttons like this:

type: custom:mushroom-climate-card
entity: climate.air_conditioner
hvac_modes:
  - 'off'
  - heat
  - heat_cool
show_temperature_control: true
primary_info: state
secondary_info: name
card_mod:
  style:
    mushroom-state-info$: |
      .primary:after {
        content: " | {{ states('sensor.lounge_sensor_humidity') | round(1) }} %";
      }
    mushroom-climate-hvac-modes-control $ mushroom-button:nth-child(1) $: |
      .button {
        --card-mod-icon: mdi:mushroom;
      }
    .: |
      mushroom-climate-hvac-modes-control {
        transform: scalex(-1);
      }

Note that the :nth-child() numbering is reversed because we have reversed the buttons.

2 Likes

Title and entity:

type: vertical-stack
cards:
  - type: custom:mushroom-title-card
    title: Study
  - type: custom:stack-in-card
    mode: horizontal
    cards:
      - type: custom:mushroom-template-card
        primary: Bens PC
        secondary: |-
          {{ states((entity)) | title }}  {% if is_state((entity), 'on') %}
            {% if (now() - states('sensor.winterfell_lastactive')|as_datetime).total_seconds() < 10 %}
              - Active
            {% else %}
             - Inactive
            {% endif %}    
          {% endif %}
        icon: mdi:microsoft-windows
        icon_color: |-
          {% if is_state((entity), 'off') %}
           disabled
          {% else %}
           blue
          {% endif %}
        badge_icon: >-
          {% if (now() -
          states('sensor.winterfell_lastactive')|as_datetime).total_seconds() <
          10 %}
            mdi:run
          {% else %}
              ''
          {% endif %}
        badge_color: >-
          {% if (now() -
          states('sensor.winterfell_lastactive')|as_datetime).total_seconds() <
          10 %}
            green
          {% else %}
            ''
          {% endif %}
        entity: switch.winterfell
        card_mod:
          style: |
            ha-card {
              --ha-card-border-width: 0;
            }
            ha-card:active {
              background: rgba(var(--rgb-disabled), 0.1);
              transform: scale(0.985);
              transition: 0s;
            }
      - type: custom:mushroom-chips-card
        chips:
          - type: entity
            entity: button.winterfell_lock
            icon_color: white
            icon: mdi:lock
            content_info: none
            tap_action:
              action: call-service
              service: button.press
              target:
                entity_id: button.winterfell_lock
            card_mod:
              style: |
                ha-card {
                  --chip-background: rgba(var(--rgb-primary-text-color), 0.05);
                  --chip-border-width: 0;
                  --icon-color: rgb(var(--rgb-white));
                }
          - type: entity
            entity: button.winterfell_sleep
            icon_color: white
            icon: mdi:power-sleep
            content_info: none
            tap_action:
              action: call-service
              confirmation:
                text: Are you sure you want to Sleep?
              service: button.press
              target:
                entity_id: button.winterfell_sleep
            card_mod:
              style: |
                ha-card {
                  --chip-background: rgba(var(--rgb-primary-text-color), 0.05);
                  --chip-border-width: 0;
                  --icon-color: rgb(var(--rgb-white));
                }
          - type: entity
            entity: button.winterfell_restart
            icon_color: white
            icon: mdi:restart
            content_info: none
            tap_action:
              action: call-service
              confirmation:
                text: Are you sure you want to Restart?
              service: button.press
              target:
                entity_id: button.winterfell_restart
            card_mod:
              style: |
                ha-card {
                  --chip-background: rgba(var(--rgb-primary-text-color), 0.05);
                  --chip-border-width: 0;
                  --icon-color: rgb(var(--rgb-white));
                }
          - type: entity
            entity: button.winterfell_shutdown
            icon_color: white
            icon: mdi:power
            content_info: none
            tap_action:
              action: call-service
              confirmation:
                text: Are you sure you want to Shutdown?
              service: button.press
              target:
                entity_id: button.winterfell_shutdown
            card_mod:
              style: |
                ha-card {
                  --chip-background: rgba(var(--rgb-primary-text-color), 0.05);
                  --chip-border-width: 0;
                  --icon-color: rgb(var(--rgb-white));
                }
        card_mod:
          style: |
            ha-card {
                --chip-box-shadow: none;
                top: 16px;
                width: -webkit-fill-available;
                right: 12px;
                position: absolute;
            } 
            .chip-container {
                right: 0px;
                position: absolute;
            }

CPU/RAM/GPU:

type: conditional
conditions:
  - entity: sensor.winterfell_cpuload
    state_not: unavailable
card:
  type: vertical-stack
  cards:
    - type: grid
      square: false
      columns: 3
      cards:
        - type: custom:stack-in-card
          cards:
            - type: custom:apexcharts-card
              chart_type: radialBar
              series:
                - entity: sensor.winterfell_cpuload
                  color: rgb(76, 175, 80)
                  max: 100
                  show:
                    legend_value: false
              apex_config:
                plotOptions:
                  radialBar:
                    offsetY: 0
                    startAngle: -108
                    endAngle: 108
                    hollow:
                      size: 65%
                    dataLabels:
                      name:
                        show: false
                      value:
                        show: false
                    track:
                      strokeWidth: 80%
                      margin: 0
                legend:
                  show: false
                chart:
                  height: 170px
              card_mod:
                style: |
                  ha-card {
                    --ha-card-border-width: 0;
                  }
            - type: custom:mushroom-entity-card
              entity: sensor.winterfell_cpuload
              primary_info: name
              secondary_info: state
              name: Core
              icon: mdi:cpu-64-bit
              icon_color: green
              layout: vertical
              tap_action:
                action: more-info
              hold_action:
                action: more-info
              double_tap_action:
                action: more-info
              card_mod:
                style: |
                  ha-card {
                    top: -63px;
                    --ha-card-border-width: 0;
                  }
          card_mod:
            style: |
              ha-card {
                height: 158px;
              }
        - type: custom:stack-in-card
          cards:
            - type: custom:apexcharts-card
              chart_type: radialBar
              series:
                - entity: sensor.winterfell_memoryusage
                  color: rgb(33, 150, 243)
                  max: 100
                  show:
                    legend_value: false
              apex_config:
                plotOptions:
                  radialBar:
                    offsetY: 0
                    startAngle: -108
                    endAngle: 108
                    hollow:
                      size: 65%
                    dataLabels:
                      name:
                        show: false
                      value:
                        show: false
                    track:
                      strokeWidth: 80%
                      margin: 0
                legend:
                  show: false
                chart:
                  height: 170px
              card_mod:
                style: |
                  ha-card {
                    --ha-card-border-width: 0;
                  }
            - type: custom:mushroom-entity-card
              entity: sensor.winterfell_memoryusage
              primary_info: name
              secondary_info: state
              name: Memory
              icon_color: blue
              layout: vertical
              tap_action:
                action: more-info
              hold_action:
                action: more-info
              double_tap_action:
                action: more-info
              card_mod:
                style: |
                  ha-card {
                    top: -63px;
                    --ha-card-border-width: 0;
                  }
          card_mod:
            style: |
              ha-card {
                height: 158px;
              }
        - type: custom:stack-in-card
          cards:
            - type: custom:apexcharts-card
              chart_type: radialBar
              series:
                - entity: sensor.winterfell_gpuload
                  color: rgb(233, 30, 99)
                  max: 100
                  show:
                    legend_value: false
              apex_config:
                plotOptions:
                  radialBar:
                    offsetY: 0
                    startAngle: -108
                    endAngle: 108
                    hollow:
                      size: 65%
                    dataLabels:
                      name:
                        show: false
                      value:
                        show: false
                    track:
                      strokeWidth: 80%
                      margin: 0
                legend:
                  show: false
                chart:
                  height: 170px
              card_mod:
                style: |
                  ha-card {
                    --ha-card-border-width: 0;
                  }
            - type: custom:mushroom-entity-card
              entity: sensor.winterfell_gpuload
              primary_info: name
              secondary_info: state
              name: GPU
              icon: mdi:expansion-card
              icon_color: pink
              layout: vertical
              tap_action:
                action: more-info
              hold_action:
                action: more-info
              double_tap_action:
                action: more-info
              card_mod:
                style: |
                  ha-card {
                    top: -63px;
                    --ha-card-border-width: 0;
                  }
          card_mod:
            style: |
              ha-card {
                height: 158px;
              }

Harddrives:

type: vertical-stack
cards:
  - type: conditional
    conditions:
      - entity: sensor.winterfell_cpuload
        state_not: unavailable
    card:
      type: custom:stack-in-card
      mode: horizontal
      cards:
        - type: custom:mushroom-template-card
          icon: mdi:sd
          icon_color: red
          layout: vertical
          tap_action:
            action: more-info
          hold_action:
            action: none
          double_tap_action:
            action: none
          primary: C Drive
          secondary: '{{ state_attr((entity), ''UsedSpacePercentage'') }} %'
          multiline_secondary: false
          entity: sensor.winterfell_storage_c
          card_mod:
            style:
              mushroom-shape-icon$: |
                .shape {
                    background: radial-gradient(var(--card-background-color) 60%, transparent calc(60% + 1px)), conic-gradient(rgb(var(--rgb-{{ config.icon_color }})) {{ (state_attr(config.entity, 'UsedSpacePercentage')) }}% 0%, var(--card-background-color) 0% 100%);
                  }
                .shape:after {
                  content: "";
                  height: 100%;
                  width: 100%;
                  position: absolute;
                  border-radius: var(--icon-border-radius);
                  background: rgba(var(--rgb-{{ config.icon_color }}), 0.2);
                }
              .: |
                ha-card {
                  --ha-card-border-width: 0;
                }
        - type: custom:mushroom-template-card
          icon: mdi:harddisk
          icon_color: teal
          layout: vertical
          tap_action:
            action: more-info
          hold_action:
            action: none
          double_tap_action:
            action: none
          primary: D Drive
          secondary: '{{ state_attr((entity), ''UsedSpacePercentage'') }} %'
          multiline_secondary: false
          entity: sensor.winterfell_storage_d
          card_mod:
            style:
              mushroom-shape-icon$: |
                .shape {
                  background: radial-gradient(var(--card-background-color) 60%, transparent calc(60% + 1px)), conic-gradient(rgb(var(--rgb-{{ config.icon_color }})) {{ (state_attr(config.entity, 'UsedSpacePercentage')) }}% 0%, var(--card-background-color) 0% 100%);
                }
                .shape:after {
                  content: "";
                  height: 100%;
                  width: 100%;
                  position: absolute;
                  border-radius: var(--icon-border-radius);
                  background: rgba(var(--rgb-{{ config.icon_color }}), 0.2);
                }
              .: |
                ha-card {
                  --ha-card-border-width: 0;
                }
        - type: custom:mushroom-template-card
          icon: mdi:harddisk
          icon_color: orange
          layout: vertical
          tap_action:
            action: more-info
          hold_action:
            action: none
          double_tap_action:
            action: none
          primary: E Drive
          secondary: '{{ state_attr((entity), ''UsedSpacePercentage'') }} %'
          multiline_secondary: false
          entity: sensor.winterfell_storage_e
          card_mod:
            style:
              mushroom-shape-icon$: |
                .shape {
                  background: radial-gradient(var(--card-background-color) 60%, transparent calc(60% + 1px)), conic-gradient(rgb(var(--rgb-{{ config.icon_color }})) {{ (state_attr(config.entity, 'UsedSpacePercentage')) }}% 0%, var(--card-background-color) 0% 100%);
                }
                .shape:after {
                  content: "";
                  height: 100%;
                  width: 100%;
                  position: absolute;
                  border-radius: var(--icon-border-radius);
                  background: rgba(var(--rgb-{{ config.icon_color }}), 0.2);
                }
              .: |
                ha-card {
                  --ha-card-border-width: 0;
                }

Font: SF Pro
Theme: Noctis

Just put the --icon-animation command in a condition:

card_mod:
  style:
    mushroom-shape-icon$: |
      ha-icon {
        {{ '--icon-animation: charge 3s steps(1) infinite;' if is_state(config.entity, 'charging') }}
      }
      @keyframes charge {
        0% { clip-path: polygon(0% 0%, 0% 100%, 34% 100%, 34% 24%, 67% 24%, 67% 84%, 34% 84%, 34% 100%, 100% 100%, 100% 0%); }
        20% { clip-path: polygon(0% 0%, 0% 100%, 34% 100%, 34% 24%, 67% 24%, 67% 64%, 34% 64%, 34% 100%, 100% 100%, 100% 0%); }
        40% { clip-path: polygon(0% 0%, 0% 100%, 34% 100%, 34% 24%, 67% 24%, 67% 44%, 34% 44%, 34% 100%, 100% 100%, 100% 0%); }
        60% { clip-path: polygon(0% 0%, 0% 100%, 34% 100%, 34% 24%, 67% 24%, 67% 24%, 34% 24%, 34% 100%, 100% 100%, 100% 0%); }
      }

Yes. All good

1 Like

What you are using for shutdown restart sleep and lock? HASS Agent?

not an oven although you could try the same idea as this Post where they’d taken an image of the washing machine and over laid the controls and info

Yep, HASS.Agent

Part 3 of my manual is also finished.

You can find 12 Useful automation ideas and how to text on this page :

So 1 manual is left before I finsh my Modern Dashboard.

2 Likes

:eagle: :arrow_lower_right: —→ cimbom :medal_sports:

1 Like

Hello @rhysb , I have a question how to fix these borders on the cards?

Thank you so much, you are the best!

1 Like

Can I somehow get Mushroom cards to use CSS attributes as icon color? I have a theme that changes drasticly depending on if its a dark och light theme

Thanks very much. Sorry, does this go into my card template or into config yaml?

1 Like

It can go in your Template Card/Chip or wherever else a template can be used.

type: custom:mushroom-template-card
primary: '{{ now().strftime("%A, %-d %B %Y") }}'
icon: mdi:clock
icon_color: blue

@rhysb Any idea why this is not working with a custom:button-card? The goal is to convert your motion sensor animation to a button card because i’m not using Mushroom.

type: custom:button-card
icon: mdi:motion-sensor
name: Motion test
styles:
  img_cell:
    - animation: motion 2s linear infinite
  icon:
    - color: var(--blue-color)
    - animation: clip 2s linear infinite
    - transform-origin: 50% 85%
    - height: 36px
    - width: 36px
    - padding: 8px
    - background-color: "rgba(var(--color-blue),0.2)"
    - border-radius: 50%
extra_styles: |
  @keyframes clip {
    50% { clip-path: polygon(0 0, 55% 0, 100% 100%, 0 100%); }
  }
  @keyframes motion {
    0%, 100% { --shape-color: rgba(var(--rgb-blue), 0.3); }
    50% { --shape-color: rgba(var(--rgb-blue), 0.2); }
  }

hello is there any way to reduce the transparency behind the icon ?

Sem título

Not sure how? I can’t replace the icon with the code. It just goes blank?

{% set state=states(entity) %}
{% if state =='readyForCharging' %}
mdi:ev-station
{% elif state =='charging' %}
mdi:battery-alert
{% elif state =='notReadyForCharging' %}
mdi:battery-alert
{% else %}
mdi:battery-high
{% endif %}