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

just add height to your stack card. then play with the amount of px :slight_smile:

card_mod:
  style: |
    ha-card {
      {% if is_state('lock.serratura_ingresso','unlocked') %}
          background: rgba(101,170,91,0.2);
      {% else %}
          background: rgba(226,84,66,0.2);
      {% endif %}
      height: 80px;
    }

sorry it did not work for me… the solution was:

    card_mod:
      style: |
        ha-card {
          border: none;
          margin-bottom: -6px;
        }

and

    card_mod:
      style: |
        ha-card {
          border: none;
          margin-top: -6px;
        }

Oh.

i think you didnt put it under the stack card then. you tried to put it under each of the mushroom cards themselves instead?

but if it works it works :slight_smile:

What a great Job :slight_smile: It is, beautiful. I copied your code and adopt it with my entities. But the stacking for the progress and temperature did not work. Which is the corresponding code part for the stacking?
My result looks like the following:

Following my code block:

type: custom:stack-in-card
cards:
  - type: custom:layout-card
    layout_type: custom:grid-layout
    layout:
      grid-template-columns: auto 33px
      margin: '-4px -4px -8px -4px'
    cards:
      - type: custom:mushroom-template-card
        primary: 3D Printer
        entity: switch.3d_printer
        secondary: '{{ states(entity) | title }}'
        icon: mdi:printer-3d
        icon_color: '{{ ''light-blue'' if is_state(entity, ''on'') else ''disabled'' }}'
        tap_action:
          action: toggle
        hold_action:
          action: none
        card_mod:
          style: |
            ha-card {
              background: none;
              --ha-card-box-shadow: 0px;
            }
      - type: custom:mushroom-template-card
        entity: input_boolean.3d_printer_dropdown
        primary: ''
        secondary: ''
        icon: >-
          {{ 'mdi:chevron-down' if is_state(entity, 'off') else 'mdi:chevron-up'
          }}
        icon_color: disabled
        hold_action:
          action: none
        card_mod:
          style: |
            ha-card {
              align-items: flex-end;
              background: none;
              --ha-card-box-shadow: 0px;
            }
            mushroom-shape-icon {
              --shape-color: none !important;
            }  
  - type: conditional
    conditions:
      - entity: input_boolean.3d_printer_dropdown
        state: 'on'
    card:
      type: custom:stack-in-card
      cards:
        - type: custom:layout-card
          cards:
            - type: picture-entity
              show_state: false
              show_name: false
              camera_view: auto
              entity: camera.prusa_mini
        - type: custom:stack-in-card
          mode: horizontal
          keep:
            background: true
            border_radius: true
            margin: true
          cards:
            - type: custom:mushroom-template-card
              entity: button.ca2fb5dd_prusa_mini_pause
              icon: mdi:pause
              icon_color: orange
              layout: vertical
              tap_action:
                action: toggle
              card_mod:
                style: |
                  ha-card { 
                    background: rgba(var(--rgb-orange), 0.1);
                    width: 66px;
                    border-radius: 50%;
                    margin-left: auto;
                    margin-right: auto;
                  }
            - type: custom:mushroom-template-card
              entity: button.ca2fb5dd_prusa_mini_continue
              icon: mdi:play
              icon_color: green
              layout: vertical
              tap_action:
                action: toggle
              card_mod:
                style: |
                  ha-card { 
                    background: rgba(var(--rgb-green), 0.1);
                    width: 66px;
                    border-radius: 50%;
                    margin-left: auto;
                    margin-right: auto;
                  }
            - type: custom:mushroom-template-card
              entity: button.ca2fb5dd_prusa_mini_stop
              icon: mdi:stop
              icon_color: red
              layout: vertical
              tap_action:
                action: toggle
              card_mod:
                style: |
                  ha-card { 
                    background: rgba(var(--rgb-red), 0.1);
                    width: 66px;
                    border-radius: 50%;
                    margin-left: auto;
                    margin-right: auto;
                  }
          card_mod:
            style: |
              ha-card {
                #background: none;
                --ha-card-box-shadow: 0px;
              }
        - type: custom:layout-card
          layout_type: custom:grid-layout
          layout:
            grid-template-columns: 197px auto
            margin: '-4px -4px -8px -4px'
          cards:
            - type: custom:stack-in-card
              cards:
                - type: custom:mushroom-entity-card
                  entity: binary_sensor.ca2fb5dd_prusa_mini_printing
                  icon_color: green
                  tap_action:
                    action: url
                    url_path: >-
                      https://3dprint.int.schlaschmi.ch/#!/printer/Prusa_mini/print
                  icon: mdi:printer-3d
                  card_mod:
                    style: |
                      ha-card {
                        --badge-size: 0px !important;
                      }
                  primary_info: name
                  secondary_info: state
                  name: Printer Status
                - type: custom:mushroom-entity-card
                  entity: sensor.ca2fb5dd_prusa_mini_eta
                  icon_color: light-blue
                  tap_action:
                    action: none
                  primary_info: name
                  secondary_info: state
                  name: Est. Finish Time
                - type: custom:mushroom-template-card
                  entity: sensor.3d_printer_power
                  icon_color: '{{ ''amber'' if states(entity) | int > 0 else ''disabled'' }}'
                  tap_action:
                    action: none
                  primary: Power Use
                  secondary: '{{ states(entity) }} W'
                  icon: mdi:flash
              card_mod:
                style: |
                  ha-card {
                    margin-top: 6px;
                    background: none;
                    --ha-card-box-shadow: 0px;
                  }
            - type: custom:stack-in-card
              cards:
                - type: custom:apexcharts-card
                  header:
                    show: false
                  series:
                    - entity: sensor.ca2fb5dd_prusa_mini_progress
                      name: Job Progress
                      color: rgb(3, 169, 244)
                      show:
                        legend_value: false
                  chart_type: radialBar
                  apex_config:
                    legend:
                      show: false
                    chart:
                      height: 230px
                    plotOptions:
                      radialBar:
                        hollow:
                          size: 80%
                        dataLabels:
                          name:
                            show: false
                          value:
                            show: false
                        track:
                          strokeWidth: 80%
                          margin: 0
                    fill:
                      type: gradient
                      gradient:
                        shade: light
                        type: horizontal
                        shadeIntensity: 0.3
                        inverseColors: false
                        opacityFrom: 1
                        opacityTo: 1
                        stops:
                          - 0
                          - 50
                          - 55
                          - 90
                - type: custom:mushroom-entity-card
                  entity: sensor.ca2fb5dd_prusa_mini_progress
                  primary_info: state
                  secondary_info: name
                  name: Job Progress
                  icon_color: light-blue
                  layout: vertical
                  card_mod:
                    style: |
                      ha-card {
                        margin-top: -165px;
                        width: 140px;
                        margin-left: auto;
                        margin-right: auto;
                      }
              card_mod:
                style: |
                  ha-card {
                    background: none;
                    --ha-card-box-shadow: 0px;
                  }
        - type: custom:stack-in-card
          cards:
            - type: grid
              square: false
              columns: 2
              cards:
                - type: custom:stack-in-card
                  cards:
                    - type: custom:apexcharts-card
                      chart_type: radialBar
                      series:
                        - entity: sensor.ca2fb5dd_prusa_mini_bed_temp_1
                          color: rgb(103, 58, 183)
                          max: 110
                          show:
                            legend_value: false
                        - entity: sensor.ca2fb5dd_prusa_mini_bed_temp_set_1
                          color: rgb(103, 58, 183)
                          max: 110
                          show:
                            legend_value: false
                      apex_config:
                        plotOptions:
                          radialBar:
                            offsetY: -15
                            startAngle: -105
                            endAngle: 105
                            hollow:
                              size: 60%
                            dataLabels:
                              name:
                                show: false
                              value:
                                show: false
                        legend:
                          show: false
                        chart:
                          height: 220px
                        fill:
                          type: gradient
                          gradient:
                            shade: light
                            type: horizontal
                            shadeIntensity: 0.3
                            inverseColors: false
                            opacityFrom: 1
                            opacityTo: 1
                            stops:
                              - 0
                              - 50
                              - 55
                              - 90
                    - type: custom:mushroom-template-card
                      primary: Bed Temp
                      secondary: >-
                        {{ states(entity) | round(1) }} °C / {{
                        states('sensor.ca2fb5dd_prusa_mini_bed_temp_set_1') |
                        round (1) }} °C
                      icon: mdi:thermometer-lines
                      entity: sensor.ca2fb5dd_prusa_mini_bed_temp_1
                      icon_color: deep-purple
                      layout: vertical
                      card_mod:
                        style: |
                          ha-card {
                            margin-top: -80px;
                            width: 175px;
                            margin-left: auto;
                            margin-right: auto;
                          }
                - type: custom:stack-in-card
                  cards:
                    - type: custom:apexcharts-card
                      chart_type: radialBar
                      series:
                        - entity: sensor.ca2fb5dd_prusa_mini_ext_temp_1
                          color: rgb(233, 30, 99)
                          max: 240
                          show:
                            legend_value: false
                        - entity: sensor.ca2fb5dd_prusa_mini_ext_temp_set_1
                          color: rgb(233, 30, 99)
                          max: 240
                          show:
                            legend_value: false
                      apex_config:
                        plotOptions:
                          radialBar:
                            offsetY: -15
                            startAngle: -105
                            endAngle: 105
                            hollow:
                              size: 60%
                            dataLabels:
                              name:
                                show: false
                              value:
                                show: false
                        legend:
                          show: false
                        chart:
                          height: 220px
                          stack: true
                        fill:
                          type: gradient
                          gradient:
                            shade: light
                            type: horizontal
                            shadeIntensity: 0.3
                            inverseColors: false
                            opacityFrom: 1
                            opacityTo: 1
                            stops:
                              - 0
                              - 50
                              - 55
                              - 90
                    - type: custom:mushroom-template-card
                      primary: Tool Temp
                      secondary: >-
                        {{ states(entity) | round(1) }} °C / {{
                        states('sensor.ca2fb5dd_prusa_mini_ext_temp_set_1') |
                        round (1) }} °C
                      icon: mdi:printer-3d-nozzle
                      entity: sensor.ca2fb5dd_prusa_mini_ext_temp_1
                      icon_color: pink
                      layout: vertical
                      card_mod:
                        style: |
                          ha-card {
                            margin-top: -80px;
                            width: 175px;
                            margin-left: auto;
                            margin-right: auto;
                          }
          card_mod:
            style: |
              ha-card {
                background: none;
                --ha-card-box-shadow: 0px;
              }

