Mushroom Cards Card Mod Styling/Config Guide

I have worked on your inquiry, just haven’t found a solution that forces the menu down in all scenarios.

card_mod:
  style:
    mushroom-select-option-control$:
      mushroom-select$: |
        mwc-menu {
           --mdc-menu-item-height: 40px;
           position: fixed;
           z-index: 1;
          }

From my understanding the browser type comes into play.

It seems impossible to achieve. I’ve tried a lot of things. I can’t even reference mwc-menu for some reason. I’ll try a different approach that doesn’t involve drop lists.
Thank you and sorry for wasting your time.

No apology necessary, it’s an intriguing question. I hope someone jumps in with a resolution.

1 Like

Hi,
I just tried to migrate my custom-button card to mushroom. Can anyone help me how to get the animation working? I want the card or even better only the border to blink orange if the used sensor is on state opening or closing.

Currently I use the following code where only the green and red colors for the final states closed and open are working.

type: custom:mushroom-entity-card
entity: sensor.garage_tr_left_status
secondary_info: state
tap_action:
  action: call-service
  confirmation:
    text: Wirklich ausführen?
  service: switch.turn_on
  service_data:
    entity_id: switch.shellyplus2pm_10061cc9f634_switch_0
name: Garage links
primary_info: name
icon_color: white
card_mod:
  style: |
    ha-card {
          text-align: left;
          height: 70px !important;
        {% set state=states('sensor.garage_tr_left_status') %}
           {% if state == 'open' %}
            --ha-card-background: red;
           {% elif state == 'opending' %}
            --ha-card-background: orange;
           {% elif state == 'closing' %}
            --ha-card-background: orange;
           {% elif state == 'closed' %}
            --ha-card-background: green;
           {% endif %}
        }

Hi,

to have more information on my climate and rollershutter cards and because that there is no template mechanism supported, I tweaked
them (based on all information I gathered from this forum and others) to get the following results, I would like to share with you. You might find it
useful for your own customization:

I am not an expert, so there might be more sophisticated solutions.

This is the yaml for the rollershutter card (incl. custom-expander-card)

type: custom:mod-card
style: |
  ha-card {
    border: 0px solid ;
    padding: 0px 0px 0px !important;
    color: grey !important;
    background-color: ;
    font-size: ;
    background: none;
    box-shadow: none;
    --ha-card-box-shadow: none;
    --ha-card-border-width: 0;
  }
