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

dimitri.landerloos · November 12, 2023, 7:29pm

Yes. you can only have one | per line. currently you have 2 if i strip out the rest:

card_mod:
  style: |
    mushroom-state-info$: |
      .primary:before {
        content: '1st line';
      }
      .primary {
        display: flex;
        flex-direction: column;
      }
      .primary:after {
        content: '3rd line';
      }

You see how that is different from what i showed you? i have no | after style:

card_mod:
  style:
    mushroom-state-info$: |
      .primary:before {
        content: '1st line';
      }
      .primary {
        display: flex;
        flex-direction: column;
      }
      .primary:after {
        content: '3rd line';
      }

if you need to combine style: | with other entries that use | you need to use .: | it is explained as well in the guide in my profile in the first post.

so to fix your code do this:

Code using CSS Pseudo Elements

type: custom:mushroom-cover-card
entity: cover.office_blinds
show_buttons_control: true
show_tilt_position_control: false
show_position_control: false
icon_type: icon
fill_container: true
tap_action:
  action: none
hold_action:
  action: none
double_tap_action:
  action: none
layout: vertical
name: Schlafen Kinder
secondary_info: none
primary_info: name
card_mod:
  style:
    mushroom-state-info$: |
      .primary:before {
        content: '1st line';
      }
      .primary {
        display: flex;
        flex-direction: column;
      }
      .primary:after {
        content: '3rd line';
      }
    .: |
      ha-state-icon {
        {% if is_state(config.entity, 'opening') %}
          --card-mod-icon: mdi:arrow-up-box
        {% elif is_state(config.entity, 'closing') %}
          --card-mod-icon: mdi:arrow-down-box
        {% elif state_attr(config.entity, 'current_position') == 100 %}
          color: rgba(255,255,255);
          --card-mod-icon: fapro:shutter1;
        {% elif state_attr(config.entity, 'current_position') > 50 %}
          color: rgba(193,193,193);
          --card-mod-icon: fapro:shutter2;
        {% elif state_attr(config.entity, 'current_position') > 0 %}
          color: rgba(131,131,131);
          --card-mod-icon: fapro:shutter3;
        {% else %}
          color: rgba(100,100,100);
          --card-mod-icon: fapro:shutter4;
        {% endif %}
      }
      ha-card {
        --card-primary-font-size: 18px;
        --card-primary-font-weight: normal;
      }
      mushroom-shape-icon {
        --shape-color: none !important;
        --shape-color-disabled: transparent !important;
        --icon-symbol-size: 100px;
      }
      mushroom-state-item {
        padding-top: 20px;
        --spacing: 20px;
        margin-bottom: 10px;
      }

to give some examples:

This is allowed.

card_mod:
  style: |
    element {
    }

This is allowed.

card_mod:
  style: 
    element$: |
      element2 {
      }

This is NOT allowed.

card_mod:
  style: |
    element$: |
      element2 {
      }

This is allowed.

card_mod:
  style: 
    element$: |
      element2 {
      }
    .: |
      element3 {
      }

This is allowed (because both | are on the same indentation).

card_mod:
  style:
    element$: |
      element2 {
      }
    element3$: |
      element4 {
      }

Mngsps · November 12, 2023, 8:07pm

dimitri.landerloos:

  style:
    mushroom-state-info$: |
      .primary:before {
        content: '1st line';
      }
      .primary {
        display: flex;
        flex-direction: column;
      }
      .primary:after {
        content: '3rd line';
      }
    .: |

Thank you, a lot, for the very good help and sorry for my missing skills.

At the moment this failure appears when changing as suggested:

dimitri.landerloos · November 12, 2023, 8:11pm

Why didnt you just copy the exact code i gave you?

you have wrong indentation at your ha-state-icon section.

