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

[sexelevatormusik]

That looks great! Could you please share the code? I’m still not that well versed in lovelace yet as most of my devices are controlled by automations or voice if necessary so I wouldn’t know how to recreate it.

[Banditt]

Here is the post on how to do the second light color on the WLED and has the example card code.

Controlling WLED Secondary Color

Since most of the effects of WLED involve a secondary color and I couldn’t seem to figure out through the WLED integration how to control I tried and make a way to do and it works. You can use the built in color picker. Example card using Mushroom: [image] Disclaimer: There is probably already a great way to do this, but I couldn’t find one by searching I am still learning Home Assistant so there is probably a way better way to code this than what I did. If you have any suggestions or edits…

To add in the chips for the effect, palette, speed and intensity:

Light Effect Chips

type: custom:mushroom-chips-card
chips:
  - type: conditional
    conditions:
      - entity: select.example_select_wled_effect
        state_not: unknown
    chip:
      type: entity
      entity: select.example_select_wled_effect
      icon: mdi:led-on
      content_info: state
      name: Effect
      icon_color: grey
      card_mod:
        style: |
          ha-card {
            top: 2px;   
            border: 0px;
            --text-color: rgb(var(--rgb-grey));
            background-color: rgba(var(--rgb-disabled),0.10) !important;
          }
      hold_action:
        action: call-service
        service: select.select_option
        data:
          option: Solid
        target:
          entity_id: select.example_select_wled_effect
  - type: conditional
    conditions:
      - entity: select.example_select_wled_effect
        state_not: unknown
      - entity: select.example_select_wled_effect
        state_not: Solid
      - entity: select.example_select_wled_effect
        state_not: Flow Stripe
      - entity: select.example_select_wled_effect
        state_not: Solid Glitter
      - entity: select.example_select_wled_effect
        state_not: Solid Pattern Tri
      - entity: select.example_select_wled_effect
        state_not: Stream 2
    chip:
      type: entity
      entity: select.wled_color_palette
      icon_color: grey
      card_mod: null
      style: |-
        ha-card {
            top: 2px;
            border: 0px;
            --text-color: rgb(var(--rgb-grey));
            background-color: rgba(var(--rgb-disabled),0.10) !important;
            }
      hold_action:
        action: call-service
        service: select.select_option
        data:
          option: Default
        target:
          entity_id: select.wled_color_palette
  - type: conditional
    conditions:
      - entity: select.example_select_wled_effect
        state_not: Solid
      - entity: light.wled
        state: 'on'
    chip:
      type: template
      entity: number.wled_intensity
      icon_color: grey
      card_mod: null
      style: |-
        ha-card {
            top: 2px;
            border: 0px;
            --text-color: rgb(var(--rgb-grey));
            background-color: rgba(var(--rgb-disabled),0.10) !important;
            }
      content: |
        {{ (states('number.wled_intensity') | int /255 *100) | round(0)  }}%
      icon: mdi:chart-line-variant
      double_tap_action:
        action: more-info
      tap_action:
        action: more-info
      hold_action:
        action: more-info
  - type: conditional
    conditions:
      - entity: select.example_select_wled_effect
        state_not: Solid
      - entity: light.wled
        state: 'on'
    chip:
      type: template
      entity: number.wled_speed
      icon_color: grey
      card_mod: null
      style: |-
        ha-card {
            top: 2px;
            border: 0px;
            --text-color: rgb(var(--rgb-grey));
            background-color: rgba(var(--rgb-disabled),0.10) !important;
            }
      content: |
        {{ (states('number.wled_speed') | int /255 *100) | round(0)  }}%
      icon: mdi:speedometer
      double_tap_action:
        action: more-info
      tap_action:
        action: more-info
      hold_action:
        action: more-info
alignment: start
card_mod:
  style: |
    ha-card {
      margin: 0px 8px 8px;
      --chip-height: 32px;
      --chip-padding: 12px;
      --chip-spacing: 12px;
    }

Here is the complete card:

Complete Card

