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

Share your Projects!
,
9477

Hi hoping someone can point me in the right direction. Not sure if this is the right place, so if not, point me in the direction I need to go please.

I’ve manually installed the Mushroom cards and they all appear to work well, generally. I have one issue that I’ve come across and it may just be how I installed I don’t know.

When I use a cover card and want to use the controls (up/down/stop buttons) versus the slider, selecting the control option gives a blank UI control. In other words, the only thing I see in the control is the name and ICON.

Anyone have a clue to what I’m doing wrong or how to correct this ?
Thank you in advance!!!

9478

Can anyone please explain how to select a picture from the template card?

9480

Hello,
What do I put in the theme to change the color of all mushroom icons in Lovelace?

9481

@stephanschleichstr13 Check out this section. It covers how to customize your own colors under the Build your own

https://github.com/piitaya/lovelace-mushroom-themes#build-your-own

9482

Use the picture: function with the local address of your picture in your card or explore the customize.yaml option.

image
image1524×96 8.93 KB

1 Like
9483

HI,

Could you please help and share the code - I would be very happy to see that it fits my needs exactly

You can use this site really conveniently

https://paste.ofcode.org/

9484

You have multiple errors where you used a - vs _ and vice versa. I’d be wary of replies with web links

9485

HI :slight_smile:

You can use this site really conveniently

https://paste.ofcode.org/

9486

Hi guys. For some reason creating a new Conditional chip doesn’t work anymore.
Steps I take:

  1. Add Card > Custom: Mushroom Chips Card
  2. Add Chip > Conditional
  3. Add Condition > Entity State > Garage Door > State is not equal to: Closed

Code:

type: custom:mushroom-chips-card
chips:
  - type: conditional
    conditions:
      - condition: state
        entity: cover.garage_door
        state_not: closed
    chip:
      type: entity
      entity: cover.garage_door

The current state of the chip is “Closed”. But it just is shown all the time. Also when I choose something really different like the state of my dishwasher and change it to show on random values it stays displayed.

Am I doing something wrong?

9487

Hopefully, someone can help me. I would really like to see a red mdi:fire icon at the place where the ‘1’ currently appears on the state-icon if the entity ‘switch.radiator_slaapkamer_2_4’ is on. If this entity is off, it’s not the case, then there’s no need to display the state icon.

I’ve been scouring this thread all evening, but I just can’t seem to get it right. Hopefully, someone here can help me.

Screenshot 2024-01-09 at 23.39.12

type: custom:mushroom-template-card
primary: Keuken
secondary: '{{ states(''sensor.temperatuur_ruimte_taster_woonkeuken_0_3'') }} °C'
icon: mdi:knife
entity: light.lampen_woonkeuken_0_3
badge_color: ''
icon_color: |-
  {% if is_state('light.lampen_woonkeuken_0_3', 'on') %}
    orange
  {% endif %}
hold_action:
  action: toggle
tap_action:
  action: navigate
  navigation_path: /lovelace-keuken/home