card:
  type: custom:expander-card
  gap: "-1em"
  padding: 0em
  clear: false
  clear-children: false
  title: Expander
  overlay-margin: 2em
  child-padding: 0em
  button-background: transparent
  expanded: false
  title-card:
    type: custom:mod-card
    style: |
      ha-card {
        border: 0px dotted red !important;
        padding: 0px 0px 0px !important;
        color: red !important;
        background-color: ;
        font-size: ;
      }
    card:
      type: custom:mushroom-cover-card
      entity: cover.0_lr_grs
      grid_options:
        columns: 12
      card_mod:
        style:
          mushroom-state-info$: |
            span {
              visibility: hidden;
            }

            .primary:before {
                content: "{% if is_state('cover.0_lr_grs', 'open') %} {{state_translated('cover.0_lr_grs')}} - {{state_attr('cover.0_lr_grs', 'current_position')}} % -  {{state_attr('cover.0_lr_grs', 'friendly_name')}} {% else %} {{state_translated('cover.0_lr_grs')}} - {{state_attr('cover.0_lr_grs', 'friendly_name')}} {%endif %}";
                visibility: visible;
            }      
            .secondary:before {
              content: "{% from 'relative_time_plus.jinja' import relative_time_plus %} {{relative_time_plus(states.cover['0_lr_grs'].last_updated, parts=1, not_use=['week', 'millisecond'], time=true, abbr=true, language='de')}} ";
              visibility: visible;
            }      
      layout: null
      show_position_control: true
      show_buttons_control: true
      icon: mdi:window-shutter
      primary_info: state
      secondary_info: last-updated
      tap_action:
        action: more-info
  cards:
    - type: custom:mod-card
      style: |
        ha-card {
          border: 00px dotted red !important;
          padding: 0px 0px 0px !important;
          color: red !important;
          background-color: ;
          font-size: ;
        }
      card:
        type: entities
        entities:
          - type: section
          - type: custom:mushroom-cover-card
            entity: cover.0_lr_rs_s_7
            card_mod:
              style:
                mushroom-state-info$: |
                  span {
                    visibility: hidden;
                  }

                  .primary:before {
                      content: "{% if is_state('cover.0_lr_rs_s_7', 'open') %} {{state_translated('cover.0_lr_rs_s_7')}} - {{state_attr('cover.0_lr_rs_s_7', 'current_position')}} % -  {{state_attr('cover.0_lr_rs_s_7', 'friendly_name')}} {% else %} {{state_translated('cover.0_lr_rs_s_7')}} - {{state_attr('cover.0_lr_rs_s_7', 'friendly_name')}} {%endif %}";
                      visibility: visible;
                  }      
                  .secondary:before {
                    content: "{% from 'relative_time_plus.jinja' import relative_time_plus %} {{relative_time_plus(states.cover['0_lr_rs_s_7'].last_updated, parts=1, not_use=['week', 'millisecond'], time=true, abbr=true, language='de')}} - {{states('sensor.0_lr_rs_s_electric_consumption_w_7', with_unit=True)}} - {{states('sensor.0_lr_rs_s_electric_consumption_kwh_7', with_unit=True)}}";
                    visibility: visible;
                  }      
                    
            show_position_control: true
            show_buttons_control: true
            icon: mdi:window-shutter
            primary_info: state
            secondary_info: last-updated
          - type: custom:mushroom-cover-card
            entity: cover.0_lr_rs_w_6
            card_mod:
              style:
                mushroom-state-info$: |
                  span {
                    visibility: hidden;
                  }

                  .primary:before {
                      content: "{% if is_state('cover.0_lr_rs_w_6', 'open') %} {{state_translated('cover.0_lr_rs_w_6')}} - {{state_attr('cover.0_lr_rs_w_6', 'current_position')}} % -  {{state_attr('cover.0_lr_rs_w_6', 'friendly_name')}} {% else %} {{state_translated('cover.0_lr_rs_w_6')}} - {{state_attr('cover.0_lr_rs_w_6', 'friendly_name')}} {%endif %}";
                      visibility: visible;
                  }      
                  .secondary:before {
                    content: "{% from 'relative_time_plus.jinja' import relative_time_plus %} {{relative_time_plus(states.cover['0_lr_rs_w_6'].last_updated, parts=1, not_use=['week', 'millisecond'], time=true, abbr=true, language='de')}} - {{states('sensor.0_lr_rs_w_electric_consumption_w_6', with_unit=True)}} - {{states('sensor.0_lr_rs_w_electric_consumption_kwh_6', with_unit=True)}}";
                    visibility: visible;
                  }      
                    
            show_position_control: true
            show_buttons_control: true
            icon: mdi:window-shutter
            primary_info: state
            secondary_info: last-updated

and this is for the climate card using the same principles

type: custom:mod-card
style: |
  ha-card {
    border: 0px solid ;
    padding: 0px 0px 0px !important;
    color: grey !important;
    background-color: ;
    font-size: ;
    background: none;
    box-shadow: none;
    --ha-card-box-shadow: none;
    --ha-card-border-width: 0;
  }
