Mushroom Cards Card Mod Styling/Config Guide

Correct. The transparency is done by mushroom dynamically when you select a color if you override this color with card mod you have to add transparency back yourself.

You only need to use .: | if you have previously entered the shadow-root of an object, using $. If you dont do that you dont have to use .: | at all. Take a look at the section in the top post called

Its not easy to theme for specific entity types, and i am not too experienced with themes honestly.

I think for what you want to do its probably best to look into the Decluttering card. You can define templates and then use them across multiple cards.

so I have the

  • type: custom:mushroom-chips-card
    chips:

and I want the card centered
so I was thinking…

 - type: custom:mushroom-chips-card
   chips:

   card_mod:
     style: |
       ha-card {
         justify-content: center;
       }

but it looks it isn’t working

The chips centered within the card or the card itself?

I have 4 chips I want centered over the width of my mobile …

Use the built in function:

type: custom:mushroom-chips-card
chips:
  - type: template
    icon: mdi:test-tube
    icon_color: green
    content: Test
  - type: light
    entity: light.bedroom_main_light
    use_light_color: true
alignment: center
alignment: center
1 Like

Here’s the code (yes, I tried border-style: none too):

type: custom:state-switch
entity: group
states:
  admin:
    type: custom:mushroom-chips-card
    chips:
      - type: alarm-control-panel
        entity: alarm_control_panel.54ef44cb9e98_alarm
        content_info: none
      - type: template
        entity: binary_sensor.c88d1f270ec4_contact
        content: >
          {{ state_attr('sensor.nominal_change_history', 'changes')[entity] |
          as_timestamp | timestamp_custom('%H:%M') }}
        icon: mdi:door
        icon_color: >
          {% set ytterdorr = now() - state_attr('sensor.nominal_change_history',
          'changes')[entity] | as_datetime | as_local %} {% if ytterdorr >
          timedelta(minutes=180) and ytterdorr < timedelta(minutes=240) %}

          orange

          {% elif ytterdorr >= timedelta(minutes=240) %}

          red

          {%- else -%}

          grey

          {%- endif %}
        tap_action:
          action: more-info
      - type: template
        content: |2-
                {% if states.light 
                  | rejectattr('attributes.entity_id', 'defined') 
                  | selectattr('state', 'eq', 'on')
                  | map(attribute='entity_id')
                  | list | count  == 0 %}
                 {0}
                {%else %}
          {{states.light 
                  | rejectattr('attributes.entity_id', 'defined') 
                  | selectattr('state', 'eq', 'on')
                  | map(attribute='entity_id')
                  | list | count}}
                {%- endif %}
        icon: mdi:lightbulb
        icon_color: |
          {% if       (states.light 
                      | rejectattr('attributes.entity_id', 'defined') 
                      | selectattr('state', 'eq', 'on')
                      | map(attribute='entity_id')
                      | list | count) >= 1 -%}
          orange
          {%- else -%}
          grey
          {%- endif %}
        tap_action:
          action: call-service
          service: light.turn_off
          data: {}
          target:
            entity_id: light.alla_utom_framsida
      - type: template
        entity: sensor.a4c1385c22dd_temperature
        content: |
          {{ states.sensor.a4c1385c22dd_temperature.state }} °C
        icon: mdi:thermometer
        icon_color: >
          {% set vardagsrum = states.sensor.a4c1385c22dd_temperature.state |
          float(0) %}  {% if vardagsrum > 20.0  and vardagsrum < 23.0 %}

          light-green

          {% elif vardagsrum >= 23.0 %}

          red

          {%- else -%}

          light-blue

          {%- endif %}
        tap_action:
          action: more-info
      - type: spacer
      - type: action
        tap_action:
          action: call-service
          service: input_boolean.toggle
          data: {}
          target:
            entity_id: input_boolean.kiosk_mode
        icon: mdi:unfold-more-horizontal
    card_mod:
      style: |
        ha-card {
          --chip-background: none;
          margin-top: 10px;
          margin-left: 15px;
          margin-right: 15px;
        }

Hello, what am I doing wrong here? Why isn’t the icon flashing?

          - type: conditional
            conditions:
              - condition: state
                entity: switch.heizung
                state: 'off'
            card:
              type: custom:mushroom-template-card
              entity: switch.heizung
              secondary: HZ
              icon: mdi:fire
              icon_color: red
              layout: vertical
              tap_action:
                action: more-info
              card_mod:
                style:
                  mushroom-state-info$: |
                    .container {
                      --card-secondary-font-size: 6px;
                    }
                  .: |
                    ha-card {
                      font-variant: small-caps;
                      background: none !important;
                    {% if is_state('switch.heizung','off') %}
                      ha-card { animation: blink 2s linear infinite; }
                      @keyframes blink { 100% {opacity: 0;} }
                    {%- endif %}
                    }

If I do the whole thing without changing the background, it works without any problems.

          - type: conditional
            conditions:
              - condition: state
                entity: switch.heizung
                state: 'off'
            card:
              type: custom:mushroom-template-card
              entity: switch.heizung
              secondary: HZ
              icon: mdi:fire
              icon_color: red
              layout: vertical
              tap_action:
                action: more-info
              card_mod:
                style: |
                  {% if is_state('switch.heizung','off') %}
                    ha-card { animation: blink 2s linear infinite; }
                    @keyframes blink { 100% {opacity: 0;} }
                  {%- endif %}

