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

I wanted to put all this together in a single line (first is fan aromatherapy, second is light aromatherapy and third is water level)

image

I was wondering if there is a way to modify this:

image

To get something more beautiful, like this:

image

I am also looking for a card for the video camera and for the temperature/humidity sensors.

Thanks advanced!

Thanks !

i’ve adapt for this :

type: custom:auto-entities
card:
  type: grid
  columns: 1
  square: false
card_param: cards
filter:
  include:
    - domain: update
      state: 'on'
      options:
        type: custom:mushroom-entity-card
        multiline_secondary: true
        icon: mdi:store
        icon_color: orange
        fill_container: false
        tap_action:
          action: navigate
          navigation_path: ../config/dashboard
  exclude: []
show_empty: false
1 Like

I can help you with this, or there’s a couple of ways you can achieve this your self either with stack in card or margins and card_mod.

post your yaml for your original card and I’ll take a look

you can do this with the mushroom template chip and card mod I believe. I can take a look

Hi, thanks for your reply. Meanwhile I found out that I can add the label, but only in the top section for the badges. If I want to add a template chip card in another section, there is no label field. But if there is a way with card_mod, this will help me for beginning. :slight_smile:

I had a play but this is the closest I can get.
chips are limited to one line, so I cant move anything (if there is I don’t know how)

type: custom:mushroom-chips-card
chips:
  - type: template
    icon: mdi:home-account
    icon_color: blue
    content: ' {{states(''switch.bar_switch'')}}'
    card_mod:
      style: |
        ha-card {
          height: 55px !important;
          
          box-shadow: none;
          ha-card-border-width: 0px;
        }
        ha-card:after {
          content: "Switch";
          position: absolute ;
          top: 10%;
          right: 19%;
          font-weight: 700;
          font-size: 11px;
          color: black;
        }

or

type: custom:mushroom-chips-card
chips:
  - type: template
    icon: mdi:home-account
    icon_color: blue
    content: ' {{states(''switch.bar_switch'')}}'
    card_mod:
      style: |
        ha-card {
          height: 55px !important;
          
          box-shadow: none;
          ha-card-border-width: 0px;
        }
        ha-card:after {
          content: "Switch";
          position: absolute ;
          top: 10%;
          right: 19%;
          font-weight: 700;
          font-size: 11px;
          color: black;
        }
        ha-card:before {
          content: "Light";
          position: absolute ;
          top: 62%;
          right: 25%;
          font-weight: 700;
          font-size: 11px;
          color: black;
        }

1 Like

Cool, big thanks. I will try it tomorrow. I will also create a feature request on GitHub. Maybe the dev can add the label option also to the chips card which are not in the badge row.

Thank you :pray:t2:

1 Like

Hello,

Because of somfy rts blinds without open/close status I would like to use the event of the open or close button. Where can I find this information?

Hello,
I’ve just find my answer: Help needed on automation using event call service - #2 by 123

Thank you

I don’t have any working code, because I couldn’t find a way to do it :frowning:
It is a plug (switch) and two or more energy consumption sensors.

OK no problem. hopefully this can help you in the right direction.

type: custom:stack-in-card
cards:
  - type: horizontal-stack
    cards:
      - type: custom:mushroom-template-card
        card_mod:
          style: |
            ha-card {
              box-shadow: none;
              border: none;
            }
        primary: Air Fryer
        secondary: ''
        icon: mdi:power-socket-uk
        fill_container: true
      - type: custom:mushroom-template-card
        card_mod:
          style: |
            ha-card {
              box-shadow: none;
              border: none;
              margin-right: -50px;
            }
        primary: >-
          {{states('sensor.pond_pumps_daily_energy')}}kWh |
          {{states('sensor.pond_pumps_power')}}W
        secondary: ''
        icon: ''
        layout: vertical
        fill_container: true
        multiline_secondary: false