you have:

  .: |
 ha-state-icon {

i showed:

.: |
  ha-state-icon {

Mngsps · November 12, 2023, 8:11pm

Indentation problem of the following I guess…

Mngsps · November 12, 2023, 8:13pm

Noticed it too late (please see above).
I’m sorry, I’m not very trained…

dimitri.landerloos · November 12, 2023, 8:13pm

No need to apologise my friend. just curious. does it work now?

Mngsps · November 12, 2023, 8:22pm

Perfect Thank you!!

ArtCore7 · November 12, 2023, 10:06pm

I also like this Card and combinaded it with my normal Room Card which is added with a conditional card to open and close the Room. Still just Playing around with it.

As my Card getting really long with many Entities, is there an easy way to add “variables” so i can just Change the Entity and not the whole code for many rooms ?

dimitri.landerloos · November 12, 2023, 10:22pm

For your use case i would recommend looking into the decluttering card. Its a bit complex, but helps with exactly what you want. Yaml anchors dont actually save well.

Mattia2399 · November 13, 2023, 12:47pm

Almost…:)))))))

Vasco · November 13, 2023, 5:14pm

If you need some help, post the latest code please so we can continue on that. I went through all 8500 posts yesterday and got a bit confused on what was the latest lol.

@dimitri.landerloos, @rhysb and @ArenaCloser made my todo list insanely large with all the good posts in here lol. And now you as well @Mattia2399

At least i am fully up to date now in the beautiful stuff that I could do and try to finish my WIP dashboard.

ArenaCloser · November 13, 2023, 6:55pm

I created a topic for my configuration: Adaptive Mushroom (excuse the cross-posting). For questions, comments or suggestions, feel free to reach out. If you use my adaptive layout, I’d love to see your resulting dashboard there!

mysob · November 13, 2023, 11:03pm

Love the new screens @ArenaCloser , especially the rick roller. Working with the layout since last week, but still running into some errors. E.g. the mobile footer isn’t sticky on my side. Didn’t look at this yet though, but will post it to your github when found.

modelstudent101 · November 14, 2023, 4:55am

Just wanted to throw in my 2¢.

Animated the Purifier Icon from @rhysb and updated by @dimitri.landerloos based on the entity’s fan speed.

Not sure if this has been posted before (forgive me for not reading all 8500+ posts) but figured it might help someone. The idea came from the mushroom-fan-card animation.

I simply changed the animation: air 1s infinite; line to animation: air {{ 25 / (state_attr(config.entity , 'percentage')) }}s infinite;.

Here’s the card in full, with an updated power state badge:

type: custom:mushroom-template-card
primary: Purifier
layout: vertical
entity: fan.air_purifier
icon: mdi:air-purifier
icon_color: '{{ ''cyan'' if is_state(entity, ''on'') else ''disabled'' }} '
tap_action:
  action: more-info
hold_action:
  action: toggle
badge_icon: mdi:power
badge_color: '{{ ''#3CB371'' if is_state(entity, ''on'') else ''#DAA520'' }} '
card_mod:
  style: |
    ha-state-icon {
      {% if is_state(config.entity, 'on') %}
        animation: air {{ 25 / (state_attr(config.entity , 'percentage')) }}s infinite;
      {% else %}
      {% endif %}
    }
    @keyframes air {
      0%, 100% { clip-path: inset(0 0 0 0); }
      25% { clip-path: polygon(100% 100%, 0 100%, 0 0, 100% 0, 98% 32%, 63% 42%, 65% 58%, 100% 43%); }
      75% { clip-path: polygon(100% 100%, 0 100%, 0 0, 100% 0, 100% 44%, 64% 61%, 64% 73%, 100% 72%); }
      50% { clip-path: polygon(100% 100%, 0 100%, 0 0, 100% 0, 78% 38%, 64% 43%, 64% 72%, 100% 73%); }
    }

cbeck94 · November 14, 2023, 12:30pm