layout: vertical
fill_container: true
card_mod:
  style:
    mushroom-shape-icon$: |
      .shape {
        background: radial-gradient(var(--card-background-color) 60%, transparent calc(60% + 1px)), conic-gradient(var(--icon-color) {% if states('switch.radiator_slaapkamer_2_4') != 'none' %} 
      }
    .: |
      ha-state-icon::after {
        content: '{{ 1 }}';
        position: absolute;
        top: -11%;
        right: -11%;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 15px;
        height: 15px;
        font-size: 9px;
        font-weight: 700;
        background-color: rgba(var(--rgb-amber), 0.5);
        border-radius: 50%;
      }
9488

You’ll have to reference a picture as the background-image with this method. I simply grabbed one from google as an example.

card_mod:
  style: |
    {% if states( ‘switch.radiator_slaapkamer_2_4’, 'on') %} 
       ha-state-icon::after {
         content: "";
         position: absolute;
         top: -11%;
         right: -11%;
         display: flex;
         justify-content: center;
         align-items: center;
         width: 15px;
         height: 15px;
         border-radius: 50%;
         position: absolute;
         background-repeat: no-repeat;
         background-image: url("/local/animated/fire2.png") !important;
         background-position: top;
         background-size: cover;
         {%else%}
         {%endif%}
       }

image

9489

I tested the mushroom conditional card and it’s working fine. Not sure what is causing your issue. Verify the entity’s state/statue using another card type.

image

type: custom:mushroom-chips-card
chips:
  - type: conditional
    conditions:
      - condition: state
        entity: cover.pc_curtains
        state_not: closed
    chip:
      type: entity
      entity: cover.pc_curtains
1 Like
9490

Thanks for the reply, it’s not possible to use the mdi:fire icon instead?

9491

Thank you for testing. Weird, it seems that something is wrong but I don’t seem to know what. I’ve tested with very different conditions and it also doesn’t seem to work.

9492

Yes, you can add a chip badge and use an icon within the badge.

9493

I Tried this but don’t see any icon then :S

  card_mod:
  style: |
    {% if states( ‘switch.radiator_slaapkamer_1_4’, 'on') %} 
       ha-state-icon::after {
         content: "";
         position: absolute;
         top: -11%;
         right: -11%;
         display: flex;
         justify-content: center;
         align-items: center;
         width: 15px;
         height: 15px;
         border-radius: 50%;
         position: absolute;
         background-repeat: no-repeat;
         background-image: mdi:fire;
         background-position: top;
         background-size: cover;
         {%else%}
         {%endif%}
       }
9494

It would be something like this… card mod isn’t really needed. Swap my entities for yours.

type: custom:mushroom-template-card
primary: ''
secondary: ''
icon: mdi:knife
entity: light.pc_lights
badge_icon: |-
  {% if is_state('light.pc_lights', 'on') %}
    mdi:fire         
  {% elif is_state('light.pc_lights', 'off') %}
  {% endif %}
badge_color: |-
  {% if is_state('light.pc_lights', 'on') %}
    red       
  {% elif is_state('light.pc_lights', 'off') %}
  {% endif %}
9495

definitely odd… reload Mushroom just to check that off.

9496

Check, this one is working. But is it also possible to add an extra icon with the card_mod at another location (like right in the middle). Zo i can use more small icons to see the status?

I try to understand the card_mod ha-state-icon to use this on top of the badge_icon

type: custom:mushroom-template-card
primary: Kim en Jos
secondary: '{{ states(''sensor.temperatuur_ruimte_taster_slaapkamer_1_4'') }} °C'
icon: mdi:bed-king-outline
entity: light.lampen_slaapkamer_1_4
badge_color: |-
  {% if is_state('switch.radiator_slaapkamer_1_4', 'on') %}
    red
  {% endif %}
icon_color: |-
  {% if is_state('light.lampen_slaapkamer_1_4', 'on') %}
    orange
  {% endif %}
hold_action:
  action: toggle
tap_action:
  action: navigate
  navigation_path: /kim-en-jos/home
layout: vertical
badge_icon: |-
  {% if is_state('switch.radiator_slaapkamer_1_4', 'on') %}
    mdi:fire
  {% endif %}
9497

Definitely, but then we are back to adding a image vs a badge. I am fairly certain you can only have one badge per chip. As far as shapes added before and after, you can go crazy with card mod.

Both myself and @dimitri.landerloos have highlighted this option in this thread.

type: custom:mushroom-template-card
icon: mdi:test-tube
card_mod:
  style:
    mushroom-shape-icon$: |
      .shape {
        --shape-color: none;
        --icon-symbol-size: 75px !important;
        --icon-size: 75px !important;
      }
      .shape:after {
        content: "";
        height: 10px;
        width: 10px;
        position: absolute;
        bottom: 27px;
        right: 32px;
        background: yellow; 
      }
      .shape:before {
        content: "";
        height: 10px;
        width: 10px;
        position: absolute;
        bottom: 27px;
        left: 12px;
        background: green; 
      }                    
    .: |
      ha-state-icon {
        color: transparent !important;
      }
      ha-state-icon:after {
        content: "";
        height: 10px;
        width: 10px;
        position: absolute;
        top: 11px;
        left: 34px;
        background: red;
      }             
      ha-state-icon:before {
        content: "";
        height: 10px;
        width: 10px;
        position: absolute;
        top: 11px;
        left: 12px;
        background: blue;
      }
      mushroom-shape-icon:after {
        content: "";
        height: 10px;
        width: 10px;
        position: absolute;
        top: 7px;
        left: 23px;
        background: purple;
      }                       
      mushroom-shape-icon:before {
        content: "";
        height: 10px;
        width: 10px;
        position: absolute;
        top: 25px;
        left: 38px;
        background: orange;
      }
      mushroom-state-item:after {
        content: "";
        height: 10px;
        width: 10px;
        position: absolute;
        bottom: 35px;
        left: 34px;
        background: lime;
      }
      mushroom-state-item:before {
        content: "";
        height: 10px;
        width: 10px;
        position: absolute;
        top: 37px;
        left: 19px;
        background: aqua;
      }                          
      ha-card {
        box-shadow: none;
        --ha-card-border-width: 0px;
        padding-bottom:28px;
        background: none;
      }

image

2 Likes