card:
  type: custom:expander-card
  gap: "-1em"
  padding: 0em
  clear: false
  clear-children: false
  title: Expander
  overlay-margin: 2em
  child-padding: 0em
  button-background: transparent
  expanded: false
  title-card:
    type: custom:mod-card
    style: |
      ha-card {
        border: 0px dotted red !important;
        padding: 0px 0px 0px !important;
        color: red !important;
        background-color: ;
        font-size: ;
      }
    card:
      type: custom:mushroom-climate-card
      entity: climate.0_lr_gth
      card_mod:
        style:
          mushroom-state-info$: |
            span {
              visibility: hidden;
            }

            .primary:before {
              content: "{{state_attr('climate.0_lr_gth', 'current_temperature' )}} °C";
              visibility: visible;
            }      
            .secondary:before {
              content: "{% from 'relative_time_plus.jinja' import relative_time_plus %} {{relative_time_plus(states.climate['0_lr_gth'].last_updated, parts=1, not_use=['week', 'millisecond'], time=true, abbr=true, language='de')}} ";
              visibility: visible;
            }      
              
      icon: mdi:heating-coil
      layout: horizontal
      show_temperature_control: true
      primary_info: state
      secondary_info: last-updated
      tap_action:
        action: more-info
  cards:
    - type: custom:mod-card
      style: |
        ha-card {
          border: 00px dotted red !important;
          padding: 0px 0px 0px !important;
          color: red !important;
          background-color: ;
          font-size: ;
        }
      card:
        type: entities
        entities:
          - type: section
          - type: custom:mushroom-climate-card
            entity: climate.0_lr_th_s_2
            card_mod:
              style:
                mushroom-state-info$: |
                  span {
                    visibility: hidden;
                  }

                  .primary:before {
                    content: "{{state_attr( 'climate.0_lr_th_s_2', 'current_temperature' )}} °C - {{state_attr( 'climate.0_lr_th_s_2', 'friendly_name' )}}";
                    visibility: visible;
                  }      
                  .secondary:before {
                    content: "{% from 'relative_time_plus.jinja' import relative_time_plus %} {{relative_time_plus(states.climate['0_lr_th_s_2'].last_updated, parts=1, not_use=['week', 'millisecond'], time=true, abbr=true, language='de')}}  - {{state_translated ('binary_sensor.0_lr_th_s_low_battery_level_2')}}";
                    visibility: visible;
                  }      
                    
            layout: horizontal
            icon: mdi:heating-coil
            show_temperature_control: true
            primary_info: state
            secondary_info: last-updated
            tap_action:
              action: more-info
          - type: custom:mushroom-climate-card
            entity: climate.0_lr_th_w
            card_mod:
              style:
                mushroom-state-info$: |
                  span {
                    visibility: hidden;
                  }

                  .primary:before {
                    content: "{{state_attr( 'climate.0_lr_th_w', 'current_temperature' )}} °C  - {{state_attr( 'climate.0_lr_th_w', 'friendly_name' )}}";
                    visibility: visible;
                  }      
                  .secondary:before {
                    content: "{% from 'relative_time_plus.jinja' import relative_time_plus %} {{relative_time_plus(states.climate['0_lr_th_w'].last_updated, parts=1, not_use=['week', 'millisecond'], time=true, abbr=true, language='de')}}  - {{state_translated ('binary_sensor.0_lr_th_w_low_battery_level')}}";
                    visibility: visible;
                  }      
                    
            layout: horizontal
            icon: mdi:heating-coil
            show_temperature_control: true
            primary_info: state
            secondary_info: last-updated
            tap_action:
              action: more-info

Let me know about your ideas / improvement / customizations

BR,

Ypo

Anyone manage to replicate the timer-bar-card? I’d to use it for the washing machine remaining_time, but don’t want to install another card, cheers.

1 Like

I notice a typo, opending should be opening.

This will animate the border.

type: custom:mushroom-entity-card
entity: sensor.garage_tr_left_status
secondary_info: state
tap_action:
  action: call-service
  confirmation:
    text: Wirklich ausführen?
  service: switch.turn_on
  service_data:
    entity_id: switch.shellyplus2pm_10061cc9f634_switch_0
name: Garage links
primary_info: name
icon_color: white
card_mod:
  style: |
    ha-card {
     text-align: left;
     height: 70px !important;
     {% set state=states('sensor.garage_tr_left_status') %}
     {% if state == 'open' %}
          border: none;
          background: rgba(var(--rgb-red),.3);
     {% elif state == 'opening' %}
          animation: moving 1s infinite;
          border: none;
          background: rgba(var(--rgb-orange),.3);
     {% elif state == 'closing' %}
          animation: moving 1s infinite;
          border: none;
          background: rgba(var(--rgb-orange),.3);
     {% elif state == 'closed' %}
          border: 2.5px solid green;
         background: rgba(var(--rgb-green),.3);
     {% endif %}
      }
     @keyframes moving {
        0% {box-shadow: 0 0 0 0 rgba(var(--rgb-orange), 1);}
        70% {box-shadow: 0 0 0 5px transparent;}
        100% {box-shadow: 0 0 0 0 transparent;}
      }

