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

[najrasum]

Hi all, just starting with HA and use mushroom cards for almost everything. Very happy with the results thus far.

For the media card: Does anyone know how to activate volume control by buttons, rather than the slider?
You can select volume buttons under Volume controls, but that do not seem to add/do anything.
Since my setup (sonos speakers) is already loud enough between 5-10 %, you can image it becoming very anoying if you try to adjust the volume with the slider on a small screen.

Alternatively, might it be possible to scale the slider range, so that 100% on the slider equals 20% for the speakers for example?
Volume limit can be set through the native sonos app. Still can’t get the volume control buttons to work though.

[wgumaa (Waleed)]

@Vintage89 Works like a charm! Thanks!

[Vintage89]

That’s great!

[Mariusthvdb (Marius)]

thx, I will have a look, though with fold entity-row I believe we can also do that.

  - type: custom:fold-entity-row
    head:
      type: section
      label: Knmi
      card_mod: &label
        style: |
          .label {
            margin-left: 0px;
          }
    padding: 0
    entities:
      - type: custom:hui-element
        card_type: picture-entity
        entity: camera.weerkaart_nl
        show_name: false
        show_state: false
        <<: &style
          card_mod:
            style: |
              ha-card {
                box-shadow: none;
                margin: 8px -16px -16px -16px;
              }

  - type: custom:fold-entity-row
    head:
      type: section
      label: Roosendaal Br
      card_mod: *label
    padding: 0
    entities:
      - type: custom:hui-element
        card_type: iframe
        aspect_ratio: 100%
        url: !secret roosendaal_br
        <<: *style

nevertheless, maybe it has some extra features, the docs weren’t that extensive to immediately ring a bell

[Haningback]

Damn didnt know that was possible, thanks!

[Mariusthvdb (Marius)]

check:

and opened:

[ArenaCloser]

I had the same issue with my TV, ideal volume is between 5-10% and volume buttons of the media card don’t show. So I created my own:

It requires 3 scripts that will run if you click one of those buttons, for (un)mute, volume down, and volume up.

Card

type: custom:stack-in-card
cards:
  - type: custom:mushroom-template-card
    entity: media_player.dummy_tv_01
    primary: Samsung TV
    secondary: |-
      {% if is_state(entity, 'on') %}
        Aan • {{(state_attr(entity,'volume_level')*100) | round()}}%
      {% elif is_state(entity, 'idle') %}
        Aan • {{(state_attr(entity,'volume_level')*100) | round()}}%
      {% else %}
        Uit
      {% endif %}
    icon: mdi:television
    icon_color: |-
      {% if is_state(entity, 'on') %}
        red
      {% elif is_state(entity, 'idle') %}
        red
      {% else %}
        disabled
      {% endif %}
  - type: custom:mushroom-chips-card
    chips:
      - type: template
        content: ''
        icon: >-
          {% if state_attr('media_player.dummy_tv_01', 'is_volume_muted') ==
          true %}
            mdi:volume-off
          {% else %}
            mdi:volume-high
          {% endif %}
        tap_action:
          action: call-service
          service: script.samsung_tv_volume_mute
        card_mod:
          style: |
            ha-card {
              box-shadow: none;
            }
      - type: template
        content: ''
        icon: mdi:volume-minus
        tap_action:
          action: call-service
          service: script.samsung_tv_volume_down
        card_mod:
          style: |
            ha-card {
              box-shadow: none;
            }
      - type: template
        content: ''
        icon: mdi:volume-plus
        tap_action:
          action: call-service
          service: script.samsung_tv_volume_up
        card_mod:
          style: |
            ha-card {
              box-shadow: none;
            }
    alignment: center
    card_mod:
      style: |
        ha-card {
          margin: 0px 12px 12px;
          --chip-border-radius: var(--mush-control-border-radius);
          --chip-height: 42px;
          --chip-padding: 32px;
          --chip-background: rgba(var(--rgb-disabled), 0.15);
          --chip-box-shadow: none;
        }

Script for (un)mute

alias: Samsung TV volume mute
sequence:
  - if:
      - condition: state
        entity_id: media_player.dummy_tv_01
        attribute: is_volume_muted
        state: true
    then:
      - service: media_player.volume_mute
        data:
          is_volume_muted: false
        target:
          entity_id: media_player.dummy_tv_01
    else:
      - service: media_player.volume_mute
        data:
          is_volume_muted: true
        target:
          entity_id: media_player.dummy_tv_01
