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

mtrista · September 21, 2024, 11:18am

Is there no way to add a name to the Chips? Home Assistant copied the Mushroom chips in the last few updates as Badges, and they added names, which seem to be missing from the Mushroom chips.

ciddi89 · September 21, 2024, 1:07pm

I also miss this function and opened an issue on Github a few weeks ago. But still no response from the developers. It’s unfortunately only possible for mushroom template chips card in the badge area.

github.com/piitaya/lovelace-mushroom

[Feature]: Add label options to mushrooms (template) chips card

opened 01:07PM - 31 Aug 24 UTC

ciddi89

enhancement

### Requirements - [X] I have updated Mushroom to the latest available version …- [X] I did a search to see if there is a similar issue or if a pull request is open. ### Is your feature request related to a problem? Not really, but it would be very helpful for a consistent design. ### Describe the solution you'd like If you add mushroom template chips card in the badge section, it is possible to add a label to it, but it is not possible to add the label if the template chips card is in another section. So I would really appreciate it, if it is also possible in the other places. ### Describe alternatives you've considered _No response_ ### Additional context _No response_

fela93 · September 22, 2024, 3:39pm

hey

I want to achieve next:
I have created a timer in helper
instead of “ON” and “OFF” I want to see a timer countdown

this is my mushrrom card:

type: custom:mushroom-template-card
primary: Parents heater
secondary: '{{ ''OFF'' if states(entity) == ''on'' else ''ON'' }}'
icon: mdi:patio-heater
entity: switch.heaterparentsbathroom
fill_container: false
layout_options:
  grid_columns: 2
  grid_rows: auto
icon_color: '#D8A25E'
multiline_secondary: true
card_mod:
  style:
    mushroom-shape-icon$: |
      .shape {
        --shape-color: rgb(29, 52, 71) !important;
        --icon-symbol-size: 45px;
        --icon-size: 60px;
      }
    .: |
      ha-card {
        box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.66);
        background: {% if states('switch.heaterParentsBathRoom') == 'on' %} #F7F9F2 {% endif %};
        --card-primary-color: {% if states('switch.heaterParentsBathRoom') == 'on' %} black {% endif %};
        --card-secondary-color: {% if states('switch.heaterParentsBathRoom') == 'on' %} black {% endif %};
      }

Frosty · September 22, 2024, 7:00pm

I would suggest using

easier to customise and it’s usable with mushroom

fela93 · September 22, 2024, 7:02pm

I have tried, no sucess
when i use it I break my view type “Sections”

amandaworkman11 · September 23, 2024, 12:30am

Is it possible to use emojis in place of an icon with CHIPS cards? It’s not working when I use the google noto or the emoji database

Twig_Bark · September 23, 2024, 4:30pm

Can i add power wattage to display together with chip card icon?
I understand this is for sure to work with mushroom template card but maybe also with chip card?

Frosty · September 23, 2024, 4:35pm

type: custom:mushroom-chips-card
chips:
  - type: template
    card_mod:
      style: |
        ha-card:before {
          font-size: 21px;
          content: '💩';
          margin-left: 10px;
        }
    content: Testing

Deninho91 · September 24, 2024, 5:14pm

Need your help again. The Code worked Perfect. Also the high and so was awesome.
Sinne a few days, the whole Card mod will Not be shown… there was no update, But Not everything is mal… do you have an idea?

Picture befor and After:

Frosty · September 24, 2024, 5:43pm

I have similar issues with my own dashboard that I am trying to work out what’s going on, I don’t believe I’ve done an update either. can you post your full code for that view and I’ll take a look for you

Deninho91 · September 24, 2024, 6:57pm

Good/Bad to hear that I am Not the only one…

Sure:


kiosk_mode:
  non_admin_settings:
    hide_header: true
    hide_sidebar: true
