Mushroom Cards Card Mod Styling/Config Guide

Community Guides
, ,
1049

Hi all! I have a mushroom-chips-card. What is code for change background colors:
if entity state is A , then color is red; if if entity state is b , then color is blue …
thank you.
now i use this code:

card_mod:
          style: |-
            ha-card {
                border: var(--supplies-button-border) !important;
                justify-content: center !important;
                {% set bl = states(config.entity) | int %}              
                {% if bl == 'Carta e cartone' %}
                  --chip-background: rgb(255,179,67);
                {% elif bl == 'Plastica') %}
                  --chip-background: blue;
                {% else %}
                  --text-color: var(--supplies-button-text-color-off);
                  --card-mod-icon-color: var(--supplies-button-text-color-off);
                  --chip-background: var(--supplies-button-color-off);
                {% endif %}
              }
1050

Maybe now is ok:

    card_mod:
      style: |-
        ha-card {
            border: var(--supplies-button-border) !important;
            justify-content: center !important;
          {% if (states(config.entity) == 'Carta e cartone') %}
            --chip-background: rgb(255,179,67);
          {% elif (states(config.entity) == 'Plastica e metalli') %}
            --chip-background: blue;
          {% else %}
            --text-color: var(--supplies-button-text-color-off);
            --card-mod-icon-color: var(--supplies-button-text-color-off);
            --chip-background: var(--supplies-button-color-off);
          {% endif %}
        }
1053

Hi Dimitri,

About the number card. Is there a list with the available display_modes ?

At github docs we don’t have the “display_mode” as an option for number card.
“lovelace-mushroom/docs/cards/number.md at 3d94e92bbad748e0ec332407bb6668d74ce99502 · piitaya/lovelace-mushroom · GitHub”

And my second question: is there an hybrid display mode for the number card: a slider with buttons and the value?
I think about this to finelly adjust an slider with large ranges.
Roughly adjust with the slider and the final touch with the buttons.

Thanks.

1054

3 questions I did not get managed…

  1. I have a mushroom template card with this code
                                    ha-card {        
                                      {% if is_state('light.gevel','on') %}
                                      background-color: rgb({{ states("input_text.kleur_iconen_bleker")}}) !important;
                                      {% endif %}
                                      }

it looks like the card is staying white, and is not getting the card color. what is wrong ?

  1. I have a background icon I want removed from a mushroom entity card…
              card_mod:
                style: | 
                  ha-card {
                    box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.3) !important;
                    background-color: rgba({{ states("input_text.kleur_iconen")}},0.2) !important;
                    margin: 15px ;
                    width: 200px ;
                    border-radius: 8px !important;
                    margin-bottom: 30px;                              
                    }
                  mushroom-shape-icon$: |
                    .shape {
                      background: transparent !important;
                    }

this is not working for me…

  1. I have a mushroom template card where I want it aligned on the right. How do I do that ?

                                     ha-card {
                                     box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.3) !important;
                                     background-color: rgb({{ states("input_text.kleur_iconen_bleker")}}) !important;
                                     width: 160px;
                                     height:60px !important;  
                                     border-radius: 8px !important;   
                                     ha-card-border-radius: '8px'
                                    right: 30px;
                                   }