mode: single
icon: mdi:volume-mute

Script for volume down

alias: Samsung TV volume down
sequence:
  - if:
      - condition: state
        entity_id: media_player.dummy_tv_01
        attribute: volume_level
        state: 0
    then:
      - service: media_player.volume_set
        data:
          volume_level: "0"
        target:
          entity_id: media_player.dummy_tv_01
    else:
      - service: media_player.volume_set
        data:
          volume_level: >-
            {{state_attr("media_player.dummy_tv_01", "volume_level")|float - 0.01}}
        target:
          entity_id: media_player.dummy_tv_01
mode: single
icon: mdi:volume-minus

Script for volume up

alias: Samsung TV volume up
sequence:
  - service: media_player.volume_set
    data:
      volume_level: >-
        {{state_attr("media_player.dummy_tv_01", "volume_level")|float + 0.01}}
    target:
      entity_id: media_player.dummy_tv_01
mode: single
icon: mdi:volume-plus

You’ll have to replace all the media_player.dummy_tv_01 with your Sonos speaker. Not sure if other variables are the same with my TV as your speaker, but hope this helps.

[ArenaCloser]

Something like this. You can fill in your sensor names in the secondary part and your switch entity.

type: custom:mushroom-template-card
entity: switch.power_plug
primary: Hot Water
secondary: |-
  {% if is_state(entity, 'on') %}
    On • {{states('sensor.power_usage')}} W • {{states('sensor.some_other_sensor')}} kWh
  {% elif is_state(entity, 'off') %}
    Off
  {% else %}
    Unavailable
  {% endif %}
icon: |-
  {% if is_state(entity, 'on') %}
    mdi:power-plug
  {% elif is_state(entity, 'off') %}
    mdi:power-plug-off
  {% else %}
    mdi:power-plug-off
  {% endif %}
icon_color: |-
  {% if is_state(entity, 'on') %}
    amber
  {% elif is_state(entity, 'off') %}
    disabled
  {% else %}
    disabled
  {% endif %}
tap_action:
  action: toggle
card_mod:
  style: |
    ha-card {
      {{ 'background: rgba(var(--mush-rgb-amber), 0.2);' if is_state(config.entity, 'on') }}
    }

[Stevengerrard08]

Thank you!

[exx]

@exx

Hi all! New to Mushroom. I just downloaded and installed it this morning. I was looking to change the color of the icons & slider bars on the light card, and see there was a change added to the git 2 days ago to incorporate this, but I can’t figure out how to get that change into my HA install.

Can anyone point me in the right direction?

Thanks!!

Can anyone help point me in the right direction here?

[Tim_Knowlden]

I think I’ve cracked it:

        bar-card-value::before {
          content: " {{ states.sensor.saltlevel_in_percent.state }} % / ";
        }

[Hotfield (Maarten Heetvelt)]

hi all,

I was looking for a way to change the background color (opacity) of my mushroom card slider without success, I’m quite new to this (code in general, started HA a few weeks ago) and I need a little help with the next step.

First I found –rgb-disabled, this one works in the code below and gives me the option to change the color, but unfortunately not the opacity/transparency.

I used the “inspect”/ (DOM?) option for the first time to figure out what declaration I need to change and found it: –bg–color-inactive. tried changing it in the DOM function of chrome and it does exactly what I want to achieve.

Until now I have been unsuccessful implementing it though. Using DOM I found –bg–color-inactive was inherited from mushroom-slider,

so I tried:

style: |
  mushroom-light-brightness-control {
        --slider-color: rgb(255,166,87) !important;
        --slider-bg-color: rgba(255,166,87, 0.8) !important;
        --rgb-disabled: 255,166,87 !important;
      }
  mushroom-slider {
        --bg-color-inactive: rgba(var(--rgb-disabled), 0.8) !important;
      }
  ha-card {
  background: rgba(225,225,225,0);
  border: rgba(225,225,225,0);
  }

this did not work, so i used :host as the declaration is mentioned under :host within mushroom-slider, did not work either:

style: |
  mushroom-light-brightness-control {
        --slider-color: rgb(255,166,87) !important;
        --slider-bg-color: rgba(255,166,87, 0.8) !important;
        --rgb-disabled: 255,166,87 !important;
      }
  :host {
        --bg-color-inactive: rgba(var(--rgb-disabled), 0.8) !important;
      }
  ha-card {
  background: rgba(225,225,225,0);
  border: rgba(225,225,225,0);
  }

