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

Excellent! Thank you for your clear explanation and details. Got it perfectly implemented in my dash! +1

!

1 Like

I have to look into my heritage, I would finally have a reason to discuss to take Homey opensource :joy:

(Answer is no)

1 Like

is there a way to enter edit mode on mobil, while the header is hiden?

If u are using kiosk_mode, u can concat to URL

?disable_km

to show the header and enter to edit mode.

You can also use an input Boolean to disable/enable the header.

I can‘t get it work……

Header stays always on.

This doesn’t go in your config.yaml but instead put it into your dashboard config

Edit dashboard and top right three dots there is an option to view raw configuration

Add that code at the top

My code is this to use with a switch to turn it on or off


kiosk_mode:
  entity_settings:
    - entity:
        input_boolean.hide_sidebar: 'on'
      hide_sidebar: true
      hide_header: true

And I have this on another dashboard to only apply to one user.


kiosk_mode:
  user_settings:
    - users:
        - Fridge
      hide_sidebar: true
      ignore_entity_settings: true

2 Likes

May I ask which HA version fondling have?
I’m on 2022.7.
I paste your code into the raw- but It it does not hide the header ?!

Ok , cool it works now…. But it was the wrong version in rescources :see_no_evil: thx a a lot for helping me !!!

could you please share your code?

I have a lot of space before and after my title cats. How can I reduce that?

1 Like

write down your code

I deleted that one and now use this card.


3 Likes

Is actually pretty straight forward

- title: Wohnzimmer
    path: wohnzimmer
    icon: hue:room-living
    badges: []
    cards:
      - type: custom:mushroom-chips-card
        chips:
          - type: back
      - type: custom:mushroom-title-card
        title: Wohnzimmer
      - type: custom:stack-in-card
        cards:
          - type: grid
            square: false
            columns: 2
            cards:
              - type: custom:mushroom-entity-card
                entity: sensor.wohnzimmer_temp_bwth
                primary_info: state
                secondary_info: name
                name: Temperatur
                icon_color: green
              - type: custom:mushroom-entity-card
                entity: sensor.wohnzimmer_humidity_bwth
                primary_info: state
                secondary_info: name
                name: Luftfeuchtigkeit
                icon_color: blue
          - type: custom:mini-graph-card
            entities:
              - entity: sensor.wohnzimmer_temp_bwth
                name: Temperatur
                color: '#00bb33'
              - entity: sensor.wohnzimmer_humidity_bwth
                name: Luftfeuchtigkeit
                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
      - type: custom:mushroom-title-card
        title: ''
        subtitle: Light
        alignment: start
      - type: horizontal-stack
        cards:
          - type: custom:mushroom-light-card
            entity: light.wohnzimmer
            fill_container: false
            primary_info: name
            name: Alle Lichter
            use_light_color: true
            show_brightness_control: true
            show_color_temp_control: true
            show_color_control: true
            collapsible_controls: true

How did you render those concentric rings?

https://community.home-assistant.io/t/mushroom-cards-build-a-beautiful-dashboard-easily/388590/1763

1 Like

inspired by few posts, i’ve finally finished my network / raspberry dashboard for mobile !

some small things to correct though

PS speedtest was not available therefore half of the graph is empty

8 Likes

Thank you all for your help!! This is an amazing card and I’m glad I’m switching over… here’s my latest ‘creation’ using the Mushroom card!

I have a weather station coupled with DarkSky and a couple custom sensors.

I’ve always just loved weather related stuff… Here’s an example of something I wrote for something else…mouseover on the Forecast to get the weather for that day…

1

I’m hoping at some point to learn to write for HA… I like my custom I build stuff :slight_smile:

7 Likes

Can you post the code pls? :slight_smile:

type: custom:stack-in-card
keep:
  margin: false
  box_shadow: false
  background: false
