Mushroom Cards Card Mod Styling/Config Guide

dimitri.landerloos · October 28, 2023, 3:21pm

We talked about this if you scroll up in the topic a bit. If your entity has an on off state it seems like --shape-color is only being applied when the entity is on.

If you wanted to change regardless of on state you can use:

card_mod:
  style:
    mushroom-shape-icon$: |
      .shape {
        background: orange !important;
      }

I am still needing to update the documentation to reflect this.

tomg1970 · October 30, 2023, 1:06pm

Can I not change the name or Second-Info in the Mushroom-Entity-Card
status in the Mushroom-Entity-Card, or what do I have to do to
card to get this to work?

state:
  - value: 'on'
    name: 'COM'
  - value: 'off'
    name: 'MAN'

or in this way for the name?

{% if is_state('automation.heizung_anne', 'on') %} ..... ???

dimitri.landerloos · October 30, 2023, 9:13pm

You can only use templates in cards that support templates. the only cards in Mushroom that support templates are:

Mushroom Template Card
Mushroom Title Card
Mushroom Chips Card (If using a Template Chip)

The only other way to change things and use templates in cards that dont support it, is with card mod.

tomg1970 · October 31, 2023, 6:23am

Thanks Dimitri for info.
How would you do it then. I am biting my teeth on it right now

dimitri.landerloos · October 31, 2023, 11:48am

I have shown you how to replace certain text with another here:

dimitri.landerloos:

card_mod:
  style:
    mushroom-state-info$: |
      .secondary {
        color: transparent !important;
        position: relative;
      }
      .secondary:after {
        content: '{{state_attr('climate.bedroom_heating','hvac_action') | capitalize }} - {{states('sensor.bedroom_temperature_humidity_temperature')}} °C';
        color: var(--secondary-text-color);
        position: absolute;
        left: 0px;
      }

try and use this example to figure out how to solve your problem

jorfei · October 31, 2023, 11:39pm

How do I remove the button and keep only the slider? fe35d14279dfa3ba08d0ab5a2ce46804ca45d675_2_690x126

dimitri.landerloos · October 31, 2023, 11:49pm

Like this? Or do you want still keep the name and state?

type: custom:mushroom-light-card
entity: light.bedroom_chest_lamp
use_light_color: true
show_brightness_control: true
layout: horizontal
card_mod:
  style: |
    mushroom-state-item {
      display: none;
    }

type: custom:mushroom-light-card
entity: light.bedroom_chest_lamp
use_light_color: true
show_brightness_control: true
layout: horizontal
card_mod:
  style:
    mushroom-light-brightness-control$:
      mushroom-slider$: |
        .container {
          position: absolute;
          width: 94% !important;
          left: 10px;
        }
    .: |
      mushroom-shape-icon {
        display: none;
      }
      mushroom-state-info {
        z-index: 1;
        pointer-events: none;
      }

jorfei · November 1, 2023, 12:25am

Success, thank you

Sebwirtz · November 1, 2023, 7:48am

Is it possible to change the Card-Background if an Entity is on?

‘{% if is_state(‘light.wohnzimmerlicht’, ‘on’) %}
orange
{% else %}
grey
{% endif %}’

Is there any Code?

fugley · November 1, 2023, 8:19am

all i use… colored background if lights are on … default background if nothing is on

type: custom:stack-in-card
card_mod:
  style: |
    ha-card { 
      background-color: {{ '#190019' if is_state('light.living_room_group', 'on') else '' }};
    }
cards:
.....
...........
.........................

dimitri.landerloos · November 1, 2023, 8:43am

Look at the examples in the first post on the section about templating in card mod

gartensofa · November 1, 2023, 1:10pm

Hello everyone,
i am trying to color the “mushroom-slider” of a mushroom-number-card,
depending on the “is_volume_muted”-attribute of a media player entity.
Could anyone nudge me in the right direction on how to accomplish this?

dimitri.landerloos · November 1, 2023, 1:16pm

something like this?

type: custom:mushroom-number-card
entity: input_number.dishwasher_pod_add
display_mode: slider
icon_color: green
card_mod:
  style:
    mushroom-number-value-control$: |
      mushroom-slider {
        {% if state_attr('media_player.office_speaker','is_volume_muted') != true %}
          --slider-color: rgba(var(--rgb-{{config.icon_color}}), 1) !important;
          --slider-bg-color: rgba(var(--rgb-{{config.icon_color}}), 0.2) !important;
        {% else %}
          --slider-color: rgba(var(--rgb-grey), 1) !important;
          --slider-bg-color: rgba(var(--rgb-grey), 0.2) !important;
        {% endif %}
      }