Tried it in the light-brightness-control, no luck:

style: |
  mushroom-light-brightness-control {
        --slider-color: rgb(255,166,87) !important;
        --slider-bg-color: rgba(255,166,87, 0.8) !important;
        --rgb-disabled: 255,166,87 !important;
        --bg-color-inactive: rgba(var(--rgb-disabled), 0.8) !important;
      }
  ha-card {
  background: rgba(225,225,225,0);
  border: rgba(225,225,225,0);
  }

Can anybody help me understand what I’m doing wrong? how I can implement the declarations I found using DOM?

Edit: Just had a brain-fart, should I be using card-mod because of the variable?

p.s. I don’t know when to use !important so at the moment I just put it everywhere.

[zombie6]

Looking Good!!
This is exactly what I was looking for. Thanks for your sharing!
Can you also share the relevant scripts that you use with this card?

[zombie6]

@cowboysdude

'sensor.john'

Looking Great!
How did you create this sensor?

[dunxd]

Hmm - an issue with 2023.1 I guess since Mushroom Cards version last changed in November. Is the best way to use mapper as suggested, wait and see if this gets fixed or figure out where to log this as a bug?

[rhysb (Rhys)]

To change the slider background when active and inactive you need to go a bit deeper, like this:

type: custom:mushroom-light-card
entity: light.office_light
show_brightness_control: true
card_mod:
  style: 
    mushroom-light-brightness-control$: |
      mushroom-slider {
        --slider-bg-color: rgba(var(--rgb-state-light), 0.5);
        --bg-color-inactive: rgba(var(--rgb-disabled), 0.5);
      }

[rhysb (Rhys)]

If the change has been merged then it will be included in the next update of Mushroom.

In the meantime, if you are wanting to change the default color of the Mushroom Light Card you can add mush-rgb-state-light: var(--rgb-amber-color) to your theme file. If you want to change it for a specific card you can use card_mod like this:

type: custom:mushroom-light-card
entity: light.office_light
show_brightness_control: true
card_mod:
  style: |
    :host {
       --mush-rgb-state-light: var(--rgb-amber-color)
    }

[neives (Ricardo Neiva)]

Hi,
Did you solve this?
I have the same problem on mine and just solved it.
You have to find the fan_modes on you climate entity.
For mine I replaced this:

fan:
                  Auto low:
                    name: Auto
                    icon: mdi:fan-auto
                  Low:
                    name: 'On'
                    icon: mdi:fan

with this:

fan:
                auto:
                  name: Auto
                  icon: mdi:fan-auto
                turbo:
                  name: Turbo
                  icon: mdi:fan-speed-3
                high: false
                medium: false
                low:
                  name: Low
                  icon: mdi:fan-speed-1

[jaku2k (Jakub)]

Hello,
@rhysb could you please give me any tip about editing your Room card? My problem [no2] was described in this post:

https://community.home-assistant.io/t/mushroom-cards-build-a-beautiful-dashboard-easily/388590/4648?u=jaku2k

Blockquote
[…] 2. I would like to edit Rhys’ room card, so that I could switch specific light entities by pressing an icon displayed at the bottom of the card. I am able to add an interactive icon to that card, but it is being displayed at its right side and I would like it to be positioned on the left. When I add “toogle chip” after alignment: end it interferes with those conditional ones, made by the author. @rhysb could you please tell me how could I add such icon? I’m sending an example in the attachment. I would like the toogle icon to be placed in the place of red dot. […]

Best regards,
Jakub

[darylosu]

hey man,
may not be a perfect though

type: custom:stack-in-card
cards:
  - type: custom:mushroom-template-card
    primary: HA Server
    secondary: 'Uptime: {{ states(''sensor.ha_uptime_phrase'') }}'
    icon: mdi:server-network
  - type: custom:mushroom-chips-card
    chips:
      - type: template
        entity: sensor.nas_temperature
        icon: mdi:chip
        icon_color: |
          {% if states('sensor.nas_temperature') | float < 0 %}
            blue
          {% elif states('sensor.nas_temperature') | float < 5 %}
            white
          {% elif states('sensor.nas_temperature') | float < 10 %}
            green
          {% elif states('sensor.nas_temperature') | float > 10 %}
            yellow
          {% elif states('sensor.nas_temperature') | float > 25 %}
            orange
          {% elif states('sensor.nas_temperature') | float >  30 %}
            red
          {% else %}
            green
          {% endif %}
    alignment: end