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

Can’t get animations to work.
Just started to implement this.
Mushroom and card_mod is installed.
I fan only get the color change to work on this:

type: custom:mushroom-template-card
primary: Serenity
icon: mdi:scent
icon_color: green
card_mod:
  style:
    mushroom-shape-icon$: |
      ha-icon {
        --icon-animation: wave 6s ease infinite;
      }
      @keyframes wave {
        50% { transform: rotatey(180deg); --icon-color: rgb(var(--rgb-cyan)); }
      }
      .shape {
        --shape-animation: color 6s ease infinite;
      }
      @keyframes color {
        50% { --shape-color: rgba(var(--rgb-cyan), 0.2); }
      }

Look at the updated animations i have linked to in this thread many times.

Hello guys, is it possible to have a touch-on-icon action different from the single touch action on the whole entity-card?

Dear Community

someone to know it’s possible limit text display to 5 lines, and after 2 second start to scroll text in automatic?

  - type: custom:mushroom-template-card
    picture: /local/channel/la7d.png
    primary: '{{ state_attr(''sensor.la7d'',''name'') }}'
    secondary: '{{ state_attr(''sensor.la7d'', ''description'') }}'
    tap_action:
      action: call-service
      service: script.toggle
      service_data:
        entity_id: script.panasonic_1
    card_mod:
      style:
        mushroom-state-info$: |
          .secondary {
            white-space: normal !important;
            overflow: visible !important;
          }
        .: |
          ha-card {
            --icon-border-radius: 0;
            height: !important;
            font: 1px !important;
          }

now the result is:

simple answer unfortunately.

no, not possible. not with card mod, not as an option in the card itself.

you would need to make your own card or start fidling with combining cards, like for example a button card and a mushroom template card.

take a look at this post:

perfect thank you

Aergh… can you please help me why this is not working…I would like to have to icons (badge is working)… both for another status indicator (in the code below it’s the same, but that’s for testing).

type: custom:mushroom-template-card
primary: Badkamer
secondary: '{{ states(''sensor.temperatuur_ruimte_taster_badkamer_1_5'') }} °C'
icon: mdi:shower-head
entity: light.lampen_badkamer_1_5
badge_color: |-
  {% if is_state('switch.radiator_badkamer_1_5', 'on') %}
    red
  {% endif %}
icon_color: |-
  {% if is_state('light.lampen_badkamer_1_5', 'on') %}
    orange
  {% endif %}
hold_action:
  action: toggle
tap_action:
  action: navigate
  navigation_path: /badkamer-kim-en-jos
layout: vertical
badge_icon: |-
  {% if is_state('switch.radiator_badkamer_1_5', 'on') %}
    mdi:fire
  {% endif %}