cards:
  - type: custom:layout-card
    layout_type: masonry
    layout: {}
    cards:
      - type: grid
        square: false
        columns: 2
        style: ''
        cards:
          - type: custom:mushroom-template-card
            primary: Bedoom
            secondary: 'TV: {{ states(''media_player.lg_bedroom_tv'')| string | upper }}'
            icon: mdi:bed-double
            entity: light.bedroom_light_s
            icon_color: |-
              {% if is_state('light.bedroom_light_s', 'on') %}
                orange
              {% endif %}
            fill_container: false
            multiline_secondary: true
            tap_action:
              action: navigate
              navigation_path: bedroom
            hold_action:
              action: toggle
            double_tap_action:
              action: none
            card_mod:
              style: |
                ha-card { 
                  background: var(--card-background-color);
                  width: 150px;
                  border-radius: 30px;
                  margin-left: auto;
                  margin-right: auto;
                  margin-bottom: 2px;
                }
          - type: custom:layout-card
            layout_type: custom:vertical-layout
            layout:
              width: 20
              max_width: 20
              max_cols: 1
              height: 30
            cards:
              - type: custom:mushroom-chips-card
                style: |
                  ha-card {
                    --chip-box-shadow: none;
                    --chip-background: none;
                    --chip-spacing: 0px;
                    --chip-padding: 0 0.2em;
                  }
                chips:
                  - type: template
                    icon_color: light-blue
                    icon: mdi:door-open
                    tap_action: none
                    entity: binary_sensor.dressing_door_sensor
                    style: |
                      ha-card {
                        animation: blink 2s linear infinite;
                      }
                      @keyframes blink {
                        50% {opacity: 0;}
                      }
                  - type: conditional
                    conditions:
                      - entity: fan.bedroom_fan
                        state: 'on'
                  - type: template
                    icon_color: green
                    icon: mdi:fan
                    card_mod: null
                    style: |
                      @keyframes rotation {
                        0% {
                          transform: rotate(0deg);
                        }
                        100% {
                          transform: rotate(360deg);
                        }
                      }
                      ha-card {
                        {% if is_state('fan.bedroom_fan', 'on') %}
                           animation: rotation 0.5s linear infinite;
                          {% endif %}
                          }
                  - type: conditional
                    conditions:
                      - entity: binary_sensor.bedroom_motion_sensor
                        state: 'on'
                  - type: template
                    icon_color: orange
                    icon: mdi:motion-sensor
                    card_mod: null
                    style: |
                      ha-card {
                        animation: blink 1s linear infinite;
                      }
                      @keyframes blink {
                         50% {opacity: 0;}
                      }  
                  - type: conditional
                    conditions:
                      - entity: light.bedroom_light_s
                        state: 'on'
                    chip:
                      type: template
                      icon_color: orange
                      icon: mdi:lightbulb-group
                      tap_action: none
                      entity: light.bedroom_light_s
      - type: custom:mushroom-chips-card
        alignment: left
        style: |
          ha-card {
            --chip-box-shadow: none;
            --chip-background: none;
            --chip-spacing: 0px;
            --chip-padding: 0 0.15em
          }
        chips:
          - type: template
            content: '{{states(entity)}} °C'
            entity: sensor.sonoff_1000aebc88_temperature
            icon: mdi:thermometer
            tap_action:
              action: more-info
            icon_color: |-
              {% set state=states(entity) %}
              {% if state >= '19' %}
              red
              {% elif state < '19'%}
              blue
              {% else %}
              grey
              {% endif %}
          - type: template
            double_tap_action:
              action: none
            content: >-
              {{ states(entity) }}{{ state_attr(entity, "unit_of_measurement")
              }} 
            entity: sensor.sonoff_1000aebc88_humidity
            icon: mdi:water
            icon_color: blue
            tap_action:
              action: none
            hold_action:
              action: none
          - type: template
            double_tap_action:
              action: none
            content: >-
              {{ states(entity) }} {{ state_attr(entity, "unit_of_measurement")
              }}
            entity: sensor.average_indoor_pressure_downstairs
            icon: mdi:gauge
            icon_color: grey
            tap_action:
              action: none
            hold_action:
              action: none
card_mod:
  style: |
    ha-card {
      padding: 2px;
      background: rgba(200,200,200,0.02);
    }

can any one help to adjust the margin

1 Like