type: custom:vertical-stack-in-card
cards:
  - type: custom:mushroom-light-card
    entity: light.wled
    show_brightness_control: true
    show_color_control: false
    use_light_color: true
    layout: horizontal
    name: WLED Strip
    show_color_temp_control: false
    fill_container: true
    primary_info: name
    collapsible_controls: true
    icon: mdi:led-strip-variant
  - type: custom:vertical-stack-in-card
    cards:
      - type: custom:mushroom-chips-card
        chips:
          - type: conditional
            conditions:
              - entity: select.example_select_wled_effect
                state_not: unknown
            chip:
              type: entity
              entity: select.example_select_wled_effect
              icon: mdi:led-on
              content_info: state
              name: Effect
              icon_color: grey
              card_mod:
                style: |
                  ha-card {
                    top: 2px;   
                    border: 0px;
                    --text-color: rgb(var(--rgb-grey));
                    background-color: rgba(var(--rgb-disabled),0.10) !important;
                  }
              hold_action:
                action: call-service
                service: select.select_option
                data:
                  option: Solid
                target:
                  entity_id: select.example_select_wled_effect
          - type: conditional
            conditions:
              - entity: select.example_select_wled_effect
                state_not: unknown
              - entity: select.example_select_wled_effect
                state_not: Solid
              - entity: select.example_select_wled_effect
                state_not: Flow Stripe
              - entity: select.example_select_wled_effect
                state_not: Solid Glitter
              - entity: select.example_select_wled_effect
                state_not: Solid Pattern Tri
              - entity: select.example_select_wled_effect
                state_not: Stream 2
            chip:
              type: entity
              entity: select.wled_color_palette
              icon_color: grey
              card_mod: null
              style: |-
                ha-card {
                    top: 2px;
                    border: 0px;
                    --text-color: rgb(var(--rgb-grey));
                    background-color: rgba(var(--rgb-disabled),0.10) !important;
                    }
              hold_action:
                action: call-service
                service: select.select_option
                data:
                  option: Default
                target:
                  entity_id: select.wled_color_palette
          - type: conditional
            conditions:
              - entity: select.example_select_wled_effect
                state_not: Solid
              - entity: light.wled
                state: 'on'
            chip:
              type: template
              entity: number.wled_intensity
              icon_color: grey
              card_mod: null
              style: |-
                ha-card {
                    top: 2px;
                    border: 0px;
                    --text-color: rgb(var(--rgb-grey));
                    background-color: rgba(var(--rgb-disabled),0.10) !important;
                    }
              content: >
                {{ (states('number.wled_intensity') | int /255 *100) | round(0) 
                }}%
              icon: mdi:chart-line-variant
              double_tap_action:
                action: more-info
              tap_action:
                action: more-info
              hold_action:
                action: more-info
          - type: conditional
            conditions:
              - entity: select.example_select_wled_effect
                state_not: Solid
              - entity: light.wled
                state: 'on'
            chip:
              type: template
              entity: number.wled_speed
              icon_color: grey
              card_mod: null
              style: |-
                ha-card {
                    top: 2px;
                    border: 0px;
                    --text-color: rgb(var(--rgb-grey));
                    background-color: rgba(var(--rgb-disabled),0.10) !important;
                    }
              content: |
                {{ (states('number.wled_speed') | int /255 *100) | round(0)  }}%
              icon: mdi:speedometer
              double_tap_action:
                action: more-info
              tap_action:
                action: more-info
              hold_action:
                action: more-info
        alignment: start
        card_mod:
          style: |
            ha-card {
              margin: 0px 8px 8px;
              --chip-height: 32px;
              --chip-padding: 12px;
              --chip-spacing: 12px;
            }
    card_mod:
      style: |
        ha-card {
          border: 0px;
        }
  - type: conditional
    conditions:
      - entity: light.wled
        state: 'on'
    card:
      square: false
      columns: 2
      type: grid
      cards:
        - type: custom:mushroom-light-card
          entity: light.wled
          show_color_control: true
          primary_info: none
          secondary_info: none
          icon_type: none
          card_mod:
            style: |
              ha-card {
                border: 0px;
                box-shadow: none;
              }
        - type: conditional
          conditions:
            - entity: select.example_select_wled_effect
              state_not: Solid
          card:
            type: custom:mushroom-light-card
            entity: light.testlight_colortwo
            primary_info: none
            secondary_info: none
            icon_type: none
            show_color_control: true
            card_mod:
              style: |
                ha-card {
                  border: 0px;
                  box-shadow: none;
                }

[sexelevatormusik]

Thank you! That’s great but I’m not controlling LED’s. Just ordinary hue lights for which I have templated scenes as effects so I won’t be needing anything more than the standard light color picker. I am just even more unfamiliar with lovelace than you so needed to see a functioning example to modify for my purpose. That said, if, in the highly unlikely circumstance that I find a way to improve upon your code I will gladly share but you probably shouldn’t hold your breath.

