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

Is it possible to have this display as a card and not show just as text on the background?

add:

      - type: custom:stack-in-card
        card_mod:
          style: |
            ha-card {
              box-shadow: none;
            }

to your internal stack in card before the apex chart and mushroom template card.

Any context please? what code do you have? what card is this?

an image is not much to go by…

What code do you have right now?

type: custom:mushroom-title-card
title: 3D Printer
alignment: center
title_tap_action:
  action: url
  url_path: http://192.168.3.11:4408
subtitle: |
  {{ states('sensor.creality_current_print_state') | title }}

Edit: The desired look is the below. The below image is a different card though, I like mushroom-title-card as I can make the title have a clickable action. Is it possible to have it look similar to below?

Just stick it in a stack in card :slight_smile:

type: custom:stack-in-card
cards:
  - type: custom:mushroom-title-card
    title: 3D Printer
    alignment: center
    title_tap_action:
      action: url
      url_path: http://192.168.3.11:4408
    subtitle: |
      {{ states('sensor.creality_current_print_state') | title }}

That’s amazing! thanks so much!!

Thank you!

you could also use this card for 3D-printers:
ha-threedy-card

here is how it looks like:
image

and my code:

type: custom:vertical-stack-in-card
cards:
  - type: custom:threedy-card
    base_entity: sensor.octoprint
    use_mqtt: true
    camera_entity: camera.octoprint_camera
    monitored:
      - Status
      - FileName
      - ETA
      - Elapsed
      - Hotend
      - Bed
      - Remaining
    sensors:
      FileName:
        name: FileName
        entity: sensor.octoprint_print_file
    light_entity: switch.octoprint_led_switch
    printer_type: I3
    name: Neptune 3 Pro
    scale: 0.5
    round_time: false
    round_temperature: false
    temperature_unit: C
    power_entity: switch.shellyplug_s_7c87ceb4a957
    use_24hr: true
    always_show: false
    theme: Neumorphic
  - type: conditional
    condition: or
    conditions:
      - entity: sensor.octoprint_print_status
        state_not: Offline after error
      - entity: sensor.octoprint_print_status
        state_not: Operational
      - entity: sensor.octoprint_print_status
        state_not: unavailable
    card:
      type: horizontal-stack
      cards:
        - type: custom:mushroom-template-card
          primary: Pause
          secondary: null
          entity: switch.octoprint_pause_print
          icon: mdi:play-pause
          icon_color: null
          tap_action:
            action: toggle
          fill_container: true
          card_mod:
            style: |
              ha-card {
                width: fit-content;
                background: none;
                border: none !important;
                box-shadow: none !important;
              }
                :host {
                  --mush-icon-border-radius: 12px;
                  --mush-card-primary-font-size: 12px;
                  --mush-card-secondary-font-size: 11px;
                }
        - type: custom:mushroom-template-card
          primary: Stop
          secondary: null
          entity: button.octoprint_emergency_stop
          tap_action:
            action: button
          icon: mdi:stop
          icon_color: orange
          fill_container: true
          card_mod:
            style: |
              ha-card {
                width: fit-content;
                background: none;
                border: none !important;
                box-shadow: none !important;
              }
                :host {
                  --mush-icon-border-radius: 12px;
                  --mush-card-primary-font-size: 12px;
                  --mush-card-secondary-font-size: 11px;
                }
        - type: custom:mushroom-template-card
          primary: Cancel
          secondary: null
          entity: button.octoprint_cancel_print
          tap_action:
            action: button
          icon: mdi:cancel
          icon_color: orange
          name: Cancel
          fill_container: true
          card_mod:
            style: |
              ha-card {
                width: fit-content;
                background: none;
                border: none !important;
                box-shadow: none !important;
              }
                :host {
                  --mush-icon-border-radius: 12px;
                  --mush-card-primary-font-size: 12px;
                  --mush-card-secondary-font-size: 11px;
                }

1 Like

I’d love to see the code for this card. It looks very neat.