wallpanel:
  enabled: true
  hide_toolbar: false
  idle_time: 1
  image_url: /
  cards:
    - type: custom:clock-weather-card
      entity: weather.openweathermap
      sun_entity: sun.sun
      temperature_sensor: sensor.temperature_30
      weather_icon_type: line
      forecast_rows: 5
      locale: de
      time_pattern: HH:mm
      time_format: 24
      date_pattern: cccc, d. MMM yyyy
      hide_today_section: false
      hide_forecast_section: true
      hide_clock: false
      hide_date: false
      card_mod:
        style: |
          ha-card {
            zoom: 400%;
            font-size: 8px;
            width: 250%;
            margin-left: -115%;
            margin-top: 70%;
            background-color: transparent;
            text-shadow: 1px 1px 3px black;
            border: transparent;
          }
    - type: custom:mushroom-template-card
      primary: Pooltemperatur
      secondary: '{{states("sensor.pooltemperatur")}} °C'
      icon: mdi:fan
      icon_color: |
        {% if is_state('climate.inverter_pool_warmepumpe','heat') %} 
          orange
        {% else %} 
          grey
        {% endif %}
      card_mod:
        style:
          mushroom-state-info $: |
            .container {
              --card-primary-font-size: 25px !important;
              --card-primary-color: black;
              --card-primary-line-height: 28px;
              --card-secondary-font-size: 25px;
              --card-secondary-color: black;
              --card-secondary-line-height: 28px;
              flex-direction: row !important;
              align-items: baseline !important;
              gap: 30px;
              {% set state = states('sensor.pooltemperatur') | int %}
              {% if state <= 23 %} 
                --card-secondary-color: blue;
              {% elif state <= 27 %}
                --card-secondary-color: orange;
              {% elif state <= 32 %}
                --card-secondary-color: red;
              {% else %}
                --card-secondary-color: black;
              {% endif %}
              
            }
          mushroom-shape-icon$: |
            .shape {
              --shape-color: transparent;
            }
          .: |
            ha-card {    
              zoom: 120%;
              font-size: 15px%;
              margin-left: 160%;
              margin-top: -170%;
              width: 85%;
              height: fit-content !important;
              background-color: transparent;
              opacity: '';
              border: transparent;

            }

            ha-state-icon {
              --icon-symbol-size: 31px;
              {{ 'animation: spin 2s linear infinite;' if is_state('climate.inverter_pool_warmepumpe','heat') }}
                            
            }  
    - type: custom:mushroom-template-card
      primary: PV Anlage
      secondary: >-
        {{"\U000026A1"}}{{
        "{0:_.0f}".format(states('sensor.ala001022111073_instantaneous_generation')
        | int) | replace("_", ".") }}W {{"\U0001F50B"}} {{
        states('sensor.ala001022111073_instantaneous_battery_soc') | float(0) |
        round(0) }}%
      icon: mdi:solar-power-variant-outline
      entity: ''
      picture: ''
      fill_container: true
      multiline_secondary: false
      layout: horizontal
      icon_color: green
      card_mod:
        style:
          mushroom-state-info$: |
            .container {
             --card-primary-font-size: 23px;
             --card-primary-color: black; 
             --card-secondary-font-size: 40px;
             --card-secondary-color: black;
             --card-primary-line-height: 30px;
             --card-secondary-line-height: 30px;
             flex-direction: row !important;
             align-items: baseline !important;
             gap: 3px; 
             '--state-color: none !important;   
             {% set state = states('sensor.pooltemperatur') | int %}
             {% if state <= 23 %} 
               --card-secondary-color: blue;
             {% elif state <= 27 %}
               --card-secondary-color: yellow;
             {% elif state <= 30 %}
               --card-secondary-color: red;
             {% else %}
               --card-secondary-color: black; 
             {% endif %} '
            }
          mushroom-shape-icon$: |
            .shape {
             --shape-color: none !important;
            }
          .: |
            ha-card {
              zoom: 120%;
              font-size: 15px%;
              margin-left: 160%;
              margin-top: -160%;
              width: 180%;
              height: fit-content !important;
              background-color: transparent;
              opacity: '';
              border: transparent;
            }
            ha-state-icon {
              --icon-symbol-size: 25px;
            }

