Styles mushroom-light-card in button-card (room card)

Configuration Frontend
1

Hello community,

I’m modifying this room card, but when it comes to including styles in mushroom it doesn’t apply

image

Code:

type: custom:button-card
name: null
icon: mdi:sofa
icon_color: "#4d4d4d"
custom_fields:
  temp: >
    [[[ return states['sensor.aemet_daily_forecast_temperature'].state + '°C'
    ]]]    
  hum: |
    [[[ return states['sensor.aemet_daily_forecast_temperature'].state + '%' ]]]
  btn1:
    card:
      type: custom:mushroom-light-card
      entity: light.ventilador_despacho
      primary_info: none
      secondary_info: none
      tap_action:
        action: toggle
      icon: mdi:floor-lamp
      use_light_color: false
      card_mod:
        style: |
          ha-card {
            background-color: 
              [[[
                if (states['light.ventilador_despacho'].state === 'off') return '#F8E1B7';  # Fondo cuando está apagado
                return '#754E1A';  # Fondo cuando está encendido
              ]]];
            border-radius: 20px;
          }
          ha-state-icon {
            color: orange;
          }
  btn2:
    card:
      type: custom:mushroom-light-card
      entity: light.interruptor_despacho_luz_de_fondo
      primary_info: none
      secondary_info: none
      tap_action:
        action: toggle
      icon: mdi:television-ambient-light
      card_mod:
        style: |
          ha-card {
            background-color: "#333333";  # Cambiar el color de fondo de btn2
            border-radius: 0px;  # Eliminar el borde redondeado de btn2
          }
        icon:
          - color: "#ffffff"
          - border-radius: 0px
  btn3:
    card:
      type: custom:mushroom-light-card
      entity: light.interruptor_despacho_luz_de_fondo
      primary_info: none
      secondary_info: none
      tap_action:
        action: toggle
      icon: mdi:television-ambient-light
  btn4:
    card:
      type: custom:mushroom-light-card
      entity: light.interruptor_despacho_luz_de_fondo
      primary_info: none
      secondary_info: none
      tap_action:
        action: toggle
      icon: mdi:television-ambient-light
styles:
  grid:
    - grid-template-areas: "\"n n n\" \"temp temp temp\" \"hum hum hum\" \". btn1 btn2 \" \". btn3 btn4\""
    - grid-template-columns: 1fr min-content min-content
    - grid-template-rows: repeat(3, min-content) repeat(2, min-content)
  card:
    - padding: 22px 8px 8px 22px
    - height: 200px
  custom_fields:
    temp:
      - justify-self: start
      - font-size: 14px
      - opacity: "0.7"
      - padding-top: 10px
    hum:
      - justify-self: start
      - font-size: 14px
      - opacity: "0.7"
    btn1:
      - grid-area: btn1
      - justify-content: center
      - align-self: start
      - padding-top: 0px
    btn2:
      - grid-area: btn2
      - justify-content: center
      - align-self: start
    btn3:
      - grid-area: btn3
      - justify-content: center
      - align-self: start
    btn4:
      - grid-area: btn4
      - justify-content: center
      - align-self: start
  name:
    - justify-self: start
    - font-size: 18px
    - font-weight: 500
    - color: white
  img_cell:
    - justify-content: start
    - position: absolute
    - width: 100px
    - height: 100px
    - left: 0
    - bottom: 0
    - margin: 0 0 -20px -20px
    - background: "#b5b5b5"
    - border-radius: 500px
  icon:
    - position: relative
    - width: 40px
    - color: black
    - opacity: "0.8"
    - border-radius: 0px
2

You are using incorrect card_mod code for the mushroom card

This should get you started on the correct path

type: custom:button-card
name: null
icon: mdi:sofa
icon_color: "#4d4d4d"
tap_action:
  action: none
custom_fields:
  temp: >
    [[[ return states['sensor.aemet_daily_forecast_temperature'].state + '°C'
    ]]]    
  hum: |
    [[[ return states['sensor.aemet_daily_forecast_temperature'].state + '%' ]]]
  btn1:
    card:
      type: custom:mushroom-light-card
      entity: light.ventilador_despacho
      primary_info: none
      secondary_info: none
      icon: mdi:light-flood-up
      icon_color: orange
      card_mod:
        style: |
          ha-card {
               background: {% if states( 'light.ventilador_despacho') == 'off' %} #754E1A {% else %} #F8E1B7 {% endif %};
3

The problem is that no “card_mod:style” style applies to me.

4

Do you have card mod installed vis HACS?

The results of the code I posted…

example

5

Yes, in fact, I have tested the card separately for a simpler example

image
image1029×627 29.8 KB

6

Without card button. Version HACS Button Card by [@RomRider] v4.1.2 (Current)

image
image1040×481 20 KB

7

Please try uninstalling card mod and re-installing it. It will not harm your configuration.

8

Now I have uninstalled and reinstalled it. It seems that something incorrect must have been left behind.

image

Thanks

9

There are currently a lot of changes going on. HACs addons are playing catch up.

Glad we made some progress!