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

[flrnwrzl]

the important changes nothing.
no theme installed

[LiQuid_cOOled]

One last shot

type: custom:mushroom-template-card
primary: |
  {{states('sensor.inverter_1_yield_today')}} kW
secondary: Heute
icon: mdi:lightning-bolt
icon_color: black
fill_container: true
entity: sensor.inverter_1_yield_today
tap_action:
  action: more-info
card_mod:
  style: |
    ha-card { 
          border: none; 
          border-radius: 25px; 
          --icon-symbol-size: 35px;
          --card-primary-color: black !important;  
          --card-secondary-color: black !important; 
          --card-secondary-font-weight: 400; 
          transition: 0s;
          background: 
            {% if states('sensor.inverter_1_bt2240102870_realtime_power') < '0.001'%}
            rgb(255, 255, 190)
            {% elif states('sensor.inverter_1_bt2240102870_realtime_power') >'0.001'%}
            rgb(255, 255, 80)
            {%endif%}
           }
           @media screen and (max-width: 400px) {
                ha-card {
                 --card-primary-color: black !important;  
                 --card-secondary-color: black !important; 
                }
                  }

You should also be able to clean up you background if statement

background: 
            {% if states('sensor.inverter_1_bt2240102870_realtime_power') < '0.001'%}
            rgb(255, 255, 190)
            {% else %} 
            rgb(255, 255, 80)
            {% endif %}

[flrnwrzl]

no luck! still the same

[LiQuid_cOOled]

Is your PC still correct? Ensure you are on Core 2024.2.1 and Mushroom 3.4.2

[flrnwrzl]

yes as u said. all up to date.
only on template card since update yesterday

[LiQuid_cOOled]

Unfortunately I’m out of possible answers. Its working fine on my PC and my android.

[Asen]

I like it. Would you share your code?

[bandit79]

For me, this works on Template Card

--primary-text-color: black !important;

[SoulAssassin (Anton Stolov)]

Oh man, I saw it but miss it Dope! Thanks!

[LiQuid_cOOled]

@bandit79

--primary-text-color is going to work because card-primary color: uses it, but it can also change a lot of other text in your dashboard if you use --primary-text-color:

[SoulAssassin (Anton Stolov)]

@LiQuid_cOOled I have one more q, if a chip have a text, it possible animate icon only and text leave is in normal state?

[flrnwrzl]

@bandit79

ext-color: black !important;

this gives me grey color in the APP on Android

[tombom (tom)]

hi
i am trying to scale the icons of a mushroom chip card with templates (i.e. have bigger icons than the default). i have tried multiple solutions suggested here with card-mod and without but either i am too daft or none of them work for my scenario (snippet of the actual card):

type: custom:mushroom-chips-card
chips:
  - type: template
    entity: switch.tasmota
    icon_color: '{{ ''orange'' if states(''switch.tasmota'') == ''on'' else ''red'' }}'
    icon: mdi:power-socket-de
    content: LEDs

this works perfectly fine but the icons are ever so small on the phone.

any help would be much appreciated

[SoulAssassin (Anton Stolov)]

U can set size of chip with this code and your adjustments:

      style: |
        ha-card {
          justify-content: center;
          --chip-icon-size: 64px;
          --chip-height: 64px;
          width: var(--chip-height) !important;
          border-radius: 50% !important;
          --chip-background: rgba(var(--rgb-green), 0.2);
        }

And look at this my post Mushroom Cards - Build a beautiful dashboard easily 🍄 - #10113 by SoulAssassin, today @LiQuid_cOOled gived a best tip for my case, as I understood, u have similiar issue.

[tombom (tom)]

thank you very much! that works splendidly

[_Mitch07]

I’m also interested in the .yaml code of the custom mushroom-template-card you made for the washing machine. Looks great.
Can you share the total .yaml code with us please

[Markus99 (Mark)]

tap_action: using a template

Possible to do this? This is my code, but doesn’t appear to be working:

  de_mushroom_entity:
    card:
      type: custom:mushroom-template-card
      primary: '[[name]]'
      secondary: ''
      icon: '[[icon]]'
      entity: '[[entity]]'
      icon_color: '{{ ''amber'' if is_state(''[[entity]]'', ''on'') else ''#44739e'' }}'
      layout: vertical
      tap_action:
        action: >-
          {% if 'sensor' in [[entity]] %}
            more-info
          {% else %}
            toggle
          {% endif %}
      double_tap_action:
        action: more-info

Worth noting, I’m also using the ‘decluttering-card’

Thx!

[image969 (James Scialdone)]

Hello,

Can someone tell me how to make a mushroom card wider?

I have a vertical layout Im doing for my daughter’s ipad. Full screen is a bit much and distorted, but veritcal layout isn’t quite wide enough. Is there a way to do this based off of a percentage?

[LiQuid_cOOled]

This question seems more appropriate for the decluttering topic

Lovelace: Decluttering Card

Hey, I’ve created a new card that helps you declutter your LL config if you use multiple times the same block of cards with small differences (like an entity for example) to display things in LL. Visit github for installation instructions, up to date documentation and troubleshooting guide [GitHub Release] [GitHub Activity] [custom_updater] [Project Maintenance] decluttering-card This card is for Lovelace on Home Assistant. We all use multiple times the same block of configuration acros…

[LiQuid_cOOled]

explore the @media screen and (max-width: 600px) { settings.

It’s used is to apply different styles for different media types/devices and will not adjust your PC settings.

An example of it’s use

        card_mod:
            style: |
                ha-card {
                  --icon-size: 40px;
                  --icon-symbol-size: 35px ;
                }
               
                @media screen and (max-width: 600px) {
                ha-card {
                  --icon-size: 60px;
                  --icon-symbol-size: 45px ;
                }
                 }