Post your yaml code. We cant help you unless we know what your yaml structure looks like.

Look at point 11 of the below in particular on how to post your yaml :slight_smile:

https://community.home-assistant.io/t/how-to-help-us-help-you-or-how-to-ask-a-good-question/114371

Works great for me.

Do you have stack in card installed through hacs?

Of course i just replaced the entities in the card with random entities i had that matched the type. So ignore my car in the drive :wink:

3 Likes

Yes both installed. Stack In Card and Vertical Stack in Card

Hmm, one more to check. Do you have the layout card? Otherwise i honestly dont know what the issue would be.

Works just fine for me.

Hello everyone, is there a way to change text dimension and color in Title Cards?? I’m not able to find a way to do this…
Thank you

https://community.home-assistant.io/t/mushroom-cards-build-a-beautiful-dashboard-easily/388590/7352?u=dimitri.landerloos

Look in the text styling section :slight_smile:

*whistle If there would only be a thread with a good overview over things… :rofl: :rofl: Something like a tutorial or guide… :thinking:

See, I told you, you need to get that into a seperate thread, so people can find it. :wink: I have a bookmark for your posts, but others… :wink: :smiley:

Honestly, if I can help you with a new thread, let me know! :slight_smile:

1 Like

appreciate it. it is coming together! sitting in my drafts.

