Mushroom Cards Card Mod Styling/Config Guide

Community Guides
, ,
824

I am able to modify the icon, but I am having trouble modifying the slider. It’s not working. Is this still the correct code for the sliders?

My code is below.

type: vertical-stack
cards:
  - type: custom:mushroom-light-card
    entity: light.living_room
    icon_color: amber
    show_brightness_control: true
    show_color_temp_control: true
    fill_container: true
    icon: mdi:lightbulb-group
    card_mod:
      style: |
        ha-state-icon {
          --card-mod-icon: {% if is_state('light.master_bedroom', 'on') %} mdi:lightbulb-group {% else %} mdi:lightbulb-group-off {% endif %};
        }
        
        mushroom-light-brightness-control$: |
          mushroom-slider {
            --gradient: -webkit-linear-gradient(right, amber 0%, white 100%) !important;
        }
825

remove the |

826

put ha-state-icon { at the bottom

and you need .: |

like this

.: |
  ha-state-icon

and like the above post remove | after style:

827

Thank you for the help. I also realized I accidentally was using the wrong slider as I wanted to change the temp control rather than brightness slider to match the color. Once it worked, I found out that “amber” doesn’t work here as I ended up with a black bar. After using an eyedropper extension, I replaced it with the Hex code for the color, and it works. I also ended up creating what I think is a cool gradient for color temp using the blue from what appears to be the old style that’s on the github image showing the feature.

    card_mod:
      style:
        mushroom-light-color-temp-control$: |
          mushroom-slider {
            --gradient: -webkit-linear-gradient(right, #FFC107 0%, white 75%, #ABD3FB 100%) !important;
          }
        .: |
          ha-state-icon {
           --card-mod-icon: {% if is_state('light.living_room', 'on') %} mdi:lightbulb-group {% else %} mdi:lightbulb-group-off {% endif %};
          }

image
image906×368 13.3 KB

2 Likes
828

Thanks!

i tried to add color to the text, but that does not work…

          ha-card {
              justify-content: center;
              --primary-text-color: {{ states("input_text.kleur_iconen")}};
          }

edit:

this is the right syntax

rgb({{ states(“input_text.kleur_iconen”)}});

1 Like
829 
    card_mod:
      style:
        mushroom-shape-icon$: |
          .shape {
            --icon-symbol-size: 40px;
            --icon-size: 50px;
            box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.36) !important;
        mushroom-state-info$: |
          .container {
          --card-primary-font-size: 25px;
          --card-primary-color: rgb({{ states("input_text.kleur_iconen")}});
          align-items: center;
          }
        .: |
          ha-state-icon {
            color: rgb({{ states("input_text.kleur_iconen")}});
          ha-card {
            font-family: "brandon-grotesque";
          }

afbeelding

How can I get the icon also centered ?
edit:

        mushroom-shape-icon$: |
          .shape {
            left: 105px;
          }

it’s not really centered, but at least you can change the position…

How do I know that the font-family exist ? where can I find this ?

edit:

830

I am trying to create a custom mushroom card in the style of the “mushroom cover-card” just with custom buttons.

I got this far:

Screenshot 2024-07-15 at 10.36.16
Screenshot 2024-07-15 at 10.36.16730×262 8.36 KB

CODE:

type: custom:stack-in-card
cards:
  - type: custom:mushroom-entity-card
    entity: input_button.pc_switch_office_pc1
    fill_container: false
    name: Office
    layout: horizontal
    icon: mdi:account-group
    card_mod:
      style: |
        ha-card {
          border: 0px !important;
        }
  - type: custom:mushroom-chips-card
    chips:
      - type: entity
        entity: person.denny_moritz
        content_info: none
        card_mod:
          style: |
            ha-card {
              border: 0px !important;
              --card-mod-icon: mdi:microsoft-windows;
            }
      - type: entity
        entity: person.denny_moritz
        content_info: none
        card_mod:
          style: |
            ha-card {
              border: 0px !important;
              --card-mod-icon: mdi:apple;
            }
      - type: entity
        entity: person.denny_moritz
        content_info: none
        card_mod:
          style: |
            ha-card {
              border: 0px !important;
              --card-mod-icon: mdi:set-top-box;
            }        
    alignment: center
    card_mod:
      style:
        mushroom-entity-chip:nth-child(1)$: |
          ha-state-icon {
            rotate: 0deg;
          }
        mushroom-entity-chip:nth-child(2)$: |
          ha-state-icon {
              rotate: 0deg;
          }
        mushroom-entity-chip:nth-child(3)$: |
          ha-state-icon {
              rotate: 0deg;
          }
        .: |
          ha-card {
            justify-content: center;
            --chip-height: 40px;
            --chip-border-radius: 10%;
            --chip-icon-size: 20px;
            --chip-border-radius: 10%;
            --chip-background: #262626;
          }
card_mod:
  style: |
    ha-card {
      padding-bottom: 10px;
    }

Now the only question how do I achieve an even (percentage-based) spacing so in the end it looks like this:

Screenshot 2024-07-15 at 15.28.21
Screenshot 2024-07-15 at 15.28.211008×262 8.97 KB

831

I did solve that for now using normal buttons:

Screenshot 2024-07-15 at 15.50.05
Screenshot 2024-07-15 at 15.50.05896×290 9.76 KB

type: custom:stack-in-card
cards:
  - type: custom:mushroom-entity-card
    entity: input_button.pc_switch_office_pc1
    fill_container: false
    name: Office
    layout: horizontal
    icon: mdi:account-group
    card_mod:
      style: |
        ha-card {
          border: 0px !important;
        }
  - type: horizontal-stack
    cards:
      - show_name: false
        show_icon: true
        type: button
        tap_action:
          action: toggle
        entity: switch.wol_workstation
        icon_height: 40px
        icon: mdi:microsoft-windows
        card_mod:
          style: |
            ha-card {
              border: 0px !important;
              background: #262626 !important;
              border-radius: 10px !important;
            }
      - show_name: false
        show_icon: true
        type: button
        tap_action:
          action: toggle
        entity: switch.wol_workstation
        icon_height: 40px
        icon: mdi:apple
        card_mod:
          style: |
            ha-card {
              border: 0px !important;
              background: #262626 !important;
              border-radius: 10px !important;
            }
      - show_name: false
        show_icon: true
        type: button
        tap_action:
          action: toggle
        entity: switch.wol_workstation
        icon_height: 40px
        icon: mdi:set-top-box
        card_mod:
          style: |
            ha-card {
              border: 0px !important;
              background: #262626 !important;
              border-radius: 10px!important;
            }
card_mod:
  style: |
    ha-card {
      padding-left: 10px;
      padding-right: 10px;
      padding-bottom: 10px;
    }
2 Likes
832

I have a template card with an icon and text

I want the text centered, but when I add the icon, it just moves a little to the right. so it is not in the middle… How do I change that ?

    card_mod:
      style:
        mushroom-state-info$: |
          .container {
          text-align: center;
          }
        .: |
          ha-card {
            --card-primary-font-size: 18px;
            box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.3) !important;
            background-color: rgba({{ states("input_text.kleur_iconen")}},0.2) !important;
            width: 300px;
            margin-left: 40px;
            }
833

simple solution would be to add a margin to the size of you icon, so you cancel out the icon.

mushroom-state-info$: |
      .container{
        text-align: center;
        margin-left: -40px;

that’s if your icon is 40px in size

1 Like
834

Mushroom Light Card, how can I display both color temperature and brightness slider in one mashroom card.
In default setting, I see only one slider, to see another slider I have to tap on icon to change the slider

835

You could do something like this?
image

type: custom:stack-in-card
cards:
  - type: custom:mushroom-light-card
    entity: light.office_main_light
    use_light_color: true
    show_brightness_control: true
    card_mod:
      style: |
        ha-card {
          padding-bottom: 0px !important;
        }
  - type: custom:mushroom-light-card
    entity: light.office_main_light
    use_light_color: true
    show_color_temp_control: true
    card_mod:
      style: |
        mushroom-state-item {
          display: none !important;
        }
        ha-card {
          padding-top: 0px !important;
        }
1 Like
836

Here is a version for light cards :slight_smile:
Untitled video - Made with Clipchamp - 2024-07-18T140229.005
it takes into account whether or not a light has a brightness attribute, whether the light is on or not, and whether it has RGB values or not.

card_mod:
  style:
    mushroom-shape-icon$: |
      .shape {
        {% if states(config.entity) == 'on' and state_attr(config.entity, 'brightness') != none %}
          {% if state_attr(config.entity,'rgb_color') != none %}
            background: linear-gradient(0deg, rgba{{(state_attr(config.entity,'rgb_color')[0] * 0.85, state_attr(config.entity,'rgb_color')[1] * 0.85, state_attr(config.entity,'rgb_color')[2] * 0.85) + (0.3,)}} calc( {{state_attr(config.entity,'brightness') | float / 2.55}}%), rgba{{(state_attr(config.entity,'rgb_color')[0] * 0.85, state_attr(config.entity,'rgb_color')[1] * 0.85, state_attr(config.entity,'rgb_color')[2] * 0.85) + (0.12,)}} 0.1%) !important;
          {% else %}
            background: linear-gradient(0deg, rgba(255, 152, 0, 0.3) {{state_attr(config.entity,'brightness') | float / 2.55}}%, rgba(255, 152, 0, 0.12) 0.1%) !important;
          {% endif %}
        {% endif %}
      }
4 Likes
837

IMG_20240719_073329

I have a mushroom template card. On mobile when i press it I get a dark square around it. How can I avoid this ?

838

You can do something like this with chips:
image

type: custom:mushroom-chips-card
chips:
  - type: template
    icon: mdi:fan-clock
    card_mod:
      style: |
        ha-card {
          justify-content: center;
          height: 40px !important;
          border: 0 !important;
          box-shadow: none !important;
          border-radius: 10px !important;
        }
        .content {
          flex-direction: column !important;                                                     
        }
  - type: template
    icon: mdi:fan-clock
    card_mod:
      style: |
        ha-card {
          justify-content: center;
          height: 40px !important;
          border: 0 !important;
          box-shadow: none !important;
          border-radius: 10px !important;
        }
        .content {
          flex-direction: column !important;                                                     
        }
  - type: template
    icon: mdi:fan-clock
    card_mod:
      style: |
        ha-card {
          justify-content: center;
          height: 40px !important;
          border: 0 !important;
          box-shadow: none !important;
          border-radius: 10px !important;
        }
        .content {
          flex-direction: column !important;                                                     
        }
card_mod:
  style: |
    mushroom-template-chip {
      width: 100%;
    }
    div.chip-container {
      justify-content: space-evenly;
      flex-wrap: nowrap;
    }
    ha-card {
      margin: 0px 8px 12px;
      --chip-spacing: 8px !important;
    }
3 Likes
839

This is absolutely priceless. Helped me immensely and saved me a ton of time. Thank you so much for the time and effort you put into this.

1 Like
840

image

Hello,

I would like to ask if there is a way to display additional information on this card?
I would like to display an air conditioning switch-off timer in the empty part on the left.
What are the options?

Entity: timer.climate_off_timer

  - type: horizontal-stack
    cards:
      - type: custom:mushroom-template-card
        card_mod:
          style:
            mushroom-shape-icon$: |
              .shape {
                {% if not is_state('climate.nappali_klima', 'off') %}
                position: relative;
              }
              .shape:after {
                content: ' ';
                position: absolute;
                width: inherit;
                height: inherit;
                border-radius: 500px;
                border: 2px solid #ADFF2F;
                border-left-color: transparent;
                animation: spin 1s linear infinite;
                {% endif %}
              }
            .: |
              :host {
                {% set sensor_dws_state = 
                (is_state('binary_sensor.dws_nappali_bal_contact', 'on') or is_state('binary_sensor.dws_nappali_jobb_contact', 'on')) %}
                {% set sensor_zone_state = 
                (is_state('binary_sensor.zone_nappali_bal_abl_open', 'on') or is_state('binary_sensor.zone_nappali_jobb_abl_open', 'on')) %}

                {% if sensor_dws_state and sensor_zone_state %}
                --ha-card-box-shadow: 0 0 10px red;
                {% elif not sensor_dws_state and not sensor_zone_state %}
                --ha-card-box-shadow: none;
                {% elif sensor_dws_state and not sensor_zone_state %}
                --ha-card-box-shadow: 0 0 10px orange;
                {% else %}
                --ha-card-box-shadow: 0 0 10px grey;
                {% endif %}
              }
              ha-card {
                {% if is_state('binary_sensor.zone_nappali_pir_open', 'on') %}
                --card-primary-color: red;
                {% else %}
                --card-primary-color: inherit;
                {% endif %}
                height:70px !important;
              }
        secondary: >-
          {{states('sensor.nappali_e6b0_temperature') | float(default=0) |
          round(1)}} °C

          {{states('sensor.nappali_e6b0_humidity') | float(default=0) |
          round(1)}} %
        icon: mdi:sofa
        entity: light.led_driver_nappali_padlo
        tap_action:
          action: navigate
          navigation_path: /dashboard-kezelfelulet/nappali
        hold_action:
          action: toggle
        icon_color: |-
          {% if is_state('light.led_driver_nappali_padlo','on') %}
            orange
          {% endif %}
        multiline_secondary: true
        badge_color: >-
          {% set cover_position = state_attr('cover.redony_nappali',
          'current_position') %}


          {% if cover_position is defined %}
            {% if cover_position == 0 %}
              red
            {% elif cover_position == 100 %}
              green
            {% else %}
              yellow
            {% endif %}
          {% else %}
            grey
          {% endif %}
        badge_icon: >-
          {% set cover_position = state_attr('cover.redony_nappali',
          'current_position') %}


          {% if cover_position is defined %}
            {% if cover_position == 0 %}
              mdi:window-shutter
            {% elif cover_position == 100 %}
              mdi:window-shutter-open
            {% else %}
              mdi:window-shutter
            {% endif %}
          {% else %}
            mdi:window-shutter-cog
          {% endif %}
        primary: Nappali
841

you can play around with a few options like this

type: horizontal-stack
cards:
  - type: custom:mushroom-template-card
    card_mod:
      style:
        mushroom-state-info$: |
          .secondary:after {
            content: '{{states('timer.climate_off_timer')}}';
            display: flex;
          }
        mushroom-shape-icon$: |
          .shape {
            {% if not is_state('climate.nappali_klima', 'off') %}
            position: relative;
          }
          .shape:after {
            content: ' ';
            position: absolute;
            width: inherit;
            height: inherit;
            border-radius: 500px;
            border: 2px solid #ADFF2F;
            border-left-color: transparent;
            animation: spin 1s linear infinite;
            {% endif %}
          }
        .: |
          :host {
            {% set sensor_dws_state = 
            (is_state('binary_sensor.dws_nappali_bal_contact', 'on') or is_state('binary_sensor.dws_nappali_jobb_contact', 'on')) %}
            {% set sensor_zone_state = 
            (is_state('binary_sensor.zone_nappali_bal_abl_open', 'on') or is_state('binary_sensor.zone_nappali_jobb_abl_open', 'on')) %}

            {% if sensor_dws_state and sensor_zone_state %}
            --ha-card-box-shadow: 0 0 10px red;
            {% elif not sensor_dws_state and not sensor_zone_state %}
            --ha-card-box-shadow: none;
            {% elif sensor_dws_state and not sensor_zone_state %}
            --ha-card-box-shadow: 0 0 10px orange;
            {% else %}
            --ha-card-box-shadow: 0 0 10px grey;
            {% endif %}
          }
          ha-card {
            {% if is_state('binary_sensor.zone_nappali_pir_open', 'on') %}
            --card-primary-color: red;
            {% else %}
            --card-primary-color: inherit;
            {% endif %}
            height:70px !important;
          }
    secondary: >-
      {{states('sensor.nappali_e6b0_temperature') | float(default=0) |
      round(1)}} °C

      {{states('sensor.nappali_e6b0_humidity') | float(default=0) | round(1)}} %
    icon: mdi:sofa
    entity: light.led_driver_nappali_padlo
    tap_action:
      action: navigate
      navigation_path: /dashboard-kezelfelulet/nappali
    hold_action:
      action: toggle
    icon_color: |-
      {% if is_state('light.led_driver_nappali_padlo','on') %}
        orange
      {% endif %}
    multiline_secondary: true
    badge_color: >-
      {% set cover_position = state_attr('cover.redony_nappali',
      'current_position') %}


      {% if cover_position is defined %}
        {% if cover_position == 0 %}
          red
        {% elif cover_position == 100 %}
          green
        {% else %}
          yellow
        {% endif %}
      {% else %}
        grey
      {% endif %}
    badge_icon: >-
      {% set cover_position = state_attr('cover.redony_nappali',
      'current_position') %}


      {% if cover_position is defined %}
        {% if cover_position == 0 %}
          mdi:window-shutter
        {% elif cover_position == 100 %}
          mdi:window-shutter-open
        {% else %}
          mdi:window-shutter
        {% endif %}
      {% else %}
        mdi:window-shutter-cog
      {% endif %}
    primary: Nappali
843 
                      - type: custom:mushroom-chips-card
                        chips:
                          - type: entity
                            entity: input_number.aline_airco
                            icon: " "

How do I center the state of the input_number ?

844

I want an icon color to change when the status is greater or less than another value. Any idea how I can do this? I tried a few things…

{{ ''green'' if states(entity) | < states('sensor.dynamische_stroomprijzen_average_electricity_price_today') else ''red'' }}