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

[LiQuid_cOOled]

your icon color says none. We have to move your if statement up there. Give me a minute.

[flrnwrzl]

yes because i want it black.
thanks please help

[LiQuid_cOOled]

This is what I see with this code.

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%}
           }

[SoulAssassin (Anton Stolov)]

Guys, 'bout chips, it possible to get animate?

[flrnwrzl]

and this is what I see
what could it be?

[LiQuid_cOOled]

Check out this

Mushroom Cards Card Mod Styling/Config Guide

This topic is technically a cross post from a reply to the Mushroom Card Topic found here: Part 1. But it was suggested in a comment to post it here as a guide instead. Below info is true as of Mushroom Version 3.2.2 and Card Mod Version 3.4.1 (you can also optionally use a theme like i do. i use Minimalist Version 1.3.7). links to each post: Alarm Control Panel Card Chips Card Climate Card Cover Card Entity Card Fan Card Humidifier Card Number Card Lock Card Light Card Media Card …

[LiQuid_cOOled]

add !important; after the color black and do you have a theme installed?

[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