i am just working on Chips guide right now, once done with that the rest of the cards should be much easier as they are a lot more similar to each other and i have already done a full guide for one of those “simple” cards :slight_smile:

4 Likes

Now everithing works well. I didn‘t have installed the card-mod from HACS.
Thanks for the support

I love this card. Here’s my version with a dropdown button in the chips area. Icon color is set with a room status helper. Tapping in the main area triggers an automation to turn on the default lights or turn everything off.

Room is off
image

Default state with ceiling fan lights on
image

Dropdown chip expanded for full room controls
Ceiling fan lights and ceiling fan are on
Scenes/automations go above the entities
image

Code
type: custom:stack-in-card
mode: vertical
cards:
  - type: vertical-stack
    cards:
      - type: custom:mushroom-entity-card
        entity: input_boolean.family_room
        secondary_info: none
        tap_action:
          action: call-service
          service: automation.trigger
          target:
            entity_id: automation.family_room_automation_main
          data:
            skip_condition: true
        hold_action:
          action: none
        double_tap_action:
          action: none
        fill_container: true
        card_mod:
          style: |
            :host([dark-mode]) {
              background: rgba(var(--rgb-primary-background-color), 0.2);
            } 
            :host {
              background: rgba(var(--rgb-primary-text-color), 0.025);
              --mush-icon-size: 76px;
              height: 66px;
              margin-left: -18px !important;
            }
      - type: custom:mushroom-chips-card
        alignment: end
        card_mod:
          style: |
            ha-card {
              --chip-box-shadow: none;
              --chip-background: none;
              --chip-spacing: 0;
            }
        chips:
          - type: conditional
            conditions:
              - entity: automation.family_room_automation_main
                state: ''
          - type: entity
            icon: blank
            content_info: none
          - type: template
            double_tap_action:
              action: none
            entity: light.family_room_fan_lights
            icon: mdi:ceiling-fan-light
            icon_color: '{{ ''orange'' if is_state(entity, ''on'') else ''disabled'' }}'
            tap_action:
              action: none
            hold_action:
              action: none
          - type: template
            double_tap_action:
              action: none
            entity: fan.family_room_fan
            icon: mdi:ceiling-fan
            icon_color: '{{ ''green'' if is_state(entity, ''on'') else ''disabled'' }}'
            tap_action:
              action: none
            hold_action:
              action: none
          - type: template
            entity: light.family_room_chimney_lights
            icon: mdi:spotlight-beam
            icon_color: '{{ ''orange'' if is_state(entity, ''on'') else ''disabled'' }}'
            double_tap_action:
              action: none
            tap_action:
              action: none
            hold_action:
              action: none
          - type: template
            entity: input_boolean.mushroom_toggle_family_room
            icon: >-
              {{ 'mdi:chevron-up' if is_state(entity, 'on') else
              'mdi:chevron-down'
                        }}
            icon_color: disabled
  - type: conditional
    conditions:
      - entity: input_boolean.mushroom_toggle_family_room
        state: 'on'
    card:
      type: vertical-stack
      cards:
        - type: custom:layout-card
          layout_type: custom:horizontal-layout
          layout: {}
          cards:
            - type: custom:gap-card
              height: 2
            - type: custom:mushroom-chips-card
              alignment: center
              card_mod:
                style: |
                  ha-card {
                    --chip-height: 60px;
                  }
              chips:
                - type: entity
                  entity: automation.family_room_automation_main
                  content_info: none
                  tap_action:
                    action: call-service
                    service: automation.trigger
                    target:
                      entity_id: automation.family_room_automation_main
                    data:
                      skip_condition: true
                  hold_action:
                    action: none
                  double_tap_action:
                    action: none
                  icon_color: blue
            - type: custom:mushroom-light-card
              entity: light.family_room_fan_lights
              primary_info: none
              secondary_info: none
              layout: horizontal
              show_brightness_control: true
              fill_container: true
              collapsible_controls: false
            - type: custom:mushroom-fan-card
              entity: fan.family_room_fan
              fill_container: false
              show_percentage_control: true
              icon_animation: false
              layout: horizontal
              primary_info: none
              secondary_info: none
            - type: custom:mushroom-light-card
              entity: light.family_room_chimney_lights
              primary_info: none
              secondary_info: none
              layout: horizontal
              show_brightness_control: true
              fill_container: true
              collapsible_controls: false
              show_color_temp_control: true
              show_color_control: true

8 Likes

can you kindly post a whole code please for a room as this one isnt showing up like your image. thanks in advance

I’ve move to page anchors and decluttering so it’s all split up now.

Post your code and we can work out where the problem is.

Can you please help me with this, it’s the chips card that I’m having issues with.

With reference to @rhysb excellent person card, how would I change the colors?
image

This is the relevant code from the post above, as you can see, it’s blue, when I’ve defined it to be green


And this is the pertinent section

    /* Define Person State colors. Can be added to theme */
                         --state-person-home: var(--green-color);
                         --state-person-not-home: var(--red-color);
                         --state-person-zone: var(--blue-color);
                         --state-person-unknown: var(--grey-color);

Struggling to identify the new format for colors.

what result do you get out of ?

{{is_state('YOUR PERSON ID', ['home', 'not_home', 'unknown'])}}

when you put in the template editor?

Seems to work for me as my state is home.
image

Do animations work with Chip Cards in the newest update? I have a Template Card animation working but it won’t work as a Chip Card.

Yes.

look in the chip styling section :slight_smile: