BUG: vertical-stack-in-card does not work properly with popular styling plugin "card-mod" (by thomasloven)

Hello, I just noticed that vertical-Stack-in-card does not work properly with popular styling “card-mod”.

Versions: vertical-stack-in-card: 0.4.0 card-mod: 3.0.5 HA: 2021.1.5

Symptoms: Configure more than one instance of vertical-stack-in-card on the same page. Then set the unique/different styling of each instance (with card-mod) - e.g. by setting different background JPG. After saving all instances will have the same CSS settings 😦

Example I wanted to have 4 instances with different background e.g. first with

title: Kitchen
type: 'custom:vertical-stack-in-card'
cards:
(...)
card_mod:
  style: |
    ha-card {
      background: url("/local/Kitchen.jpg") center no-repeat;
    }

second with

title: Livingroom
type: 'custom:vertical-stack-in-card'
cards:
(...)
card_mod:
  style: |
    ha-card {
      background: url("/local/Livingroom.jpg") center no-repeat;
    }

In “card editor” the background is rendered correctly (each card has different background) but after saving and closing the editor all cards on the page change it’s background (JPG) to the one configured with the last vertical-stack-in-card on the page. It looks like the “ha-card” style is shared between all instances on the page and it’s is overridden with the value set by the last instance in a page code - therefore and will be always the same on all instances.

Note: The other custom cards like “banner-card” or “thermostat-dark-card” do not have this issue - they can have a different background on the different instance on the same page using card-mod… so I think this is the BUG of vertical-stack-in-card.

Question: Can you fix it to make it fully compatible with "card-mod’ by thomasloven?

Issue Analytics

State:
Created 3 years ago
Reactions:2
Comments:5 (2 by maintainers)

Top GitHub Comments

1reaction

regevbrcommented, Sep 29, 2021

@sstefanowski I fixed it in PR #111, until it is merged, you can just apply the same changes to the code in your config folder (which is what I did)

0reactions

artem30801commented, Jun 25, 2021

Hi there, please try this config:

title: Kitchen
type: 'custom:vertical-stack-in-card'
styles:
  '--ha-card-background': 'url("/local/Kitchen.jpg") center no-repeat;'
cards:
(...)

Thank you for your reply! Tried this code (colors instead of images):

  - title: Test
    cards:
      - title: Kitchen
        type: "custom:vertical-stack-in-card"
        card_mod:
          style: |
            ha-card {
              --ha-card-background: rgba(0, 255, 0, 1);
            }
        cards:
          - type: markdown
            content: >
              ## Lovelace
          - type: markdown
            content: >
              ## Lovelace2
      - title: Livingroom
        type: "custom:vertical-stack-in-card"
        card_mod:
          style: |
            ha-card {
              --ha-card-background: rgba(255, 0, 0, 1);
            }
        cards:
          - type: markdown
            content: >
              ## Lovelace3
          - type: markdown
            content: >
              ## Lovelace4

Result: (only last style applied, despite the fact that the first card should be green)

I then tried your suggestion, @ofekashery , with code

  - title: Test
    cards:
      - title: Kitchen
        type: "custom:vertical-stack-in-card"
        styles:
          "--ha-card-background": rgba(0, 255, 0, 1)
        cards:
          - type: markdown
            content: >
              ## Lovelace
          - type: markdown
            content: >
              ## Lovelace2
      - title: Livingroom
        type: "custom:vertical-stack-in-card"
        styles:
          "--ha-card-background": rgba(255, 0, 0, 1)
        cards:
          - type: markdown
            content: >
              ## Lovelace3
          - type: markdown
            content: >
              ## Lovelace4

Result: (it works as expected, but it only changes styles of child cards, not original vertical-stack-in-card)

Top Results From Across the Web

Error update from 0.106 · Issue #37 · thomasloven/lovelace ...

Hello, in my configuration I wrote this code and it worked fine before 105.5, but the 106 update gives me errors. You can...

Card-mod - Add css styles to any lovelace card

This is not a custom card. Instead it's a plugin which changes the way all other cards work How about this? type: entities...

custom-cards - Bountysource

Hello, I just noticed that vertical-Stack-in-card does not work properly with popular styling "card-mod". Symptoms: When you configure more than one vertical- ......

Home Assistant | Does anyone know of a way to apply CSS ...

GitHub - thomasloven/lovelace-card-mod: Add CSS styles to (almost) any lovelace ... problem I would like to solve - I'm sure I'm not the...

The lovelace-card-mod from thomasloven - GithubHelp

[x] Have followed the troubleshooting steps of the "Common Problems" section of https://github.com/thomasloven/hass-config/wiki/Lovelace-Plugins. [x] Understand ...