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

[RodgerDodger]

Dude! Who knows what you want…

type: vertical-stack
cards:
  - type: custom:stack-in-card
    mode: horizontal
    cards:
      - type: custom:mushroom-template-card
        primary: Test Card
        secondary: Good Evening, {{user}}
        layout: horizontal
        tap_action: none
        entity: input_boolean.YOUR_TOGGLE_BOOLEAN
      - type: vertical-stack
        cards:
          - type: custom:mushroom-chips-card
            chips:
              - type: template
                card_mod: null
                style: |
                  ha-card {
                    --chip-box-shadow: 0px 0px;
                  }
            alignment: end
          - type: custom:mushroom-chips-card
            chips:
              - type: template
                card_mod: null
                style: |
                  ha-card {
                    --chip-box-shadow: 0px 0px;
                  }
                tap_action:
                  action: call-service
                  service: input_boolean.toggle
                  service_data: {}
                  target:
                    entity_id: input_boolean.YOUR_TOGGLE_BOOLEAN
                icon: >
                  {% if is_state('input_boolean.YOUR_TOGGLE_BOOLEAN', 'off')
                  %}
                    mdi:chevron-down
                  {% elif is_state('input_boolean.YOUR_TOGGLE_BOOLEAN',
                  'on') %}
                    mdi:chevron-up   
                  {% endif %}
            alignment: end
  - type: conditional
    conditions:
      - entity: input_boolean.YOUR_TOGGLE_BOOLEAN
        state: 'on'
    card:
      type: calendar
      entities:
        - calendar.ASANEXAMPLE

chip ‘on’

chip to ‘off’

The calendar card shows when the template chip is pushed. I’d advise to start in visual editor and use ‘horizontal stack’ before you change to ‘custom:stack-in-card’ so you could use everything in visual editor.

Edith says:
I overhauled the code and now even the icon changes from ‘down’ to ‘up’ with the chip is pressed.

[kallejoken]

hi, fancy card - is there the possibility to share your “garbage” cards code?

[RodgerDodger]

It’s already there and thank you

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

Thank you and yes. It’s the first card and as I mentioned I’ve a room specific view behind every room and person card. All uppercase words are based on my personal entities or gusto. kiosk_mode: mobile_settings: hide_header: true ignore_entity_settings: true custom_width: 812 views: - theme: Google Theme title: Home icon: mdi:home visible: - user: PERSON_1 - user: PERSON_! badges: [] cards: - type: custom:swipe-card cards: [] …

[Boostin4HP]

Works for me, put these lines in your template file.

mush-rgb-lime: 205, 220, 57
mush-rgb-state-entity: var(--mush-rgb-lime)

[pepe59]

I guess I misunderstood that it only works for mushroom cards. I tried to set the color on other tabs and the entity name and it doesn’t work.
Thank you

[weemaba999 (Bart Weemaels)]

Very nice work, really love it.

Unfortunately I have ONE Question I’m trying to display current water usage, with icon colors based on value

Please have a look at picture, code + outcome. It seems that when current usage = 0.0 (which is actual state currently), it doesn’t show the content
The colors don’t change either by using, while for example the power usage does work

Any ideas ?

Kr,

Bart

[pedolsky]

What is the output if you copy your code into Developer Tools?

[TaFfinSki (Michael)]

Ow man…Lime with black color…Nice!
The Mushrooms are growing (and glowing). it’s an unbelievable addition to Home Assissant

[Danny2100]

Is it possible if I have an input select with only 2 options (on and off) to use one of these cards to tap to turn on if off and tap to turn off if on rather than having to do a tap for on and a double tap for off for example? Would the card also be able to show the state of the input select so the user knows when they tap it will turn off/on rather than tapping but not knowing what it did.

[RodgerDodger]

Have a look at what I’ve posted above.

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

Dude! Who knows what you want… type: vertical-stack cards: - type: custom:stack-in-card mode: horizontal cards: - type: custom:mushroom-template-card primary: Test Card secondary: Good Evening, {{user}} layout: horizontal tap_action: none entity: input_boolean.YOUR_TOGGLE_BOOLEAN - type: vertical-stack cards: - type: custom:mushroom-chips-card chips: - type: template card_mo…

‘Toggle’ is the magic word.

Of course you can template the icon so it correspondents you’re needs and show the state of you input boolean.

But why would you use an input.select rather than a input.boolean as you only what to states?

[Danny2100]

I used input select as I didn’t like the default look of the input boolean for my use case.

I tried your code and the icon is not rendering.

type: custom:mushroom-chips-card
chips:
  - type: action
    tap_action:
      action: call-service
      service: input_boolean.toggle
      service_data: {}
      target:
        entity_id: input_boolean.left_dockpro_mode
    icon: >
        {% if is_state('input_boolean.left_dockpro_mode', 'off') %}
        mdi:chevron-down
        {% elif is_state('input_boolean.left_dockpro_mode','on') %}
        mdi:chevron-up   
        {% endif %}

[RodgerDodger]

Bad indentation in the mdi rows. Both should be indented by two spaces.

[Networx666]

Hey guys
is there a way to change the size of a single chip?
tried it like this

- type: custom:mushroom-chips-card
    chips:
      - type: action
        tap_action:
          action: navigate
          navigation_path: test
        icon: mdi:home
        icon_color: green
        mush-chip-height: 60px
        card_mod:
        style: |
          ha-card {
              mush-chip-height: 50px;
          }

But it doesnt work?
Appreciate your help
Thank you

[Danny2100]

Still doesn’t work.

type: custom:mushroom-chips-card
chips:
  - type: action
    tap_action:
      action: call-service
      service: input_boolean.toggle
      service_data: {}
      target:
        entity_id: input_boolean.left_dockpro_mode
    icon: >
      {% if is_state('input_boolean.left_dockpro_mode', 'off') %}
        mdi:chevron-down 
      {% elif is_state('input_bo olean.left_dockpro_mode','on') %}   
        mdi:chevron-up    
      {% endif %}

[RodgerDodger]

This time you have a space between the o’s in the elif-row.

Have you looked in the Developers Tools → Template section?

[Danny2100]

Alright I fixed that.

type: custom:mushroom-chips-card
chips:
  - type: action
    tap_action:
      action: call-service
      service: input_boolean.toggle
      service_data: {}
      target:
        entity_id: input_boolean.left_dockpro_mode
    icon: |
      {% if is_state('input_boolean.left_dockpro_mode','off') %}
        mdi:chevron-down 
      {% elif is_state('input_boolean.left_dockpro_mode','on') %}   
        mdi:chevron-up    
      {% endif %}

It evaluates properly in the template editor. When I get rid of the template and choose a specific icon it shows the icon, once I add a template it shows nothing.

Results:
mdi:chevron-up

[RodgerDodger]

You can’t use templates in chips with type: action. You need to use type: template.

type: custom:mushroom-chips-card
chips:
  - type: template
    icon: |-
      {% if is_state('input_boolean.left_dockpro_mode', 'off') %}
        mdi:chevron-down 
      {% elif is_state('input_boolean.left_dockpro_mode', 'on') %}   
        mdi:chevron-up    
      {% endif %}
    tap_action:
      action: call-service
      service: input_boolean.toggle
      service_data: {}
      target:
        entity_id: input_boolean.left_dockpro_mode

[Danny2100]

Works now thank you.

[piitaya (Paul)]

Try with --chip-height

[Networx666]

Worked! Thank you!