card_mod:
  style: |
    {% if states( ‘switch.radiator_badkamer_1_5’, '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/fire.svg") !important;
         background-position: top;
         background-size: cover;
         {%else%}
         {%endif%}
       }

havent tested - but 1st thing i would do is change where your if statements are. right now you have it mixed in between the element and outside. generally i dont recommend placing it outside of the element, but for pseudo elements (what the :after creates) it is probably fine. but either do this:

       ha-state-icon::after {
         {% if states( ‘switch.radiator_badkamer_1_5’, 'on') %} 
           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/fire.svg") !important;
           background-position: top;
           background-size: cover;
         {%else%}
         {%endif%}
       }

or this:

    {% if states( ‘switch.radiator_badkamer_1_5’, '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/fire.svg") !important;
        background-position: top;
        background-size: cover;
      }
    {%else%}
    {%endif%}
1 Like

That did it! Thank you lowone673. I made a few more adjustments but I think this is my final card.

image

Code
type: custom:stack-in-card
mode: vertical
cards:
  - type: horizontal-stack
    cards:
      - type: custom:layout-card
        layout_type: custom:grid-layout
        layout:
          grid-template-columns: auto 130px
          margin: '-4px -4px -8px -4px;'
        cards:
          - type: custom:mushroom-template-card
            primary: |-
              {% from 'weather.jinja' import temperature_current %}
              {{- temperature_current( entity) -}}
            secondary: '{{- states( entity) | capitalize -}}'
            icon: |-
              {% from 'weather.jinja' import icon %}
              {{ icon(entity, 'now') }}
            entity: weather.home_2
            tap_action:
              action: call-service
              service: automation.trigger
              target:
                entity_id: automation.family_room_default_on
              data: {}
            hold_action:
              action: call-service
              service: automation.trigger
              target:
                entity_id: automation.family_room_default_off
              data: {}
            icon_color: |-
              {% from 'weather.jinja' import icon_color %}
              {{ icon_color(entity, 'now') }}
            fill_container: true
            layout: horizontal
            multiline_secondary: false
            double_tap_action:
              action: none
            card_mod:
              style: |
                :host([dark-mode]) {
                  background: rgba(var(--rgb-primary-background-color), 0.025);
                }
                :host {
                  background: rgba(var(--rgb-primary-text-color), 0.025);
                  --mush-icon-size: 76px;
                  height: 66px;
                  margin-left: -18px !important;
                  margin-right: -146px !important;
                }
          - type: vertical-stack
            cards:
              - type: custom:mushroom-chips-card
                chips:
                  - type: template
                    entity: weather.home_2
                    icon: |-
                      {% from 'weather.jinja' import icon %}
                      {{- icon( entity, 0) -}}
                    content: |-
                      {% from 'weather.jinja' import temperature_hilow %}
                      Today: {{- temperature_hilow( entity, 0) -}}
                    card_mod:
                      style: |
                        ha-card {
                          box-shadow: none !important;
                        }
              - type: custom:mushroom-chips-card
                chips:
                  - type: template
                    entity: weather.home_2
                    icon: |-
                      {% from 'weather.jinja' import icon %}
                      {{- icon( entity, 1) -}}
                    content: |-
                      {% from 'weather.jinja' import temperature_hilow %}
                      Tomorrow: {{- temperature_hilow( entity, 1) -}}
                    card_mod:
                      style: |
                        ha-card {
                          box-shadow: none !important;
                          margin-top: -15px !important;
                        }
  - type: custom:mushroom-chips-card
    chips:
      - type: template
        content: >-
          {{ as_timestamp(states('sensor.sun_next_setting')) |
          timestamp_custom('%I:%M %p') }}
        icon: mdi:weather-sunset-down
      - type: template
        content: >-
          {{ as_timestamp(states('sensor.sun_next_rising')) |
          timestamp_custom('%I:%M %p') }}
        icon: mdi:weather-sunset-up
      - type: spacer
      - type: entity
        entity: sensor.moon_phase
    card_mod:
      style: |
        ha-card {
          --chip-box-shadow: none;
          --chip-background: none;
          --chip-spacing: 0;
        }
        :host([dark-mode]) {
          # background: rgba(var(--rgb-primary-background-color), 0.2);
        }
        :host {
          background: rgba(var(--rgb-primary-text-color), 0.025);
        }

4 Likes

I’m having a strange issue with the select-card. If I add inside a stack the options don’t show, they are cropped. If I place alone, they show perfect. Any way of fixing this please?

I’m tried to create animation but i have a problem, when text scrolling from down to up make overlap with primary text

immagine

it’s possible block scrolling under secondary field?

  - type: custom:mushroom-template-card
    picture: /local/channel/rai3.png
    primary: '{{ state_attr(''sensor.rai3'',''name'') }}'
    secondary: '{{ state_attr(''sensor.rai3'', ''description'') }}'
    tap_action:
      action: call-service
      service: script.toggle
      service_data:
        entity_id: script.panasonic_3
    card_mod:
      style:
        mushroom-state-info$: |
          .secondary {
            {{ 'animation: scroll-text 10s linear infinite;' }}
            white-space: normal !important;
            overflow: visible !important;
            display: -webkit-box;
            -webkit-line-clamp: 4; 
            -webkit-box-orient: vertical;
           }
          @keyframes scroll-text {
            from {
            -moz-transform: translateY(100%);
            -webkit-transform: translateY(100%);
            transform: translateY(100%);
            }
            to {
            -moz-transform: translateY(-100%);
            -webkit-transform: translateY(-100%);
            transform: translateY(-100%);
            }
          }
        .: |
          ha-card {
            overflow: hidden;
          }

Thanks in advanced

Happy to assist! Looks great!! :clap:

@FilipeOS Please post the code.

This is most likely fixable by defining the width of the columns.

1 Like

@josdegroot If you are using the following settings in the after: your badge and after: image are in the same location and on top of each another.

top: -11%;
right: -11%;

This switches the image to the left side.

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

image

I changed the badge icon for effect.

3 Likes

HA card problem

I have a problem what used to look nice is no more. I fetched this nice looking dashboard from @makeitworktech on youtube and its been working great for several months. I guess it changed after the updates of card-mod and HA but i can’t say for sure. I’m still pretty new to HA and been reading a lot in this thread and on the net to find a solution to once again remove the borders and boxes but can’t get it to work.
So now I want to give it a shot to see if some experts in here can see something in my yaml, that needs to be changed.

type: custom:stack-in-card
mode: vertical
cards:
  - type: custom:stack-in-card
    mode: horizontal
    cards:
      - type: custom:mushroom-entity-card
        entity: sensor.motion_livingroom_temperature
        name: Stue
        icon_type: none
        tap_action:
          action: navigate
          navigation_path: Stue
        style: |
          ha-card { 
          background-color: rgba(0,0,0,0);
          box-shadow: none;
          border-style: hidden;
          }
      - type: custom:mushroom-chips-card
        chips:
          - type: light
            entity: light.livingroom_all
            icon: mdi:lightbulb-group
            use_light_color: false
        alignment: end
    style: |
      ha-card { 
      background-color: rgba(0,0,0,0);
      box-shadow: none;
      border-style: hidden;
      }
  - type: custom:mini-graph-card
    entities:
      - sensor.motion_livingroom_temperature
    show:
      state: false
      name: false
      icon: false
    points_per_hour: 1
    hours_to_show: 48
    color_thresholds:
      - value: -18
        color: '#800080'
      - value: 10
        color: '#0000FF'
      - value: 21
        color: '#008000'
      - value: 23
        color: '#FFFF00'
      - value: 24
        color: '#FF6600'
      - value: 25
        color: '#FF0000'
      - value: 26
        color: '#FF69B4'
    style: |
      ha-card { 
      background-color: rgba(0,0,0,0);
      box-shadow: none;
      border-style: hidden;
      }

Does anyone knows if the code in configuration.yaml changed? A lot of my integrations where move directly to the UI and therefore i’m not sure if it understand this anymore. Developer options says “ready” and the documentation for the card-mod didn’t change either. Since it have been working I wonder if it just not read the card-mod correctly and that it the error.

frontend:
  extra_module_url:
    - /local/community/lovelace-card-mod/card-mod.js   

Card Mod had a breaking change in version 3.40

style: | no longer works without card_mod:

This is the correct method.

card_mod:
  style: |
1 Like

It’s hard to know without seeing your code, but I believe you need…

card_mod:
  style: |
    ha-card{
      overflow: visible !important;
    }

… within the card_mod for the stack-in-card.

MrGrey.

Looked so much and it was right in front of me :sweat_smile:
Thanks a million!

Hi everyone

I have a Hoval homevent house ventallation system which I can control via MQTT (integration is MQTT template sensors in the yaml)
Everything works as expected, my only struggle is the mushroom-humidifier-card dispaying the configured target humidity as a secondary info.

This is what I have at the moment:

Secondary info on both cards is on the default, which should be state.

Dev tools for the entites:

I understand that the state is literally ‘on’ and the ‘50%’ target humidity is only in the attributes, but the same is true for the fan control too, and that picks up the 50% percentage.

If I interpret the source code correctly, it should pick up the humidity?
https://github.com/piitaya/lovelace-mushroom/blob/dc54101a9b787b55794eee38620886306deba318/src/cards/humidifier-card/humidifier-card.ts#L119

If anyone has any hints if I’m doing someething wrong please let me know

Thanks