[0tto0o]

I think dodgerblue is not supported, but using HEX codes it works for me:

        {% if temp < -20 %} #000000
        {% elif temp < -15 %} #000080
        {% elif temp < -10 %} #00008B
        {% elif temp < -5 %} #0000CD
        {% elif temp < 0 %} #0000FF
        {% elif temp < 5 %} #1E90FF
        {% elif temp < 10 %} #ADD8E6
        {% elif temp < 15 %} #40E0D0
        {% elif temp < 20 %} #90EE90
        {% elif temp < 25 %} #006400
        {% elif temp < 30 %} #FFA500
        {% elif temp < 35 %} #DC143C
        {% else %} #B22222
        {% endif %}

[Mariusthvdb (Marius)]

a yes, thats clever

thing is, I always want to use the universal 140 html color names, to make my themes easily editable. Why have these universal supported names, and not support them… a pity really because it would make life so much easier on us tinkerers.

but, given that limitation, your solution fits the bill!

btw, as some extra inspiration for that left button, I’ve been using this for ages now, as in, far before the conception of Mushroom

type: custom:button-card
template:
  - styles_name
  - styles_cf_notification
show_entity_picture: true
size: 100%
aspect_ratio: 1/1
show_icon: false
entity: sensor.weather_animated_icon
tap_action:
  action: more-info
hold_action:
  action: navigate
  navigation_path: /ui-overzicht/weer
custom_fields:
  notification: >
    [[[ return Math.round(states['sensor.temp_current'].state); ]]]

styles:
  name:
    - color: var(--primary-color)
#  card:
#    - background-color: var(--card-background-color)
  custom_fields:
    notification:
      - background-color: >
          [[[ return states['sensor.temperature_color_name'].state; ]]]
      - color: ivory

[Mariusthvdb (Marius)]

found the solution:

Card-mod - Add css styles to any lovelace card

simple challenge, no easy fix? have a picture-entity card with a default camera stream from Buienradar integration. I want to have it squared, so I can fit it in a stack/grid or other config, next to a 1/1 custom:button-card. There is no property I can find to auto resize this picture-entity so it always covers the square it should. I can give it a larger canvas, but then it doesnt resize properly, and ofc, therein lies the challenge. Have it show properly on desktop And mobile: - type: h…

- type: custom:stack-in-card
      mode: horizontal
      cards:
        - !include /config/dashboard/includes/button/include_button_animated_weather.yaml
        - type: picture-entity
          card_mod:
            style:
              hui-image:
                $: |
                  #image {
                    aspect-ratio: 1/1;
                  }
          entity: camera.buienradar
          show_state: false
          show_name: false
          camera_view: auto

as main body structure.

or use core cards, with a little card_mod tweaking:

    - type: custom:mod-card
      card_mod:
        style: |
          ha-card {
            --grid-card-gap: 0px;
            --ha-card-box-shadow: none;
          }
      card:
#         type: horizontal-stack
        type: grid
        columns: 2
        cards:
          - !include /config/dashboard/includes/button/include_button_animated_weather.yaml
          - type: picture-entity
            card_mod:
              style:
                hui-image:
                  $: |
                    #image {
                      aspect-ratio: 1/1;
                    }
            entity: camera.buienradar
            show_state: false
            show_name: false
            # camera_view: auto

you can also use the horizontal-stack, and then use

card_mod:
  style: |
    :host {
      --stack-card-margin: 0px;
    }

the gap mods are essentially what custom stack-in-card does.

