Mushroom Cards Card Mod Styling/Config Guide

i dont run the beta no.

aw, thanks, too bad…
Ill be back in a week then :wink:

is it related to the badges or the mushroom template badges perhaps? i am excited to start working with them soon :wink:

No but those are nice indeed .(and with a little custom hack we can still use the original badges)

I’ll link my question which is about Tiles and the mods to the features that stopped working

edit

the fix of my problem was easy after all, Dom changed inside Tile card, and the features require an extra step now, I’ve documented it here if you are interested

Hmmm, that is annoying. cant see a reason for that change other than maybe to support the “Custom Features” better?

Just so you know i havent forgotten about this question. Im just waiting till i have the time to give a proper in depth response showing my method on this.

2 Likes

Hello I have the following number-card:

type: custom:mushroom-number-card
entity: number.evse_intensitat
fill_container: false
primary_info: name
secondary_info: none
icon_type: none
display_mode: slider
tap_action:
  action: none
hold_action:
  action: none
double_tap_action:
  action: none
name: I want this to be code <------
visibility:
  - condition: state
    entity: switch.evse_dynamic_intensity_modulation
    state: 'off'

And I would like the name to be a string composed by some text and states, f.e.:
Text [{{ states('input_boolean.deshumidificador_funcionant') }}]

For cards like button-card
I can do stuff like:

name: |
  [[[
    if whatever
       return "Text" + state['mystuff'].state.toStrin()  + "some more text".
    else
       return "Other Text" + state['mystuff2'].state.toStrin() + "some more text2".      
  ]]]

But In this case I haven’t figured it out how to compose text for name.
Any hints?

You cant template a name outside the template card by default. You will need to use card mod. It can be done like this:

type: custom:mushroom-number-card
entity: input_number.dishwasher_pod_add
fill_container: false
icon_type: none
display_mode: slider
tap_action:
  action: none
hold_action:
  action: none
double_tap_action:
  action: none
secondary_info: none
card_mod:
  style:
    mushroom-state-info$: |
      .primary {
        color: transparent !important;
        position: relative;
      }
      .primary:after {
        {% if states('input_boolean.alarm_menu_dropdown') == 'off' %}
          content: "{{states('input_boolean.alarm_menu_dropdown')}}";
        {% else %}
          content: "{{states('input_boolean.dishwasher')}}";
        {% endif %}
        color: var(--card-primary-color) !important;
        position: absolute;
        left: 0px;
      }
2 Likes
content: "Intensitat Assignada: {{states('number.evse_intensitat')}} A";

That worked, ty!

1 Like

OK thanks very much!

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

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

1 Like

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?

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);
      }
1 Like

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?