the {{config.icon_color}} is only there to support whatever color you choose to use in your card. so if you update the icon_color: green to lets say red instead. then the bar would color along with that.

gartensofa · November 1, 2023, 1:22pm

EXACTLY like this.
Thanks a lot!

Tadies · November 1, 2023, 6:32pm

Dimitri?
can ya guide to how to get a border on my chips?
i could not find it in Your guides…

card_mod:
  style:
    mushroom-entity-chip:nth-child(1)$: |
      ha-state-icon {
        {% if is_state('switch.computer','on') %}
        animation: shake 400ms ease-in-out infinite;
       transform-origin: 50% 90%; 
        clip-path: polygon(24% 0, 100% 0, 100% 100%, 0 100%, 0 75%, 62%);
        {% else %}
        {% endif %}
      }
      @keyframes shake {
        0%, 100% { transform: rotate(3deg); }
        50%  { transform: rotate(-3deg); }
      }

this border i wanted to use…

border: 0.5px outset grey;

dimitri.landerloos · November 1, 2023, 6:37pm

can be done through the chip itself rather than drilled down from the main chip card:

type: custom:mushroom-chips-card
chips:
  - type: entity
    entity: person.dimitri_landerloos
    card_mod:
      style: |
        ha-card {
          border: 2.5px outset green !important;
        }

Tadies · November 1, 2023, 6:48pm

wow! so easy!..pfffuuuu
thank You sir! keep on rocking!

tomg1970 · November 2, 2023, 8:39am

Hi unfortunately I have to ask a question again. Today it is about two “switches” in one card.
One is the “MAIN-SWITCH” the other is another switch which is only on when the main is on.
So far it is so lalala … if I can make it better, please let me know.

But how can I at least assign a free text to primary and secondary, which shows me the name of the two switches.

type: custom:stack-in-card
cards:
  - type: custom:mushroom-entity-card
    entity: switch.esz_sw_unifi
    name: ❮ ezSW-eMAIN ❯
    fill_container: true
    show_brightness_control: true
    use_light_color: true
    secondary_info: name
    primary_info: name
    icon_type: icon
    secondary: none
    collapsible_controls: true
    show_color_temp_control: true
    show_color_control: true
    double_tap_action:
      action: more-info
    hold_action:
      action: more-info
    card_mod:
      style:
        mushroom-shape-icon$: |
          .shape {
            --icon-symbol-size: 25px;
            --icon-size: 36px;
                }
          mushroom-state-info$: |
            .container {
              --card-secondary-font-size: 10px;
              --card-primary-font-size: 10px;
            }
          .: |
            ha-card {
              box-shadow: 0px 0px 0px 0px rgb(32,150,243, 0.6);
              border-radius: 6px;
              {% if states(config.entity) == 'on' %}
                border: 2.5px outset rgb(32,150,243, 0.6) !important;
              {% else %}
                border: none;
              {% endif %}
              font-family: "Roboto"; 
            }
  - type: custom:mushroom-chips-card
    chips:
      - type: template
        icon: mdi:power
        entity: switch.phone_board_main
        secondary_info: none
        card_mod:
          style: |
            ha-card {
              {% if states(config.entity) == 'on' %}
                border: 4px outset rgb(32,150,243, 0.6) !important;
              {% else %}
                border: 4px outset transprant !important;
              {% endif %}
    alignment: end
    card_mod:
      style: |
        ha-card {
          position: absolute;
          top: 12px;
          right: 13px;
          --chip-spacing: -8px !important;
        }

Hassio · November 2, 2023, 9:06am

Is there a way to change the positions of the text (primary) and the icons?
A lot of times I want the icon to be on the right like a normal entity card.

Knipsel

type: custom:mushroom-template-card
primary: livingroom
icon: mdi:toggle-switch-off-outline
card_mod:
  style:
    mushroom-state-info$: |
      .container {
        align-items: end;
      } |

Hassio · November 2, 2023, 9:36am

Oke I got it.

The only thing I cant get to work, is to add a shadow to the mushroom-shape-icon

type: custom:mushroom-light-card
entity: light.livingroom
name: livingroom
secondary_info: none
icon: mdi:toggle-switch
card_mod:
  style:
    mushroom-state-info$: |
      .container {
        align-items: start;
        transform: scalex(-1);
      }
    .: |
      ha-card {
        ha-card-background: none;
        transform: scalex(-1);
      }
      mushroom-shape-icon {
        --shape-color: rgba(255,255,255,0.9) !important;
      }