Frosty · September 24, 2024, 8:05pm

I’ve had a look but unfortunately I can’t help to much as I don’t run kiosk/or a screen as big as yours.
as for the layout I would play around with the above margins until you get it back to the way you had it.

sorry I couldn’t fix it for you

EDIT:
I believe the problem lies with this it’s not working as it should

flex-direction: row !important;

it’s no longer on the same line as before

Deninho91 · September 24, 2024, 8:22pm

This could also be, Yes, But as you See, the whole points in Card mod, Like Color, Font Are Not shown correctly anymore… this is What I do Not understand, because i did not change something…

Deninho91 · September 24, 2024, 8:25pm

What you mean with, Bit Longer on the Same line?

The Code is sent is the Same as befor.
Als Card Mod Are used and the result was Picture 1. Picture 2 is now

Frosty · September 24, 2024, 8:30pm

I meant in the first picture you have secondary next to primary on the same line. second picture the secondary is underneath.

I also noticed you have a duplicated

--card-secondary-color: black;

and

{% set state = states('sensor.pooltemperatur') | int %}
           {% if state <= 23 %} 
             --card-secondary-color: blue;
           {% elif state <= 27 %}
             --card-secondary-color: yellow;
           {% elif state <= 30 %}
             --card-secondary-color: red;
           {% else %}
             --card-secondary-color: black; 
           {% endif %}

Deninho91 · September 24, 2024, 8:34pm

Yes this is correct, But it worked with that Code… hm

Yes is also do Not know why it is now in the other line😭

Frosty · September 24, 2024, 8:41pm

I remember reading further up someone had a similar issue with

card_mod:
  style:
    mushroom-state-info$: |
      .container {
        --card-secondary-color: black;
      }

not working.

one thing I noticed aswell if you remove

{% set state = states('sensor.pooltemperatur') | int %}
           {% if state <= 23 %} 
             --card-secondary-color: blue;
           {% elif state <= 27 %}
             --card-secondary-color: yellow;
           {% elif state <= 30 %}
             --card-secondary-color: red;
           {% else %}
             --card-secondary-color: black; 
           {% endif %}

a few issues resolve itself, I am only guessing here because like I said I can’t replicate your display size

Deninho91 · September 25, 2024, 3:38am

Hm I checked it here but I can Not find the Post you talked about…

Every Change I do, nothing will be Changed…

Deninho91 · September 25, 2024, 5:57pm

You Are Right, once it is removed, it Looks better and needs Several changes.

But where I should add these points?

How can I use it, as Wanted?

Stenbumling · September 26, 2024, 9:02am

What am i missing?
The animation is not working as intended.

      - type: custom:mushroom-template-card
        layout: vertical
        tap_action:
          action: navigate
          navigation_path: house
        icon: mdi:home-assistant
        icon_color: blue
        primary: ""
        secondary: Home
        card_mod:
          style: |
            ha-state-icon {
              animation: boing 3s ease infinite;
                transform-origin: 50% 90%;
              }
              @keyframes boing {
                0% { transform: scale3d(1, 1, 1); }
                7% { transform: scale3d(1.25, 0.75, 1); }
                10% { transform: scale3d(0.75, 1.25, 1); }
                12% { transform: scale3d(1.15, 0.85, 1); }
                16% { transform: scale3d(0.95, 1.05, 1); }
                19% { transform: scale3d(1.05, 0.95, 1); }
                25% { transform: scale3d(1, 1, 1); }
              }
          .: |
            ha-card { 
              background: var(--card-background-color);
              #width: 66px;
              border-radius: 30px;
              margin-left: auto;
              margin-right: auto;
              margin-bottom: 2px;
            }