1 Like

Adec

Yes of course, i add and a chip card also for ‘More Info’ dialog window.

Any intervention to make the card better is welcome.

image

Code
type: custom:stack-in-card
mode: horizontal
cards:
  - type: custom:mushroom-template-card
    primary: Arch Lamp
    secondary: '{{states(''light.your_light'') |capitalize }}'
    icon: mdi:lamp
    entity: light.your_light'
    icon_color: '{{ state_attr(''light.your_light'', ''rgb_color'') }}'
    layout: vertical
    card_mod:
      style:
        mushroom-state-info$: |
          .container {
            align-items: start;
            padding-bottom: 10px;
          }
          .secondary {
              font-weight: 400 !important;
        mushroom-shape-icon$: |
          .shape {
            margin-right: 140px;
            margin-top: 20px;
            --shape-color: none !important;
            --icon-size: 30px;
          }
        .: |
          ha-card {
            height: 110px !important;
            width: 200px;
            --card-secondary-font-size: 13px;
          }
          ha-state-icon {
          --icon-symbol-size: 30px;
          }
  - type: vertical-stack
    cards:
      - type: conditional
        conditions:
          - entity: light.your_light
            state: 'on'
        card:
          type: custom:mushroom-template-card
          icon: none
          entity: light.your_light
          layout: vertical
          tap_action:
            action: none
          hold_action:
            action: none
          double_tap_action:
            action: none
          primary: ''
          multiline_secondary: false
          fill_container: false
          card_mod:
            style:
              mushroom-shape-icon$: |
                .shape {
                --icon-size: 35px; 
                  /* Radial progress bar */
                  background: radial-gradient(var(--card-background-color) 60%, 
                                              transparent calc(60% + 1px)), 
                              conic-gradient(var(--icon-color) {{ (state_attr(config.entity,'brightness') | int / 255 * 100)| round(0) }}% 0%, 
                                              var(--card-background-color) 0% 100%);
                  --icon-symbol-size: 21px; 
                  --shape-color: none !important;
                }
                .shape:after {

                  /* Add back icon shape */
                  content: "";
                  position: absolute;
                  border-radius: var(--icon-border-radius);
                  background: var(--shape-color);
                  content: "{{ (state_attr('light.your_light', 'brightness') | int / 255 * 100)| round(0) }}%";
                  font-weight: light;
                  font-size: 10px;
                }
              .: |
                ha-card {
                  /* Center card on row */
                  width: fit-content;
                  left: 40px;
                  top: 5px;
                  --ha-card-background: none;
                  --ha-card-box-shadow: none;
                  --ha-card-border-width: 0;
                  /* Make card non-responsive to select and pointer */
                  user-select: none;
                  pointer-events: none;
                }
      - type: conditional
        conditions:
          - entity: light.your_light
            state: 'on'
        card:
          type: custom:mushroom-chips-card
          chips:
            - type: entity
              entity: light.your_light
              double_tap_action:
                action: none
              tap_action:
                action: more-info
              hold_action:
                action: none
              icon: mdi:dots-vertical
              content_info: none
          card_mod:
            style: |
              ha-card {
                --chip-box-shadow: none;
                --chip-background: none;
                margin: 5px 0px 0px 50px;
                width: 44px;
                border-radius: 100px !important;
                --chip-border-width: 0px;
              }
card_mod:
  style: |
    ha-card {
      /* Center card on row */
      width: 200px;
    }

6 Likes

Very, very nice, I am also interested in your finished code, please post :pray:

Thanks for the reminder!

567e074f-024f-4b32-a844-e5683f429a3d

type: custom:stack-in-card
mode: vertical
keep:
  background: false
  box_shadow: false
  margin: false
  outer_padding: true
  border_radius: false
cards:
  - type: horizontal-stack
    cards:
      - type: custom:mushroom-template-card
        primary: Next Rubbish Collection
        secondary: '{{ states("input_select.next_rubbish_collection_type") }} this Friday'
        tap_action:
          action: none
        hold_action:
          action: none
        double_tap_action:
          action: none
        card_mod: null
        style: |
          ha-card {
            --card-primary-font-weight: 400;
            --card-secondary-font-weight: 400;!important;
            #margin-top: -5px;
            #margin-bottom: -5px;
          }
      - type: custom:mushroom-chips-card
        chips:
          - type: template
            content: ''
            tap_action:
              action: none
            hold_action:
              action: none
            double_tap_action:
              action: none
            icon: mdi:trash-can
            icon_color: >-
              {% if is_state('input_select.next_rubbish_collection_type',
              'Rubbish & Garden') %}
                red
              {% elif is_state('input_select.next_rubbish_collection_type',
              'Recycling & Glass') %}
                grey
              {% endif %}
            card_mod:
              style: |
                ha-card {
                  background: rgba(var(--rgb-{% if is_state('input_select.next_rubbish_collection_type', 'Rubbish & Garden') %}red{% elif is_state('input_select.next_rubbish_collection_type', 'Recycling & Glass') %}grey{% endif %}), 0.2) !important;
                  border: none;
                  box-shadow: none;
                  top:5px;
                }
                ha-card:after {
                  content: "{% if is_state('input_select.next_rubbish_collection_type', 'Rubbish & Garden') %}done{% elif is_state('input_select.next_rubbish_collection_type', 'Recycling & Glass') %}close{% endif %}";
                  position: absolute;
                  display: flex;
                  justify-content: center;
                  align-items: center;
                  background: rgb(var(--rgb-{% if is_state('input_select.next_rubbish_collection_type', 'Rubbish & Garden') %}red{% elif is_state('input_select.next_rubbish_collection_type', 'Recycling & Glass') %}grey{% endif %}));
                  color: var(--card-background-color);
                  font-weight: bolder;
                  border-radius: 50%;
                  top: -5px;
                  right: -5px;
                  width: 16px;
                  height: 16px;
                  font-size: 11px;
                  font-family: 'Material Icons';
                }
          - type: template
            content: ''
            tap_action:
              action: none
            hold_action:
              action: none
            double_tap_action:
              action: none
            icon: mdi:trash-can
            icon_color: >-
              {% if is_state('input_select.next_rubbish_collection_type',
              'Rubbish & Garden') %}
                green
              {% elif is_state('input_select.next_rubbish_collection_type',
              'Recycling & Glass') %}
                grey
              {% endif %}
            card_mod:
              style: |
                ha-card {
                  background: rgba(var(--rgb-{% if is_state('input_select.next_rubbish_collection_type', 'Rubbish & Garden') %}green{% elif is_state('input_select.next_rubbish_collection_type', 'Recycling & Glass') %}grey{% endif %}), 0.2) !important;
                  border: none;
                  box-shadow: none;
                  top:5px;
                }
                ha-card:after {
                  content: "{% if is_state('input_select.next_rubbish_collection_type', 'Rubbish & Garden') %}done{% elif is_state('input_select.next_rubbish_collection_type', 'Recycling & Glass') %}close{% endif %}";
                  position: absolute;
                  display: flex;
                  justify-content: center;
                  align-items: center;
                  background: rgb(var(--rgb-{% if is_state('input_select.next_rubbish_collection_type', 'Rubbish & Garden') %}green{% elif is_state('input_select.next_rubbish_collection_type', 'Recycling & Glass') %}grey{% endif %}));
                  color: var(--card-background-color);
                  font-weight: bolder;
                  border-radius: 50%;
                  top: -5px;
                  right: -5px;
                  width: 16px;
                  height: 16px;
                  font-size: 11px;
                  font-family: 'Material Icons';
                }
          - type: template
            content: ''
            tap_action:
              action: none
            hold_action:
              action: none
            double_tap_action:
              action: none
            icon: mdi:trash-can
            icon_color: >-
              {% if is_state('input_select.next_rubbish_collection_type',
              'Rubbish & Garden') %}
                grey
              {% elif is_state('input_select.next_rubbish_collection_type',
              'Recycling & Glass') %}
                yellow
              {% endif %}
            card_mod:
              style: |
                ha-card {
                  background: rgba(var(--rgb-{% if is_state('input_select.next_rubbish_collection_type', 'Rubbish & Garden') %}grey{% elif is_state('input_select.next_rubbish_collection_type', 'Recycling & Glass') %}yellow{% endif %}), 0.2) !important;
                  border: none;
                  box-shadow: none; 
                  top:5px;
                }
                ha-card:after {
                  content: "{% if is_state('input_select.next_rubbish_collection_type', 'Rubbish & Garden') %}close{% elif is_state('input_select.next_rubbish_collection_type', 'Recycling & Glass') %}done{% endif %}";
                  position: absolute;
                  display: flex;
                  justify-content: center;
                  align-items: center;
                  background: rgb(var(--rgb-{% if is_state('input_select.next_rubbish_collection_type', 'Rubbish & Garden') %}grey{% elif is_state('input_select.next_rubbish_collection_type', 'Recycling & Glass') %}yellow{% endif %}));
                  color: var(--card-background-color);
                  font-weight: bolder;
                  border-radius: 50%;
                  top: -5px;
                  right: -5px;
                  width: 16px;
                  height: 16px;
                  font-size: 11px;
                  font-family: 'Material Icons';
                }
          - type: template
            content: ''
            tap_action:
              action: none
            hold_action:
              action: none
            double_tap_action:
              action: none
            icon: mdi:bottle-wine
            icon_color: >-
              {% if is_state('input_select.next_rubbish_collection_type',
              'Rubbish & Garden') %}
                grey
              {% elif is_state('input_select.next_rubbish_collection_type',
              'Recycling & Glass') %}
                blue
              {% endif %}
            card_mod:
              style: |
                ha-card {
                  background: rgba(var(--rgb-{% if is_state('input_select.next_rubbish_collection_type', 'Rubbish & Garden') %}grey{% elif is_state('input_select.next_rubbish_collection_type', 'Recycling & Glass') %}blue{% endif %}), 0.2) !important;
                  border: none;
                  box-shadow: none;
                  top:5px;
                }
                ha-card:after {
                  content: "{% if is_state('input_select.next_rubbish_collection_type', 'Rubbish & Garden') %}close{% elif is_state('input_select.next_rubbish_collection_type', 'Recycling & Glass') %}done{% endif %}";
                  position: absolute;
                  display: flex;
                  justify-content: center;
                  align-items: center;
                  background: rgb(var(--rgb-{% if is_state('input_select.next_rubbish_collection_type', 'Rubbish & Garden') %}grey{% elif is_state('input_select.next_rubbish_collection_type', 'Recycling & Glass') %}blue{% endif %}));
                  color: var(--card-background-color);
                  font-weight: bolder;
                  border-radius: 50%;
                  top: -5px;
                  right: -5px;
                  width: 16px;
                  height: 16px;
                  font-size: 11px;
                  font-family: 'Material Icons';
                }
        alignment: end
        card_mod:
          style: |
            ha-card {
              top: 10px;
              right: 10px;
            }

12 Likes

thankyou, and will do. I’ll test this out later today. Can you explain the difference between the two methods, i have not seen the host function before?

Legend! Thanks @Greminn

3 Likes

Ha! @weppa I like your icon use… have updated mine as well:

1 Like

With the help of you and my son, I’ve been introduced to coding/yaml behind HA and I’ve now got a light counter and date displayed on my Mushroom card :smiley:

2 Likes

Very happy to hear it! if you need any help feel free to message me directly. and if you want, check out my guide on css modifications with card mod on Mushroom Cards here:

Thanks for this, this is handy! I’ll keep this card in mind.

Here is where I landed with the mushroom cards

2 Likes

hey can you share tis code or media card ?