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

[dm9991966 (Trace Wilson)]

Hi all,

First off, I’m an amature with a capital AMATURE when it comes to CSS/Javascript/etc, so forgive the basic questions…

I’ve got a set of chips, and for several of them I’d like to set the icon color based on the on/off state colors of the current theme. I think I’ve narrowed it down to using
var(--state-on-color) or var(--state-off-color) in the icon_color: parameter for the chip. However, when referencing those, the icon is always grey, regardless of state. I’ve gotten the --rdb-accent-color and --rgb-primary-color to work at setting the color, but not the other values. I’m assuming it’s because the --rgb-* values are RGB value vs hex values for the others.

So, is there a way to use values like --state-on-color in the icon_color: value?

Current code in the template chip below:

type: custom:mushroom-chips-card
chips:
  - type: template
    entity: input_boolean.automations_enabled
    icon: mdi:home-assistant
    icon_color: |-
      {%- if states.counter.master_errors.state|int > 0 %} 
        red 
      {%- elif states('input_boolean.automations_enabled') == 'on' %} 
        var(--rgb-accent-color) 
      {%- else %} 
        var(--rgb-primary-color)
      {%- endif %} 

I’d like to use the current theme’s on/off state colors in place of the primary/accent colors I’ve got there now.

Thanks in advance…

[KaherdinTristan (Andrew)]

How can I round the number down to only show “1,5 SEK/kWh”

type: custom:mushroom-chips-card
chips:
  - type: entity
    entity: sensor.electricity_price_road3

[Tarusky80]

@KaherdinTristan

electricity_price_road3

{{ states('sensor.electricity_price_road3') | float | round(1) }} SEK/Kwh

[FireDragon (Nguyen Dac Manh)]

I added CSS and it works

    chips:
      - type: conditional
        conditions:
          - entity: switch.xxxxxxxxxxxx
            state: 'on'
        chip:
          type: entity
          entity: switch.xxxxxxxxxxxx
          icon_color: light-blue
          tap_action:
            action: toggle
          content_info: none
          icon: mdi:outdoor-lamp
          style: |
            ha-card {
              box-shadow: 0px 0px;
            }

[KaherdinTristan (Andrew)]

Sorry to say, but that didn’t work at all…

type: custom:mushroom-chips-card
chips:
  - type: entity
    entity: {{ states('sensor.electricity_price_road3') | float | round(1) }}

[sagined]

Hi there do you know if i can change the background color and transparency of the cover-card?
I have a cover card in an picture-elements and want to change the style:

- type: custom:mushroom-cover-card
    entity: cover.000000
    name: Garage L
    show_position_control: false
    show_buttons_control: true
    style:
      top: 15%
      left: 90%

[pedolsky]

You have to use a template card.

[KaherdinTristan (Andrew)]

ok. I would very much appreciate an example on how to do that

[rhysb (Rhys)]

Something like this:

type: custom:mushroom-chips-card
chips:
  - type: template
    entity: sensor.electricity_price_road3
    content: '{{ states(entity) | float | round(1) }}'

[RASBR (Rami)]

Hi @rhysb
Should we be expecting ‘Part 5’ any time soon?

I have a trial card for trials inspired by your code

Still WIP moving from older dashboards to new Mushroom based but need your mind-blowing creativity to replace the following ‘png’ icons:

1. Pool Water Filter pump
   

   

2. Underfloor Heating UFH as in my trial card, but don’t know how to play with colors. I guess needs more inspiration
   

3. Pool Solar Water Heating pump

4. Garage sliding gate(s) - Slide left / Slide right

5. Pool waterfall (tried this in my post but not very convincing)

6. Weather card in Mushroom card

7. Garden wall lights
   

   
   
   
   
   
   
   
   
   
   

8. Tree & plants lighting
   

   
   
   
   

I hope this is not too much to ask, but I am sure a lot of people will make use of them too.
Thanks in advance

[RASBR (Rami)]

How can the ‘calendar-clock’ be viewed as in Mushroom VERTICAL layout and/or the Mushroom Chip?

[theandouz]

Here’s some of my dashboard, on my homepage I like using the slider card to add quick actions. For rooms with media players, I show what’s currently playing and that allows for play/pause. Quick access to lights, locks and garage doors is also really handy.

Here’s one of my room cards, again using the slider card to condense the page. I used a state switch card to rearrange my slider card based on media playing; if no media is playing the temp/humidity card becomes the first card. For RGBW lights, I added a button to set the white instead of the colour temp slider as they only have one white setting. For group lights, I added the dropdown so the option of group and individual control is still available.

The RGB lights in this room can also be controlled by an AppDaemon app that sets the colour based on the artwork.

[2wenty2wo (Shaun)]

Hi, I tried to implement the code you’ve shared.

But I’m getting borders/outlines in my “stack-in-card”, does anyone know how to remove these outlines?
Thank you.

[RASBR (Rami)]

Taking the animation into the chip it self results in some irregularity in the top-right corner! What am I missing?

type: conditional
conditions:
  - entity: input_boolean.testing
    state: 'on'
chip:
  type: template
  entity: input_boolean.testing
  icon: mdi:solar-power-variant
  icon_color: amber
  content: ''
  tap_action:
    action: navigate
    navigation_path: energy
  card_mod:
    style: |
      .content {
        {{ 'animation: rays 2s infinite;' if is_state(config.entity, 'on') }}

      }
      @keyframes rays {
        0%, 100% { clip-path: inset(0 0 0 0); }
        80% { clip-path: polygon(100% 100%, 0% 100%, 11% 50%, 57% 48%, 56% 31%, 41% 31%, 33% 25%, 29% 18%, 27% 11%, 27% 6%, 74% 6%, 73% 15%, 69% 23%, 62% 29%, 71% 42%, 87% 47%); }
      }

[patrickse (Patrick Sernetz)]

Your rooms cards are really looking nice. Could you please share the code for one of the cards?

[ChrisKolan (Chris)]

Is it possible to add animation to the badge icon?
Something like: “animation: blink 1s linear infinite”.

[Fabian_V]

to remove the border lines:

Add the following to your mushroom*.yaml

  # fix added border-lines in 2022.11
  ha-card-border-width: "0px"

[FreakLikeMe]

perfect your the best!

[ArenaCloser]

The swipe card idea is actually really nice, I’ve been wondering how to convert my tablet layout to mobile without having to scroll endlessly on one page. Thanks for the ideas, I’ll continue building!

[Thekholm]

Hi,
Is it possible to have all the mushroom icons in the same color as nativ?

1. Media icons - Indigo when on and Grey when off, red if something else.
2. Light icons - Orange when on and Grey when off. red if something else.
3. Entity icons - Green when on and Grey when off. red if something else.

/Thekholm