Warnings From Card-Mod With Expander Card

Configuration Frontend
1

I’m working a dashboard and need to style out Expander Card. Expander Card is creating a Vertical Stack Card; the only way I can figure out how to apply styles is to wrap it with Card Mod; but I’m getting a “You’re doing it wrong” notice in the terminal.

Anyone know of a better way to do this without breaking things?

240224-ha-card

- type: custom:mod-card
  style: |
    ha-card {
      border: 1px solid #FFFFFF;
      background: #004068;
    }
  card:
    type: custom:expander-card
    title: Kitchen
    button-background: 4068
    expanded: false
    padding: '0'
    child-padding: '0'
    gap: '0'
    clear: true
    title-card:
      type: custom:mushroom-light-card
      entity: light.kitchen_lights
      name: Kitchen
      show_brightness_control: true
      layout: horizontal
      icon_type: icon
      icon: mdi:countertop
      secondary_info: none
      icon_color: yellow
      card_mod:
        style:
          mushroom-shape-icon$: |
            .shape {
              background: #004068 !important;
              border: 1px solid #236289;
            }
          mushroom-light-brightness-control$: |
            mushroom-slider {
              --main-color: #3596d3 !important;
              --bg-color: #82cbf8 !important;
            }
          .: |
            ha-card {
              background: #004068;
              border: transparent;
            }
    cards:
      - type: custom:mushroom-light-card
        entity: light.kitchen_can_lights_island
        name: Island
        show_brightness_control: true
        layout: horizontal
        icon_color: yellow
        secondary_info: none
        card_mod:
          style:
            mushroom-shape-icon$: |
              .shape {
                background: #004068 !important;
                border: 1px solid #236289;
              }
            mushroom-light-brightness-control$: |
              mushroom-slider {
                --main-color: #3596d3 !important;
                --bg-color: #82cbf8 !important;
              }
            .: |
              ha-card {
                background: #004068;
                border: transparent;
              }
      - type: custom:mushroom-light-card
        entity: light.kitchen_can_lights_table
        name: Table
        show_brightness_control: true
        layout: horizontal
        icon_color: yellow
        secondary_info: none
        card_mod:
          style:
            mushroom-shape-icon$: |
              .shape {
                background: #004068 !important;
                border: 1px solid #236289;
              }
            mushroom-light-brightness-control$: |
              mushroom-slider {
                --main-color: #3596d3 !important;
                --bg-color: #82cbf8 !important;
              }
            .: |
              ha-card {
                background: #004068;
                border: transparent;
              }
      - type: custom:mushroom-light-card
        entity: light.kitchen_china_cabinet
        name: China Cabinet
        show_brightness_control: true
        layout: horizontal
        icon_color: yellow
        secondary_info: none
        card_mod:
          style:
            mushroom-shape-icon$: |
              .shape {
                background: #004068 !important;
                border: 1px solid #236289;
              }
            mushroom-light-brightness-control$: |
              mushroom-slider {
                --main-color: #3596d3 !important;
                --bg-color: #82cbf8 !important;
              }
            .: |
              ha-card {
                background: #004068;
                border: transparent;
              }
      - type: horizontal-stack
        cards:
          - type: button
            name: Island
            show_name: true
            show_icon: true
            tap_action:
              action: toggle
            entity: switch.kitchen_island_light
            card_mod:
              style: |
                ha-card {
                  background: #004068;
                  border: transparent;
                  font-size: 12px !important;
                }
          - type: button
            name: Kitchen Up
            show_name: true
            show_icon: true
            tap_action:
              action: toggle
            entity: script.shades_kitchen_all_up_script
            card_mod:
              style: |
                ha-card {
                  background: #004068;
                  border: transparent;
                  font-size: 12px !important;
                }
          - type: button
            name: Kitchen Down
            show_name: true
            show_icon: true
            tap_action:
              action: toggle
            entity: script.shades_kitchen_all_down_script
            card_mod:
              style: |
                ha-card {
                  background: #004068;
                  border: transparent;
                  font-size: 12px !important;
                }
2

may be the expander card does contain ha-card - and there is no need to wrap it into mod-card?

3

If sthe first style: is meant for card-mod, then it should be:

card_mod:
  style:
4

Yes, Expander Card creates a ha-card with two classes: expander-card and clear

But, when I try to apply styling to the expander card, it’s ignored. The class “clear” is setting the background and border to transparent and none (and those are the two items that need to be styled). Can’t seem to override that class.

5
  1. Suggest you to get rid of all this mushrooms inside & test with standard cards first. (same about complex structures with stacks etc; make the work EASIER for yourself)
  2. As it was suggested earlier: use “card_mod” keyword (became obligatory after 3.4.0).
6

Thanks for the suggestions; I’ll try building it out with standard cards and see if that helps.

I have tried using the card_mod / style (not assigning styles to ha-card on the card-mod card). And, that does work on-load (upon refresh, for a micro-second, you can see the styling correctly), but as soon as the rest of the styles are loaded, the styling is removed from the card-mod parent.

7

This fork of the original expander-card gives you more styling options:

Delete the original card and its repository from hacs, then install the forked version using the ‘MY’ button.

1 Like
8

Thanks, I’ll try it!