Mushroom Cards Card Mod Styling/Config Guide

tomg1970 · August 11, 2024, 7:49am

Hello what have I done wrong because the text color does not change ?

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;
            --card-primary-color: rgb(255,0,0) !important;
            --card-secondary-color: rgb(0,255,0) !important;
          }

dimitri.landerloos · August 11, 2024, 12:35pm

Does seem like that might have been broken with a recent update. Strange. Ill see if i can find the cause. But it can be achieved like this:

card_mod:
  style: |
    .title {
      color: red !important;
    }
    .subtitle {
      color: blue !important;
    }

robert.boccia · August 12, 2024, 4:01am

Template card font size doesn’t work for me I have card background colour set with style | ha card, so won’t let me add the mushroom config, doesnt recognise font size text statement, any ideas?

Frosty · August 12, 2024, 6:31am

how do you mean, what else are you trying to change?

card_mod:
  style:
    mushroom-state-info$: |
      .container {
        --card-secondary-font-size: 20px;
        --card-primary-font-size: 20px;
      }
    .: |
      ha-card {
        background: rgba(0,0,0,0);
      }

chammock · August 12, 2024, 11:54am

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

dimitri.landerloos · August 12, 2024, 12:12pm

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

im not the only one working on it either:

chammock · August 12, 2024, 12:31pm

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

tomg1970 · August 12, 2024, 4:35pm

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

Pjarbit · August 12, 2024, 6:25pm

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
      }

dimitri.landerloos · August 12, 2024, 6:28pm

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?

tomg1970 · August 14, 2024, 6:01am

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…)

dimitri.landerloos · August 14, 2024, 2:36pm

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

?

dimitri.landerloos · August 14, 2024, 2:42pm

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

tomg1970 · August 14, 2024, 3:12pm

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

iorifly · August 15, 2024, 3:14am

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?

Frosty · August 15, 2024, 7:31am

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

Pjarbit · August 15, 2024, 2:54pm

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!

iorifly · August 15, 2024, 3:36pm

Thank you! It worked!!!

flyize · August 15, 2024, 8:15pm

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?

Frosty · August 15, 2024, 9:06pm

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