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

Many thanks!!

How to add battery info in the secondary_info of mushroom-cover-card?

type: custom:mushroom-cover-card
entity: cover.cover_first_floor
name: Cover First Floor
show_position_control: true
show_buttons_control: true
primary_info: name
tap_action:
  action: none
hold_action:
  action: more-info
double_tap_action:
  action: none
secondary_info: state

I want the secondary_info shows “Open 50% | battery 97%”.

Anyone can help?

Please use the back tick to post your code. #11

Yes, what you’re looking for is possible if you have card-mod installed.

I do have card_mod installed. @LiQuid_cOOled Can you please share your code?

Thanks.

You could also adjust the % color based on the battery level.

type: custom:stack-in-card
cards:
  - type: custom:mushroom-title-card
    title: Bedroom Curtains
  - type: custom:layout-card
    layout_type: custom:grid-layout
    layout:
      grid-template-columns: 1fr
      margin: 0px 0px 0px 0px
    cards:
      - type: custom:mushroom-cover-card
        entity: cover.pc_curtains
        show_position_control: true
        show_tilt_position_control: false
        show_buttons_control: true
        layout: horizontal
        card_mod:
          style: |
            ha-state-icon:after {
            content: " {{ states('sensor.pc_curtains_battery') }}%";
            background: none;
            font-size: 10px;
            font-weight: 500;
            border-width: 2px;
            border-radius: 50%;
            margin-top: 29px;
            margin-left: 125px;
            position: absolute;
            color: yellow;
                }
card_mod:
  style: |
    ha-card {
     border:none !important;
        }
2 Likes

If you want to change the color based on the battery level add this code to color:

color:  {% if states('sensor.pc_curtains_battery') | int < 15 %}
                     red
                    {% elif states('sensor.pc_curtains_battery') | int < 50 %}
                     yellow  
                     {% else %}
                     lime
                    {% endif %}

Entire card code

type: custom:stack-in-card
cards:
  - type: custom:mushroom-title-card
    title: Bedroom Curtains
  - type: custom:layout-card
    layout_type: custom:grid-layout
    layout:
      grid-template-columns: 1fr
      margin: 0px 0px 0px 0px
    cards:
      - type: custom:mushroom-cover-card
        entity: cover.pc_curtains
        show_position_control: true
        show_tilt_position_control: false
        show_buttons_control: true
        layout: horizontal
        card_mod:
          style: |
            ha-state-icon:after {
            content: " {{ states('sensor.pc_curtains_battery') }}%";
            background: none;
            font-size: 10px;
            font-weight: 500;
            border-width: 2px;
            border-radius: 50%;
            margin-top: 29px;
            margin-left: 130px;
            position: absolute;
            color:  {% if states('sensor.pc_curtains_battery') | int < 15 %}
                     red
                    {% elif states('sensor.pc_curtains_battery') | int < 50 %}
                     yellow  
                     {% else %}
                     lime
                    {% endif %}
                    }      
      - type: custom:mushroom-cover-card
        entity: cover.bed_curtains
        show_position_control: true
        show_tilt_position_control: false
        show_buttons_control: true
        layout: horizontal
        card_mod:
          style: |
            ha-state-icon:after {
            content: " {{ states('sensor.bed_curtains_battery') }}%";
            background: none;
            font-size: 10px;
            font-weight: 500;
            border-width: 2px;
            border-radius: 50%;
            margin-top: 29px;
            margin-left: 130px;
            position: absolute;
            color:  {% if states('sensor.bed_curtains_battery') | int < 15 %}
                     red
                    {% elif states('sensor.bed_curtains_battery') | int < 50 %}
                     yellow  
                     {% else %}
                    lime
               
                    {% endif %}
                      }
      - type: custom:mushroom-cover-card
        entity: cover.tv_curtains
        show_position_control: true
        show_tilt_position_control: false
        show_buttons_control: true
        layout: horizontal
        card_mod:
          style: |
            ha-state-icon:after {
            content: " {{ states('sensor.tv_curtains_battery') }}%";
            background: none;
            font-size: 10px;
            font-weight: 500;
            border-width: 2px;
            border-radius: 50%;
            margin-top: 29px;
            margin-left: 130px;
            position: absolute;
            color:  {% if states('sensor.tv_curtains_battery') | int < 15 %}
                     red
                    {% elif states('sensor.tv_curtains_battery') | int < 50 %}
                     yellow  
                     {% else %}
                     lime
                    {% endif %}
                    }