both cards now have aspect_ratio: 1/1, so perfect fit assured. (or plain aspect_ratio: 1 of course

[johntdyer (John Dyer)]

Has anyone been able to make use of the keypad features along w/ the restriction card? Basically I want a touch screen pin pad, just like the alarm mushroom card, to restrict a card action from my children…

[AwesomeGuyNamedMatt (Matt)]

Is there a card that allows you to have a slider control an input_number entity? I tried using the light card with the dimmer settings, but it would not take that entity type. I found the my-slider card mentioned in this thread, but that card seems to be dead now.

[reesion (Reesion Tee)]

@Fabian_V

popup window

Hey,

I copied your code but i couldn’t get the popup window working. Any idea why?

[pppaulie_s (Paul)]

Hello geniuses!!

I can’t really find a way of adding a stop-watch so that when an entity has been turned on, I can see how long it has been in that state and have it displayed “live” in a Mushroom card, Secondary information area. For example:

Is there a way to perhaps use a template and the last changed status?
Or history_stats?

For example, I can get the time of last_changed. could this be used “somehow” and subtracted from current time which in theory would show “time running”?

Scratching my head…

[StefanHabel]

Is there a way to add additional information to the title card? Like the average temperature in that floor e.g.?

[StefanHabel]

And is there a way to change the default action for all cards?

[MRobi (Mike)]

You can use
secondary_info: last-updated

It will round to the nearest minute/hour/day though so may not be as accurate as you’re looking for.

[ettom]

Could you share the code?

[finalbillybong]

Looks great. I love the yaml for this if possible?

[HA_n00b]

Is there any way to create “entities card”? As you can see below, I created 4 entity cards.
But, I want to get rid the space in between. Something like multiple entities in 1 card.
I tried by adding all into 1 yaml code, but that didn’t work.

[stefdewilde]

Is it possible to add more buttons to the cover card? I use shutters. I would like to add a half open button and a button that the shutter are on 90% procent.

[RonM (Ron Meijsen)]

Hi,

I created my own cards, it looks like this:

where you can create your own buttons, is this what you are looking for?

type: vertical-stack
cards:

• type: custom:mushroom-template-card
  primary: |-
  {% if states(‘cover.rolluik_kamer’) == “closed” %}
  Rolluik kamer dicht
  {% else %}
  Rolluik kamer open
  {% endif %}
  secondary: ‘’
  icon: |-
  {% if states(‘cover.rolluik_kamer’) == “closed” %}
  mdi:window-shutter
  {% else %}
  mdi:window-shutter-open
  {% endif %}
  entity: Rolluik kamer
  icon_color: blue
  fill_container: false
  tap_action:
  action: none
  hold_action:
  action: more-info
  double_tap_action:
  action: none
  multiline_secondary: true
  layout: vertical
• type: horizontal-stack
  cards:
  • type: custom:button-card
    icon: mdi:arrow-down-drop-circle
    entity: cover.rolluik_kamer
    name: Rolluik kamer down
    show_state: false
    show_name: false
    layout: vertical
    styles:
    card:
    - height: 60px
    icon:
    - color: grey
    tap_action:
    action: call-service
    service: cover.close_cover
    service_data:
    entity_id: cover.rolluik_kamer
  • type: custom:button-card
    icon: mdi:pause-circle
    entity: cover.rolluik_kamer
    name: Rolluik kamer still
    show_state: false
    show_name: false
    layout: vertical
    styles:
    card:
    - height: 60px
    icon:
    - color: grey
    tap_action:
    action: call-service
    service: cover.stop_cover
    service_data:
    entity_id: cover.rolluik_kamer
  • type: custom:button-card
    icon: mdi:arrow-up-drop-circle
    entity: cover.cover.zonnescherm
    name: Rolluik kamer up
    show_state: false
    show_name: false
    layout: vertical
    styles:
    card:
    - height: 60px
    icon:
    - color: grey
    tap_action:
    entity: cover.rolluik_kamer
    action: call-service
    service: cover.open_cover
    service_data:
    entity_id: cover.rolluik_kamer

[berkans (Berkan Sezer)]

Room Cards for Home Assistant

• automatically resizeable, swipeable cards
• Light, volume and scene control
• Room cards that display album cover when spotify plays
• Device controls directly from the cards
• Shows room picture when lights are on.
• When the room temperature drops below a certain degree, it displays an animation on the card.
• Remote controls for devices within the card
• Cards are minimalistic. You can switch between multiple layouts with an help of a button.
• To listen to music, it is enough to hover over the room cards and press twice, in this way, the music starts in the room you want to listen to.
• All motion movements, devices updates, applications running on your android tv, sensor status, light and volume control exists in these cards
• With a press to the Spotify button, the music will start playing on the last motion detected room.
• Full climate control avaliable within one single card.

All gifs and icons used in the code are added to the page.

Room Cards for Home Assistant

Code Explanation:

If you are a beginner in coding, don’t worry. You can find all the explanations of the codes I used in the below link. All the details such as what and where to put are in the description section. Every line of code is explained for you to customize your own example. After reading this guide, you can create your own page much more easily.

Room Cards 2X Manual

[aleksander.lyse]

Since this is almost 5500 posts, this might have been asked before; have anyone replicated the popups from minimalist on light and thermostat? I think those designs look great, but if anyone have made them it would be great if it could be shared!