Mushroom Cards Card Mod Styling/Config Guide

Thanks for fixing the code! Oh wow, that’s exactly the part I was working on as you sent this.

For ha-state, if I want to change the background colour apply to the entire card, I would back up the code two spaces from where you have ha-state, and change it to write ha-card, am I correct? and that has to be the last section of code under card-mod, is that right?

How are you finding these names?
When I click inspect, I don’t see those,so I’m not sure how you know what labels or names to use when you write:
" mushroom-fan-percentage-control$:" for example. How did you know that is the “parent”?

thank you for your reply @dimitri.landerloos but this didn’t change the slider color either, it even reverted the state icon color to green. I did see your post with . : and $ but I also wasn’t able to apply them correctly unfortunately. This seems very finicky :see_no_evil: Has anyone any clue on the matter of my custom sliders background only appearing when they are clicked? Thanks in advance! :slight_smile:

send me the code of how you applied it. works perfectly fine for me.
image

i cant help with anything not mushroom or card mod related. so cant help you with the custom slider issue. dont use it.

after you said how I copied the code I just copied the whole code into mine and not just the style part and now it works. Wow, finally :slight_smile: thank you so much

hey Dimitri, you happen to test run the 2024.8 beta ?
If yes, I have a question for you :wink:

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