Remove borders for custom auto-entities card within entities card (within vertical stack)

1

Hi, I am trying to eliminate the border around auto-entities card, which is an entity within entities card.
For now I have this code:

cards:
- type: vertical-stack
  title: Kitchen Controls
  cards:
  - type: entities
    entities:
    - light.kitchen_intelite
    - type: custom:auto-entities
      card:
        type: entities
        show_header_toggle: false
      filter:
        template: |
          {% if is_state('light.kitchen_intelite','on') and is_state('switch.kitchen_intelite_dark_mode','off')%}
            input_number.kitchen_intelite_brightness
            input_number.kitchen_intelite_temperature
          {% endif %}
          {% if is_state('light.kitchen_intelite','on') and is_state('switch.kitchen_intelite_dark_mode','on')%}
            input_number.kitchen_intelite_brightness_dark_mode
          {% endif %}
    footer:
      type: buttons
      entities:
      - entity: switch.kitchen_intelite_mourn_mode
      - entity: switch.kitchen_intelite_noon_mode
      - entity: switch.kitchen_intelite_eve_mode
      - entity: switch.kitchen_intelite_dark_mode

Here is how it looks now when the light is off (see the ugly empty box):
Screen Shot 2020-05-24 at 1.31.43 PM

And here it is with the light is on.
Screen Shot 2020-05-24 at 1.32.02 PM

How can I flatten this? And if it is possible, after flattening this I would also like to move the icons to the left in order to align with the light icon position.

2

Ok, so in my research I came across the mod-card which says:

There are some cards where card-mod just won't work. Those cards often are not really cards at all, but change how other cards work. Examples include: conditional, entity-filter, horizontal-stack and vertical-stack as well as some custom cards, like layout-card, auto-entities and state-switch among others.
So as I use auto-entities card in this setup, I have to use card-mod as an exception.

The code looks now this way:

cards:
- type: vertical-stack
  title: Kitchen Controls
  cards:
  - type: entities
    title: Kitchen Lights
    entities:
    - light.kitchen_intelite
    - type: custom:mod-card
      style: |
        ha-card {
          border: 0px;
          background: none;
          box-shadow: none;
        }
      card:
        type: custom:auto-entities
        show_empty: false
        card:
          type: entities
          show_header_toggle: false
        filter:
          template: |
            {% if is_state('light.kitchen_intelite','on') and is_state('switch.kitchen_intelite_dark_mode','off')%}
             input_number.kitchen_intelite_brightness
              input_number.kitchen_intelite_temperature
            {% endif %}
            {% if is_state('light.kitchen_intelite','on') and is_state('switch.kitchen_intelite_dark_mode','on')%}
             input_number.kitchen_intelite_brightness_dark_mode
            {% endif %}
    footer:
      type: buttons
      entities:
      - entity: switch.kitchen_intelite_mourn_mode
      - entity: switch.kitchen_intelite_noon_mode
      - entity: switch.kitchen_intelite_eve_mode
      - entity: switch.kitchen_intelite_dark_mode

Now the question, ho to modify the following code in order to remove the card border and align the icons of Brightness and Temperature?

      style: |
        ha-card {
          border: 0px;
          background: none;
          box-shadow: none;
        }

Any help would be appreciated.

1 Like
3

Not sure if you have found the answer to your question, since it’s from a long time ago. But I do it this way:

            style:
                .: |
                  #states > * {
                    margin: -1px -15px !important;
                  }
                  ha-card {
                    height: 100%;
                    box-shadow: none;
                    background: none;
                    background-color: rgba(255, 255, 255, 0);
                  }

The margins in there make them be closer to eachother vertically and strech them out horizontally

2 Likes
4

Unfortunately, this does not seem to work for auto-entities card being placed within mod-card… At least I still get borders.

5

I know it’s an old thread, but I found a solution.

type: custom:mod-card
card_mod:
  style: |
    :host {
      --ha-card-border-width: 0px;
    }
card:
  type: custom:auto-entities
  card:
    type: entities
  filter:
    include:
      - domain: light
        state: "on"