@dimitri.landerloos, hi I’m suck with a problem positioning my chips card.
I want the most left chips card exactly above the icon below.

I want to shift my 2 chips card to the right. Can you help me on this topic?
I marked my blank area with question-marks. I have no clue what I need to do.

Thanks
Vic

type: custom:mushroom-chips-card
chips:
  - type: template
    tap_action:
      action: navigate
      navigation_path: /tablet-new/0
    icon: mdi:home
    icon_color: indigo
    card_mod:
      style: |
        ha-card {
      #  ????
        }
  - type: template
    tap_action:
      action: navigate
      navigation_path: /dashboard-tablet/19
    icon: mdi:video
    icon_color: deep-purple
      style: |
        ha-card {
          position: absolute;
          right: 0px;
          }

Well, I got option 1 to work which colors all of the chip cards a single color, but no matter what I do, the 2nd option, which is to color an individual chip, produces no results.

This works to color all:

type: custom:mushroom-chips-card
chips:
  - type: conditional
    conditions:
      - condition: state
        entity: switch.flora_power
        state: "off"
    chip:
      type: entity
      entity: switch.flora_power
  - type: entity
    entity: sensor.flora_door
    icon: mdi:dishwasher
  - type: entity
    entity: sensor.flora_operation_state
card_mod:
  style: |
    ha-card {
    --chip-background: blue;
    }

This does not, to color just the operation state chip:

type: custom:mushroom-chips-card
chips:
  - type: conditional
    conditions:
      - condition: state
        entity: switch.flora_power
        state: "off"
    chip:
      type: entity
      entity: switch.flora_power
  - type: entity
    entity: sensor.flora_door
    icon: mdi:dishwasher
  - type: entity
    entity: sensor.flora_operation_state
    card_mod:
      style: |
        ha-card {
        --chip-background: blue;
        }

An error shows up below the YAML editor:

Visual editor not supported
At path: chips.2.card_mod -- Expected a value of type `never`, but received: `[object Object]`
You can still edit your config using YAML.

Any ideas?

One way…

type: custom:mushroom-chips-card
chips:
  - type: conditional
    conditions:
      - condition: state
        entity: switch.flora_power
        state: "off"
    chip:
      type: entity
      entity: switch.flora_power
      card_mod:
       style: |
        ha-card {
        --chip-background: red;
        }      
  - type: entity
    entity: sensor.flora_door
    icon: mdi:dishwasher
    card_mod:
       style: |
        ha-card {
        --chip-background: green;
        }          
  - type: entity
    entity: sensor.flora_operation_state
    card_mod:
      style: |
        ha-card {
        --chip-background: blue;
        }

Thanks for your hint, unfortunately the card _mod doesn’t bring any changes

You can just use the UI option

type: custom:mushroom-chips-card
chips:
  - type: template
    tap_action:
      action: navigate
      navigation_path: /tablet-new/0
    icon: mdi:home
    icon_color: indigo
  - type: template
    tap_action:
      action: navigate
      navigation_path: /dashboard-tablet/19
    icon: mdi:video
    icon_color: deep-purple
alignment: end

or

card_mod, but no reason for that…

type: custom:mushroom-chips-card
chips:
  - type: template
    tap_action:
      action: navigate
      navigation_path: /tablet-new/0
    icon: mdi:home
    icon_color: indigo
  - type: template
    tap_action:
      action: navigate
      navigation_path: /dashboard-tablet/19
    icon: mdi:video
    icon_color: deep-purple
card_mod:
  style: |
    .chip-container {
      justify-content: end !important;
      }

If you are trying to just shift them a little bit use

card_mod:
  style: |
    .chip-container {
      padding-left: 100px !important;
      }

Sorry to disturb you, but, as newbie, i am finding big difficulties to have what i’d like to have in my dashboard.
Problem is that i have this card:

type: custom:auto-entities
show_empty: false
card:
  type: entities
filter:
  template: |-
    {{ states.light | selectattr('state', 'eq', 'on') |
        map(attribute='entity_id') | list 
    }}
