Mushroom Cards Card Mod Styling/Config Guide

I would suggest a layout card using a grid

type: custom:layout-card
layout_type: custom:grid-layout
layout:
  grid-template-columns:  40% 60%
cards:
  - type: custom:mushroom-fan-card
     

1 Like

Hi all, I’m just starting to use Card Mod with my Mushroom Cards. I have what is hopefully a simple question. In the template card example, I’m trying to use a font size of 24, however, that will cut off any character below the line height such as j g y. A font size of 20 is about it before clipping occurs. Is there some css to add to fix this?

Also, I’d like to use the same font as the Title card in a Template card. I don’t know if that is possible, but I thought I’d ask while I’m at it.

card_mod:
  style:
    mushroom-state-info$: |
      .container {
        --card-secondary-font-size: 18px;
        --card-primary-font-size: 20px;
      }

You have to adjust the field size as well

An example…

type: custom:mushroom-entity-card
entity: sensor.basement_sensor
name: TEST
icon_color: blue
card_mod:
 style: |
    ha-card {
      --card-primary-color: blue !important;
      --card-secondary-color: orange !important;
      --card-primary-font-size: 24px !important;
      --card-primary-line-height:  24px !important;      
      --card-secondary-font-size: 24px !important;
      --card-secondary-line-height:  24px !important;
         }

Ah, the missing piece. Thanks for the assist!

I tried for ages to adjust the height and it was as simple as

--card-primary-line-height:  24px !important;

will use this in the future thanks

2 Likes

Hello

Been stuck on this for too long and feel like I’m missing something obvious.

I want to change the Vacuum Card’s icon colour and background colour

I’ve got the background colour of the icon to change with this

      - type: custom:mushroom-alarm-control-panel-card
        card_mod:
          style:
            mushroom-shape-icon$: |
              .shape {
                background: rgba(0, 128, 128, 0.2) !important;
              }

But when trying to add

      - type: custom:mushroom-alarm-control-panel-card
        card_mod:
          style: 
            mushroom-shape-icon$: |
              .shape {
                background: rgba(0, 128, 128, 0.2) !important;
              }
            ha-state-icon {
              color: #008080;
            }

I get errors.

Hey, I think you could have solved it yourself quite easily using the explanation from the first post here. See the end of the first post “What the $ and .: | symbols do”

your corrected code

      - type: custom:mushroom-alarm-control-panel-card
        card_mod:
          style: 
            mushroom-shape-icon$: |
              .shape {
                background: rgba(0, 128, 128, 0.2) !important;
              }
            .: |
              ha-state-icon {
                color: #008080;
              }

what is the different to this card_mod? sometimes i dont know what is the right way

            mushroom-shape-icon {
              --shape-color: none !important;
              --icon-color: #008080 !important;
            }

No right way. Both work.

But with your solution you are targetting a variable. Called --shape-color & --icon-color

The only reason why sometimes that isnt the recommened way, is because you dont know how those variables are used elsewhere. For example, maybe the the --icon-color variable is tied to the entity being on only? Or the --shape-color is also used to determine the background color of the card itself? These are just examples to get my point across.

This is why i normally recommend targetting the element directly and changing it there. You avoid it affecting anything else by accident.

2 Likes

Ah alright, thank you :+1:t2:

2024.6.4-----2024.7.1

Please help me with this SHIFT.
Any “one button” solution?
Thanks

type: custom:stack-in-card
cards:
  - type: custom:mushroom-template-card
    primary: Спальня
    secondary: >-
      {{ states('sensor.0x00158d000709bf12_temperature') | round(1) }}°C    {{
      states('sensor.0x00158d000709bf12_humidity') | round(1) }}%
    icon: ytz:bed-double-heart
    entity: light.bedside_lamp_rgbww_light
    tap_action:
      action: toggle
    double_tap_action:
      action: navigate
      navigation_path: bedroom
    hold_action:
      action: toggle
    icon_color: '{{ ''orange'' if is_state(entity, ''on'') else ''#b7c3c7'' }}'
    fill_container: true
    layout: horizontal
    multiline_secondary: false
    card_mod:
      style: |
        :host([dark-mode]) {
          background: rgba(var(--rgb-primary-background-color), 0.2);
        } 
        :host {
          --mush-icon-size: 83px;
          height: 68px;
          margin-left: -21px !important;
          margin-top: -2px !important;
        }
        ha-card {
            --card-primary-font-size:16px;
            --card-secondary-font-size:13px;
            --icon-symbol-size: 53px;
            
           }         
  - type: custom:mushroom-chips-card
    chips:
      - type: template
        double_tap_action:
          action: none
        entity: humidifier.zhimi_ca4_d6bc_humidifier
        icon: mdi:air-humidifier
        tap_action:
          action: toggle
        hold_action:
          action: none
        icon_color: |-
          {% if is_state ('humidifier.zhimi_ca4_d6bc_humidifier', 'on')%}
            blue 
          {% else %}
            grey
          {% endif %}
    alignment: end
    card_mod:
      style: |

        ha-card {
          --chip-box-shadow: none;
          --chip-background: none;
          --chip-spacing: 0;
          --chip-icon-size: 20px;
          margin-top: -3px;
        }
card_mod:
  style: |
    ha-card {
      background-color: rgba(224,234,237,1) !important;
      height:107px !important;
      margin-top: -9px;
    }

Might be a niche use case:
I wanted a way to see the fluid level in my watering tank, so I used the background to represent the fluid level:
Bildschirmfoto 2024-07-08 um 17.53.42

card_mod:
  style:
    mushroom-shape-icon$: |
      .shape {
        background: linear-gradient(0deg, rgba(96, 125, 139, 0.3) calc( {{ states('sensor.wassertank') }}% / 0.62 ), rgba(96, 125, 139, 0.12) 0.1%) !important;
      }

This effectively sets the background to a gradient with minimal transition. !important is used as usual to overwrite the background color.

4 Likes

great job looks good.
please consider posting it here
so it doesn’t get lost in this topic

Very nice! Could also be a nice way to show light brightness level

2 Likes

Try and swap most of your :host {
To ha-card {

And then add !important to all of them.

2 Likes

So I’ve been messing around with the template card for quite some time. Unless someone has something I could use as an alternative that will allow me to have it say something like “Hello {{user}}”, or better yet template it for times (morning/afternoon/evening) I was curious how to make the text larger without blocking out the top or bottom. Seems like any size larger than 20px cuts off the top and bottom…. Any way around that? The button-card works but I can’t seem to template it…

I just ran into this myself. You need to add something like this to the card with card_mod:

            card_mod:
              style: |
                ha-card {
                  --card-primary-line-height: 60px !important ;
                  --card-secondary-line-height: 60px !important ;
                  --card-primary-font-size: 50px
                }

The line-height lines make sure the card will expand to fit the font.

Make sure you have card_mod installed, of course.

funny the little things that make the difference. that worked brilliantly. i appreciate the info!

type: custom:mushroom-template-card
primary: |2-
  {%- if now().hour < 12 -%}Morning
  {%- elif now().hour < 18 -%}Afternoon
  {%- else -%}Evening{%- endif -%}, {{user}}
icon: mdi:home

good idea, done.

5 Likes