card_mod:
  style: |
    ha-card {
     border:none !important;
        }

1 Like

did you found a solution for the conditial card with numeric condition

edit: solution here

it is done like this. the syntax is wrong for what he posted.

type: custom:mushroom-chips-card
chips:
  - type: conditional
    conditions:
      - condition: numeric_state
        entity: sensor.all_standby_energy
        above: 0
        below: 1000
    chip:
      type: template
      icon: mdi:test-tube

Yes. Thanks. i already found it and posted the solution in the other post

“The other post” ? did you cross post the same question somewhere else? your initial question is not edited with the solution.

sorry. Changed the post …

Hi,

I need some advise. I have this webrtc cards without grids, but how can I make 2 columns only in mobile? So I can see more cameras?

Thank you

Hello,
There is a way to size up the circle/shadow behind the icon ?

type: custom:mushroom-light-card
entity: light.light_livingroom
use_light_color: true
show_brightness_control: true
name: Entrée
show_color_temp_control: true
layout: horizontal
show_color_control: true
collapsible_controls: false
icon: mdi:coat-rack
fill_container: false
secondary_info: none
card_mod:
          style: |
            :host {
              --mush-icon-symbol-size: 65px;
            }
            ha-card {
               border: none !important;
               box-shadow: none !important;
               box-shadow: none !important;
             }

I can’t use the mush-icon-size because the light control bar don’t align the middle of the logo compared to mush-icon-symbol-size

Thanks

Take a look at the guide linked in my profile :slight_smile:

I watched your profile and the only way I found to scale up the shadow is icon-size but this method create a problem with the control bar :

Is there a way to decrease this distance?
image

type: horizontal-stack
cards:
  - type: custom:vertical-stack-in-card
    cards:
      - type: custom:mushroom-cover-card
        fill_container: false
        secondary_info: state
        show_position_control: false
        show_tilt_position_control: false
        show_buttons_control: false
        tap_action:
          action: more-info
        layout: horizontal
        name: 'Όλα'
        icon: mdi:roller-shade
        entity: cover.blinds_all
        icon_type: icon
        card_mod:
          style:
            mushroom-shape-icon$: |
              .shape {
                --shape-color: none;
                --icon-size: 60px;
                --icon-symbol-size: 50px;
                --icon-color: green
               }
      - type: custom:mushroom-cover-card
        fill_container: false
        secondary_info: none
        show_position_control: false
        show_tilt_position_control: false
        show_buttons_control: true
        tap_action:
          action: more-info
        layout: vertical
        icon: ''
        entity: cover.blinds_all
        icon_type: none
        primary_info: none
        card_mod:
          style:
            mushroom-shape-icon$: |
              .shape {
                --shape-color: none;
                --icon-size: 60px;
                --icon-symbol-size: 50px;
                --icon-color: green
               }
  - type: custom:vertical-stack-in-card
    cards:
      - type: custom:mushroom-cover-card
        entity: cover.blinds_living_room
        fill_container: false
        secondary_info: state
        show_position_control: false
        show_tilt_position_control: false
        show_buttons_control: false
        layout: horizontal
        name: Σαλόνι
        icon: mdi:roller-shade
        icon_type: icon
        tap_action:
          action: more-info
        card_mod:
          style:
            mushroom-shape-icon$: |
              .shape {
                --shape-color: none;
                --icon-size: 60px;
                --icon-symbol-size: 50px;
                --icon-color: MediumVioletRed
               }
      - type: custom:mushroom-cover-card
        entity: cover.blinds_living_room
        fill_container: false
        secondary_info: none
        show_position_control: false
        show_tilt_position_control: false
        show_buttons_control: true
        layout: vertical
        icon: mdi:roller-shade
        icon_type: none
        primary_info: none
        tap_action:
          action: more-info
        card_mod:
          style:
            mushroom-shape-icon$: |
              .shape {
                --shape-color: none;
                --icon-size: 60px;
                --icon-symbol-size: 50px;
                --icon-color: MediumVioletRed
               }