else:
  type: markdown
  content: all lights off

but i’d like to have the cards made with your code (i mean with mushroom light cards) and with the same style like this:

type: custom:mushroom-light-card
entity: light.bedroom_main_light
show_brightness_control: true
layout: horizontal
use_light_color: true
show_color_control: false
name: ' '
card_mod:
  style: |
    mushroom-light-brightness-control {
      position: absolute;
      width: 280px !important;
      height: 20px;
      right: 10px
    }
    mushroom-light-brightness-control:after {
      content: "{{state_attr(config.entity,'friendly_name')}}";
      position: relative;
      display: flex;
      justify-content: center;
      align-items: center;
      color: var(--card-primary-text-color);
      font-weight: bolder;
      top: -29px;
      right: 0px;
      width: 120px;
      height: 16px;
      font-size: 12px; 
      pointer-events: none;
    }

Can you help me?

Maybe this can help you!

type: custom:auto-entities
filter:
  include:
    - group: light.rasveta_stan
      state: "on"
      options:
        type: custom:mushroom-light-card
        show_brightness_control: true
        layout: horizontal
        tap_action:
          action: toggle
        use_light_color: true
    - group: light.rasveta_stan
      state: "off"
      options:
        type: custom:mushroom-light-card
        show_brightness_control: true
        layout: horizontal
        tap_action:
          action: toggle
        use_light_color: true
  exclude: []
card:
  type: custom:layout-card
  cards: []
  layout_type: masonry

Where is light.rasveta_stan helpers lightig group!

1 Like

Hoping for some help please: I am trying to combine a couple of card_mods in a Mushroom Template Card but can’t seem to get it to work. Each mod works individually. Firstly I am increasing the size of my icon with:

card_mod:
  style:
    mushroom-shape-icon$: |
      .shape {
        --icon-symbol-size: 42px;
        --icon-size: 52px;
      }

Secondly I can animate the icon based on the speed of my fan and removing the card background with:

card_mod:
  style: |
    ha-card {
      box-shadow: none;
      border: none;
      background: none;
    }
    ha-state-icon {
      {% if is_state('fan.fan_lounge', 'on') %}
        {% set speed = state_attr('fan.fan_lounge', 'percentage') | default(0) %}
        {% if speed < 33 %}
          animation: none;
        {% elif speed <= 65 %}
          animation: spinning 3s linear infinite;
        {% elif speed <= 99 %}
          animation: spinning 1.9s linear infinite;
        {% else %}
          animation: spinning 0.75s linear infinite;
        {% endif %}
      {% else %}
        animation: none;
      {% endif %}
    }

    @keyframes spinning {
      0% {
        transform: rotate(0deg);
      }
      100% {
        transform: rotate(360deg);
      }
    }

When I try and combine them I loose the icon sizing:

card_mod:
  style:
    ha-card: |
      ha-card {
        box-shadow: none;
        border: none;
        background: none;
      }
    ha-state-icon: |
      {% if is_state('fan.fan_lounge', 'on') %}
        {% set speed = state_attr('fan.fan_lounge', 'percentage') | default(0) %}
        {% if speed < 33 %}
          animation: none;
        {% elif speed <= 65 %}
          animation: spinning 3s linear infinite;
        {% elif speed <= 99 %}
          animation: spinning 1.9s linear infinite;
        {% else %}
          animation: spinning 0.75s linear infinite;
        {% endif %}
      {% else %}
        animation: none;
      {% endif %}

    @keyframes spinning: |
      0% {
        transform: rotate(0deg);
      }
      100% {
        transform: rotate(360deg);
      }
      
    mushroom-shape-icon$: |
      .shape {
        --icon-symbol-size: 42px;
        --icon-size: 52px;
      }

Try this, but I am curious why you aren’t just using the Mushroom fan card? It has animation built in for a fan entity.

