Mushroom Cards Card Mod Styling/Config Guide

Should this work with custom:mushroom-template-badge. With the introduction of the replacement for Badges I am trying to get a simular behaviour where the outline or background colour changes based on the state. When I try and add card_mod to the code I get the error

At path: card_mod – Expected a value of type never, but received: `null

You already get:

when using card mod directly against a Chip in the Chip card, so that specifically is not an indication that it isnt working. however i have been trying to apply card mod to the new badges + the mushroom template badge, and so far ive been entirely unsuccesful. thats why the guide is not updated to the newest version yet :slight_smile:

im not the only one working on it either:

thanks for the reply, sometimes its just good to know you are not the only one. I have been trying various examples but without any success and that is the only error message I can share. I will wait and see if the guide gets updated

Thank you for the feedback. Yes, the font color alone works. In connection with the other styles, however, I can’t get the font color to change.

ha-card { ***
****-fontsize

Im really trying to figure this out, but it makes little sense to me of what goes where. From using your examples I have teased out the following code. I would like to give a little more headroom above the icon (making the card a little bigger) and make the icon background transparent. Here is my code, and thank you for the help and replies you have already given!

type: custom:mushroom-fan-card
entity: fan.pergola_ceiling_fan_2
icon_animation: true
primary_info: name
fill_container: true
show_percentage_control: true
name: Patio Fan
layout: vertical
show_oscillate_control: false
secondary_info: state
collapsible_controls: false
icon: phu:fan-blade
card_mod:
  style:
    mushroom-fan-percentage-control$: |
      mushroom-shape-icon$: |
      .shape {
        --shape-color: transparent !important;
      }
      mushroom-slider {
          --main-color: #FFBF00 !important;
          --bg-color: #d1eced !important;
        }
    .: |
      mushroom-shape-icon{
        --icon-color: #FFBF00 !important;
        --shape-color: transparent !important;
        --icon-symbol-size: 55px
      }  

Sorry but i really dont know what this means? your code seems to be missing? and can you elaborate on what is not working please?

I can change the color alone. But if I want to change the complete style from above, I can’t get it to work all together. (color/size/margin…)

image

type: horizontal-stack
cards:
  - type: custom:mushroom-title-card
    title: ▹ Tv - Watch
    alignment: left
    subtitle: ''
    card_mod:
      style:
        mushroom-state-info$: |
          .container {
            --card-secondary-font-size: 8px;
            --card-primary-font-size: 10px;
          }
        .: |
          ha-card {
            border-radius: 6px;
            font-variant: small-caps;
            height: 49px !important;
            background-color: rgb(166,166,161, 0.3) !important;
            padding-left: 10px !important;
            padding-top: 10px !important;
            --title-font-size: 17px !important;
            --subtitle-font-size: 17px !important;
          }
          .title {
            color: red !important;
          }
          .subtitle {
            color: blue !important;
          }

?

does this help?

card_mod:
  style:
    mushroom-fan-percentage-control$: |
      mushroom-slider {
        --main-color: #FFBF00 !important;
        --bg-color: #d1eced !important;
      }
    mushroom-shape-icon$: |
      .shape {
        background: transparent !important;
      }
    .: |
      mushroom-shape-icon{
        --icon-color: #FFBF00 !important;
        --icon-symbol-size: 55px;
      }
      mushroom-state-item {
        margin-top: 20px;
      }
2 Likes

Many many thanks Dimitri. I have see my error.
Your´e the best

Guys, I need help. I’m trying to change the color of the card’s border according to the chosen light color.

Chatgpt helped here:

type: custom:mushroom-light-card
entity: light.yeelight_color4_0x17799bb6
show_brightness_control: true
show_color_temp_control: true
show_color_control: true
collapsible_controls: true
styles:
card:
- box-shadow: |
[[[
const rgbColor = states[‘sensor.rgb_color_sensor’].state;
if (rgbColor) {
// Garantir que o valor de rgbColor está no formato correto
const [r, g, b] = rgbColor.replace(‘rgb(’, ‘’).replace(‘)’, ‘’).split(‘,’).map(Number);
return 0px 0px 10px 3px rgba(${r}, ${g}, ${b}, 0.5);
}
// Valor de fallback se rgbColor não estiver disponível
return ‘0px 0px 10px 3px rgba(0, 0, 0, 0.5)’;
]]]

However, I get this error:

O editor visual não é compatível com esta configuração:

  • At path: styles – Expected a value of type never, but received: [object Object]

Você ainda pode editar sua configuração como YAML.

Note: I created this sensor to get the entity’s RGB value:

sensor.rgb_color_sensor

It accepts a fixed shadow color, but it doesn’t accept dynamic ones. Does anyone have any idea how to get around this?

I think you need to understand the basics first because chatgpt is wrong and I believe over complicated it?

type: custom:mushroom-light-card
entity: light.bar
card_mod:
  style: |
    ha-card {
      border: 2px solid {% if is_state('light.bar', 'on') %}
                    rgb({{ state_attr('light.bar', 'rgb_color')[0] }}, 
                        {{ state_attr('light.bar', 'rgb_color')[1] }}, 
                        {{ state_attr('light.bar', 'rgb_color')[2] }})
                    {% else %} transparent
                    {% endif %};
    }

next time please format your code inside preformatted text under options cog

1 Like

Thank you for your help. I am struggling to find a good explanation of what portions of design are in the root, versus not. When do we use $ or .: I want to add padding onto a card and have tried it in different positions within the card code. Wondering if there is a reference you would recommend. I have been through 100’s of cards looking for similar issues and solutions.

type: custom:mushroom-fan-card
entity: fan.bed_room_ceiling_fan
icon_animation: true
primary_info: name
fill_container: false
show_percentage_control: true
name: BEDROOM FAN
layout: vertical
show_oscillate_control: false
secondary_info: state
collapsible_controls: false
icon: phu:fan-blade
padding: 10px
card_mod:
  style:
    height: 90px
    width: 242px
    mushroom-fan-percentage-control$: |
      mushroom-shape-icon$: |
      .shape {
        --shape-color: transparent !important;
      }
      mushroom-slider {
          --main-color: #FFBF00 !important;
      }
    .: |
      mushroom-shape-icon{
        --icon-color: #FFBF00 !important;
        --shape-color: transparent !important;
        --icon-symbol-size: 60px
      }

I know for sure this code is wrong, but it was a hail mary attempt at a solution. I need to undersand where to put height and width, and padding. Thanks in advance for all your help. And if there is a reference, so I dont have to bother this forum, I would appreciate that too!

Thank you! It worked!!!

I’ve got an AQI chip that I would like the background to change color based on the numbered state. So <50 would be green, 51-100 would be yellow, etc. What would that look like?

this should get you started

type: custom:mushroom-template-card
primary: ''
secondary: ''
icon: mdi:chip
icon_color: |-
  {% set aqi = states('sensor.aqi') | int %}
  {% if aqi < 50 %}
   green
  {% else %}
   yellow
  {% endif %}
1 Like

Oh it has to be a template card!

it does if you want to use standard mushroom card.
or you can use card_mod which card did you want to use?

No, template is fine. How do I display the state of sensor.aqi in the ‘chip’? I feel like I should know this, but its been a long time since I played around with mushroom.

{{ states('sensor.aqi') }}