Im looking to make the light icon chip change color to grey when its off instead of white.

But i just cant seem to get it right. Anyone who can guide me in the right direction?
:slight_smile:

image

          type: custom:stack-in-card
          cards:
            - type: custom:mushroom-template-card
              primary: Toalett
              secondary: |-
                {{ states('sensor.hue_motion_do_temp') }}°C |
                {{ states('sensor.aqara_multisensor_gangen_fukt') }} %
              icon: mdi:toilet
              entity: light.dolys_dz
              icon_color: |-
                {% if is_state('light.dolys_1', 'on') %} 
                  orange 
                {% elif is_state('light.dolys_2', 'on') %}
                  orange
                {% endif %}
              tap_action:
                action: toggle
              hold_action:
                action: navigate
                navigation_path: /lovelace-panel/toalett
              multiline_secondary: false
              layout: horizontal
              fill_container: false
              card_mod:
                style: |
                  ha-state-icon::after {
                    content: '{{ expand(states.light) |selectattr('state', 'eq', 'on') |selectattr('entity_id', 'in', area_entities('Do')) |rejectattr('entity_id', 'search', 'dz') |map(attribute='entity_id') |list | count }}';
                    position: absolute;
                    top: -11%;
                    right: -11%;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    width: 15px;
                    height: 15px;
                    font-size: 9px;
                    font-weight: 700;
                    {% if expand(states.light) 
                      |selectattr('state', 'eq', 'on') 
                      |selectattr('entity_id', 'in', area_entities('Do'))
                      |rejectattr('entity_id', 'search', 'dz')
                      |map(attribute='entity_id')
                      |list | count > 0 
                    %}
                      background-color: rgba(var(--rgb-disabled), 0.5);
                    {% else %}
                      background-color: rgba(var(--rgb-disabled), 0.5);       
                    {% endif %}
                    border-radius: 50%;
                  }
                  {% if states('binary_sensor.hue_motion_do_motion') == 'on' %}
                    ha-state-icon::before {
                      content: 'directions_walk';
                      position: absolute;
                      font-family: 'Material Icons';
                      top: -11%;
                      left: -11%;
                      display: flex;
                      justify-content: center;
                      align-items: center;
                      width: 15px;
                      height: 15px;
                      font-size: 11px;
                      background: rgba(var(--rgb-disabled), 0.5);
                      color: rgba(var(--rgb-red), 1);
                      border-radius: 50%;
                      animation: blink 1s linear infinite;
                    }
                  {% endif %}
                  @keyframes blink {
                    50% {opacity: 0;}
                  }      
            - type: custom:mushroom-chips-card
              chips:                               
                - type: light
                  entity: light.dolys_dz
                  use_light_color: true
                  content_info: none
                  card_mod:
                    style: |
                      ha-card {
                        --chip-box-shadow: none;
                        --chip-background: none;
                        --chip-icon-size: 0.8em;                       
                        background: radial-gradient( var(--card-background-color) 60%, none calc(60% + 1px)), conic-gradient(var(--icon-color) {{state_attr(config.entity,'brightness') | float / 2.55}}% 0%, var(--card-background-color) 0% 100%) !important;
                      }
              card_mod:
                style: |
                  ha-card {
                    --chip-box-shadow: none;
                    --chip-background: none;
                    --chip-spacing: 0;
                    margin-top: 10px;             
              alignment: end

Hi all,

It is possible to load page when all items are definitely loaded to avoid “transition” like title position in my gif below?

1000013099

Thx you :pray:

make an if else structure in your chips card ?

                                          icon_color: >
                                            {% if is_state("light.dolys_dz", 'off') %}
                                              [84, 84, 84]
                                            {% else %}
                                              [245,245,245]
                                            {% endif %}

That didnt work.