card_mod:
  style:
    mushroom-shape-icon$: |
      .shape {
        --icon-symbol-size: 42px;
        --icon-size: 52px;
      }
    .: |  
     ha-card{
        box-shadow: none;
        border: none;
        background: none;
        }
     ha-state-icon {
        {% set speed = state_attr('fan.fan_lounge', 'percentage') | default(0) %}
        {% if speed < 33 %}
          animation: none;
        {% elif speed <= 65 %}
          animation: spinning 3s linear infinite;
        {% elif speed <= 99 %}
          animation: spinning 1.9s linear infinite;
        {% else %}
          animation: spinning 0.75s linear infinite;
        {% endif %}
           }
       @keyframes spinning {
        0% {
        transform: rotate(0deg);
          }
      100% {
        transform: rotate(360deg); }

Thanks, yes that worked.

You ask a good question re: why use the template card. I have been using the template card for the rest of my dashboard and I guess I was blinkered and didn’t think things through properly.

No worries! Mushroom originally didn’t include animations, but the latest version added a few as a standard option. The fan card was one of them so I thought I’d mention it.

My go to card is always the template card as well!

Hi,
I’ve this code :

type: custom:vertical-stack-in-card
cards:
  - type: custom:mushroom-template-card
    icon_color: |
      {% if is_state(entity, 'on') %}
        orange
      {% else %}  
        white
      {% endif %}
    card_mod:
      style: |
        mushroom-shape-icon { animation: blink 2s linear infinite; }
        @keyframes blink { 50% {opacity: 0;} }
    entity: light.salon
    icon: mdi:lightbulb-on
    primary: Salon
    secondary: >
      {{ states("sensor.temperature_salon_temperature") | float | round }}°C |{{
      states("sensor.temperature_salon_humidity") | float | round }}% 💧|💡{{ states("light.salon")
      }} {% if is_state('light.salon', 'unavailable') %}
        Indisponible
      {% elif is_state('light.salon', 'off') %}
      {% else %}
        - {{ (states['light.salon'].attributes.brightness / 2.54) | round(0) }}% 
      {% endif %}
    layout: horizontal
    tap_action:
      action: toggle
    badge_icon: >
      {% if
      is_state('binary_sensor.magic_areas_presence_tracking_salon_area_state',
      'on') %}
        mdi:motion-sensor
      {% else %}  
        mdi:motion-sensor-off
      {% endif %}
    badge_color: >
      {% if
      is_state('binary_sensor.magic_areas_presence_tracking_salon_area_state',
      'on') %}
        orange
      {% else %}  
        grey
      {% endif %}
  - type: custom:mini-graph-card
    entities:
      - entity: sensor.temperature_salon_temperature
        name: Temperature
        color: lightblue
    height: 50
    hours_to_show: 24
    points_per_hour: 1
    line_width: 2
    font_size: 20
    animate: true
    show:
      name: false
      icon: false
      state: false
      legend: false
      fill: fade
  - type: custom:mushroom-chips-card
    card_mod:
      style:
        mushroom-template-chip:nth-child(1)$: |
          ha-state-icon {
            animation: spin 1s linear infinite;
           }
          @keyframes spin {
          from {transform: rotate(0deg);}
          to {transform: rotate(360deg);}
          }
    chips:
      - type: template
        entity: climate.radiateur_salon
        icon: mdi:radiator
        icon_color: |-
          {% if is_state(entity, 'on') %} 
           orange
          {% elif is_state(entity, 'off') %} 
           grey
          {% else %}
           red
          {% endif %}
        tap_action:
          action: more-info
        card_mod:
          style: |
            mushroom-shape-icon { animation: blink 2s linear infinite; }
            @keyframes blink { 50% {opacity: 0;} }
      - type: template
        entity: light.salon
        icon: mdi:lightbulb-group
        icon_color: |-
          {% if is_state(entity, 'on') %} 
           yellow
          {% elif is_state(entity, 'off') %} 
           grey
          {% else %}
           red
          {% endif %}
        tap_action:
          action: more-info
      - type: template
        entity: media_player.freebox_player_pop
        icon: mdi:television-box
        icon_color: |-
          {% if is_state(entity, 'on') %} 
           yellow
          {% elif is_state(entity, 'off') %} 
           grey
          {% else %}
           red
          {% endif %}
        tap_action:
          action: more-info
    alignment: end

And I try to animate icon (lightbulb, radiator, lightbulb-group and tv) depending on state, but none works.
I don’t know why.

Thanks.