your code is very messy in general. try and keep it cleaner and it will be easy to tell what is wrong.

type: custom:mushroom-template-card
entity: switch.heizung
secondary: HZ
icon: mdi:fire
icon_color: red
layout: vertical
tap_action:
  action: more-info
card_mod:
  style:
    mushroom-state-info$: |
      .container {
        --card-secondary-font-size: 6px;
      }
    .: |
      ha-card {
        font-variant: small-caps;
        background: none !important;
        {% if is_state('witch.heizung','off') %}
          animation: blink 2s linear infinite;
        {% endif %}
      }
      @keyframes blink { 
        100% {opacity: 0;} 
      }

keyframes should always be outside the element. and its best to place your if statements inside elements around the specific thing you want to happen if something.

1 Like

try with these:

    card_mod:
      style: |
        ha-card {
          --chip-background: none;
          margin-top: 10px;
          margin-left: 15px;
          margin-right: 15px;
          --chip-box-shadow: none !important;
          --chip-border-width: 0px !important;
        }

Hello together, i am trying to get a liitle visual feedback when i touch the up/down button of my Cover Card.
I already tried it with:

type: custom:mushroom-cover-card
card_mod:
  style:
    mushroom-cover-buttons-control$:
      mushroom-button:nth-child(2)$: |
        .button ::slotted(*) {
          --mdc-ripple-color: blue
          --mdc-ripple-press-opacity: 0.5;
        }
      mushroom-button:nth-child(1)$: |
        .button ::slotted(*) {
          --mdc-ripple-color: blue
          --mdc-ripple-press-opacity: 0.5;
        }  
    mushroom-button$: |
      .button  ::slotted(*) {
        --card-mod-icon: mdi:access-point;
      }
entity: cover.buero
show_position_control: true
show_buttons_control: true

I found stuff like that in the Forum, but it doesnt work in my case.
Anyone any other idea how to get any feedback?

hey can i add these code to any theme?

Dimitri…as i did msg You about something…
(Thank You for awnsering!)
sofar ive made this:
02
the container and left icons are fixed
but not the main button on right hand
and the buttons on the next picture
01
i could not find them to make them smaller in your climate mushroom card guide…
sofar the code:

type: custom:mushroom-climate-card
entity: climate.tstat_f8cf07_t6_thermostat
name: Honeywell T6
hvac_modes:
  - 'off'
show_temperature_control: true
collapsible_controls: true
layout: horizontal
icon_type: entity-picture
icon: mdi:fire
card_mod:
  style:
    mushroom-climate-temperature-control$:
      mushroom-input-number$: |
        #container .button:nth-child(1) {
        --control-icon-size: 15px;
         }
        #container .button:nth-child(3) {
        --control-icon-size: 15px;
         }
        .value {
           font-size: 12px;
         } 
         #container {
         height: 20px !important;
         margin-top: 10px !important;
         }
    mushroom-shape-icon$: |
      .shape {
      --icon-symbol-size: 45px;
      background: none !important;
      }  
    mushroom-badge-icon$: |
      .badge {
      --badge-icon-size: 18px;
      background: none !important;
      }
    .: |
      ha-card {     
          height: 50px !important;
          padding-top: 15px !important;
      }      
view_layout:
  column: 3

Are You able to help out?
thnx!

Here you go. it is certainly something that seems to be missing from the guide. was not aware that having HVAC Modes defined added another button to press.

type: custom:mushroom-climate-card
entity: climate.office_heating
name: Honeywell T6
hvac_modes:
  - 'off'
  - cool
  - fan_only
show_temperature_control: true
collapsible_controls: true
layout: horizontal
icon_type: entity-picture
icon: mdi:fire
card_mod:
  style:
    mushroom-climate-temperature-control$:
      mushroom-input-number$: |
        .button:nth-child(1) {
          --control-icon-size: 15px;
        }
        .button:nth-child(3) {
          --control-icon-size: 15px;
        }
        .value {
           font-size: 12px;
        } 
        #container {
          height: 20px !important;
          margin-top: 10px !important;
        }
    mushroom-climate-hvac-modes-control$:
      mushroom-button:nth-child(1)$: |
        .button {
          --card-mod-icon: mdi:test-tube;
        }
    mushroom-shape-icon$: |
      .shape {
        --icon-symbol-size: 45px;
        background: none !important;
      }  
    mushroom-badge-icon$: |
      .badge {
        --badge-icon-size: 18px;
        background: none !important;
      }
    mushroom-button$: |
      .button {
        --card-mod-icon: mdi:fire;
      }
    .: |
      ha-card {     
        height: 50px !important;
        padding-top: 15px !important;
      }      

the key bits being this:

    mushroom-button$: |
      .button {
        --card-mod-icon: mdi:fire;
      }

and this:

    mushroom-climate-hvac-modes-control$:
      mushroom-button:nth-child(1)$: |
        .button {
          --card-mod-icon: mdi:test-tube;
        }
1 Like

Thank You Dimitri!
That was the trick
Gues i wasn’t blind…
Heheh
Keep Rocking
Buddy!