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

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

Now the status (switch color) and the WATT history seem to work, although not the KWH history and the separator stripe in the center continues to appear.

Thank you very much, I have no idea about these cards hahaha I’m a complete noob here.

you can only have one click action on a card so you won’t be able to

you could set a double click for this?

what theme are you using ?

Hey there,
can someone help me here?

I did a template card with ha-card mod and so on.
in a normal dashboard, i get it, no problem.

Once i try to add it into the wallpanel, where some allready exists, I do only see the icon, but not the primary and secondary…
I tried everything, hopefully someone can help me…

    - type: custom:mushroom-template-card
      primary: Pooltemperatur
      secondary: '{{ states("sensor.pooltemperatur") }} °C'
      icon: mdi:hot-tub
      icon_color: blue
      card_mod:
        style:
          mushroom-state-info$: |
            .container {
             --card-primary-font-size: 30px !important;
             --card-primary-color: red;
             --card-secondary-font-size: 30px !important;
             --card-secondary-color: blue;
             --card-primary-line-height: 40px;
             --card-secondary-line-height: 40px;
             flex-direction: row !important;
             align-items: baseline !important;
             gap: 10px;
            }
          mushroom-shape-icon$: |
            .shape {
             --shape-color: none !important;
            }
          .: |
            ha-card {
              zoom: '';
              width: 85%
              height: fit-content !important;
              background: darkgrey;
              border: black;
              color: black;
              text-shadow: 2px 1px 3px black;
              margin-left: 110%;
              margin-top: -150%;
            }

            ha-state-icon {
              --icon-symbol-size: 30px;
            }