Hey there,
i’m just getting started with dashboards and mushroom cards, but i already fail on simple things.I want to have a dashboard for my phone in the end with rows in it and quite narrow buttons. But i can’t find the right syntax to change font size and icon size to make it fit better. Especially the two cover cards. I’ve tried tinkering with “card_mod” but nothing changes. seems like i just don’t get the syntax right. Is there any example or documentation where i can check this? Greatly appreciate any help!

Thanks!

type: custom:layout-card
layout_type: grid
layout:
  grid-template-columns: 15% 15% 70%
  grid-template-rows: 25% 25% 25% 25%
  grid-template-areas: |
    "a a1 a2"
    "a a3 a4"
    "b b1 b2"
    "b b3 b4"
cards:
  - type: picture
    image: https://demo.home-assistant.io/stub_config/t-shirt-promo.png
    view_layout:
      grid-area: a
  - type: custom:mushroom-cover-card
    entity: cover.rollo_buro_did
    show_position_control: false
    show_buttons_control: true
    primary_info: state
    fill_container: true
    view_layout:
      grid-area: a2
  - type: custom:mushroom-cover-card
    entity: cover.rollo_buro_did
    show_position_control: true
    show_buttons_control: false
    icon_type: none
    primary_info: none
    secondary_info: none
    fill_container: true
    view_layout:
      grid-area: a4
  - type: button
    show_icon: true
    show_name: false
    tap_action:
      action: toggle
    entity: switch.burod_pm_sperren
    show_state: true
    view_layout:
      grid-area: a3
  - type: custom:mushroom-light-card
    entity: light.licht_kg_burod
    fill_container: true
    view_layout:
      grid-area: a1

jaiffee · November 14, 2023, 1:08pm

Try This one: edit card → open code editor → paste this code in:

type: vertical-stack
cards:
 - type: horizontal-stack
    cards:
      - type: custom:mushroom-light-card
        entity: light.duo
        show_brightness_control: true
        icon: mdi:lightbulb-fluorescent-tube
        name: Duo

Note: change entity to your entity name.

JKHerny · November 14, 2023, 7:06pm

Hi All, Im trying to get a binary sensor(motion sensor) to change colour based on state (motion/no motion) any ideas where im going wrong?

type: custom:mushroom-template-card
primary: Kitchen Motion
secondary: ‘’
icon: mdi:motion-sensor
layout: vertical
icon_color: >-
{% if is_state(‘binary_sensor.kitchen_motion_310fcd24_ias_zone’, ‘True’) %} green {% else %} black {% endif %}
multiline_secondary: false
fill_container: false

weppa · November 14, 2023, 8:40pm

Try:

type: custom:mushroom-template-card
primary: Kitchen Motion
secondary: ''
icon: mdi:motion-sensor
layout: vertical
icon_color: >
  {{ 'green' if is_state('binary_sensor.kitchen_motion_310fcd24_ias_zone', 'on') else 'black' }}
multiline_secondary: false
fill_container: false

FedeL16 · November 15, 2023, 1:02pm

Can you share me energy cards code please?
Thank you

ArenaCloser · November 15, 2023, 2:22pm

github.com

sga-noud/adaptive-mushroom/blob/9cd6b67b0426967ae1e2d972fe093000b249ba48/lovelace.yaml#L1698C1-L1800C27


      
          - type: vertical-stack
            cards:
              - type: custom:mushroom-title-card
                title: Energie
                subtitle: ''
              - type: custom:mushroom-template-card
                entity: sensor.zonneplan_current_usage
                primary: 'Nu: {{states(entity)}} W'
                secondary: >-
                  Totaal verbruik vandaag:
                  {{states("sensor.zonneplan_p1_electricity_consumption_today")}}
                  kWh
                icon_color: orange
                icon: mdi:lightning-bolt
                tap_action:
                  action: more-info
              - type: custom:stack-in-card
                cards:
                  - type: custom:mushroom-template-card
                    entity: sensor.zonneplan_current_electricity_tariff

This file has been truncated. show original