Hey guys quick question, is it possible to use template variables (like var(–color-card-blue) in the mushroom template chip? Here is the code that I’m trying but doesn’t work (it works when putting colors like blue, grey etc…) :

type: custom:mushroom-chips-card
chips:
  - type: template
    entity: switch.prise_television
    tap_action:
      action: toggle
    icon: |-
      {% if states(entity) == "on" %}
        mdi:television
      {% else %}
        mdi:television-off
      {% endif %}
    icon_color: |-
      {% if states(entity) == "unavailable" %}
        grey
      {% elif states(entity) == "on" %}
        var(--color-card-blue)
      {% endif %}
    hold_action:
      action: more-info

The result is that the color doesn’t work.

A solution would be to use card_mod but since the template works with templates, kinda strange to use card_mod in addition.

Thanks!

you can it’s like this

var(--green-color) 

Strange it doesn’t work on my side, it’s already on the code in the other post. Do I need to add something like {{ }}?

Btw here is how my color is made :

color-card-blue: rgba(0,191,255,0.2)

EDIT // So I tested putting the rgba directly and it didn’t work. However when adding the hex the color changes. So I tried putting the hex value in the theme variable but doesn’t change anything, even with a HA reboot and all. My guess is that mushroom can’t get variables when using the template.

oh is this in your theme?

Hi All!

I have a device/entity (Govee Lights) that I’d like to turn on, set initial brightness, and RGB settings upon a button push in my dashboard.

Easy thing is to just use an Entity Card, turn on the brightness and color controls and just manually select each time (that’s what I’m doing now). But I’d like it to default to specific settings on toggle. Is there an easy way to do this?

use a script - set all your settings in the script that you want to have happen on toggle. then activate the script on tap.

1 Like

Hi,

Yup. I saw this issue on GitHub however : [Bug]: rgba not working in template card · Issue #1500 · piitaya/lovelace-mushroom · GitHub

Talks about the template card but maybe the issue is here for the chip template as well.

Do you use these vars? What is your code?

It looks good, although there are some lines in the center and if you press the sensors on the right you don’t get more information, and it also doesn’t seem to have the same appearance as the general mushroom.

image

type: custom:stack-in-card
cards:
  - type: horizontal-stack
    cards:
      - type: custom:mushroom-template-card
        card_mod:
          style: |
            ha-card {
              box-shadow: none;
              border: none;
            }
        primary: Air Fryer
        secondary: null
        entity: switch.air_fryer_plug_relay
        icon: mdi:power-socket-eu
        fill_container: true
      - type: custom:mushroom-template-card
        card_mod:
          style: |
            ha-card {
              box-shadow: none;
              border: none;
              margin-right: -50px;
            }
        primary: >-
          {{states('sensor.air_fryer_plug_energy')}} kWh |
          {{states('sensor.air_fryer_plug_power')}} W
        secondary: ''
        icon: ''
        layout: vertical
        fill_container: true
        multiline_secondary: false

Another thing I could notice is that when you turn on the switch, it does not color as if it were on.

thanks for all :slight_smile:

it was just meant as a starting point for you, to customise the rest to your liking. but How’s this?

type: custom:stack-in-card
card_mod:
  style: |
    ha-card {
      box-shadow: none;
      border: none;
    }
cards:
  - type: horizontal-stack
    cards:
      - type: custom:mushroom-template-card
        entity: switch.4ch_relay_bridge_light
        card_mod:
          style: |
            ha-card {
              box-shadow: none;
              border: none;
            }
        primary: Air Fryer
        secondary: ''
        icon: mdi:power-socket-uk
        icon_color: |
          {% if states(entity) == "on" %}
            green
          {% else %}
            red
          {% endif %}
        fill_container: true
      - type: custom:mushroom-template-card
        entity: sensor.pond_pumps_power
        card_mod:
          style: |
            ha-card {
              box-shadow: none;
              border: none;
              margin-right: -60px;
            }
        secondary: >-
          {{states('sensor.pond_pumps_daily_energy')}}kWh |
          {{states('sensor.pond_pumps_power')}}W
        primary: ''
        icon: ''
        layout: vertical
        fill_container: true
        tap_action:
          action: more-info

1 Like