search

custom-cards / stack-in-card

🛠 group multiple cards into one card without the borders
MIT License
262 stars 24 forks source link

styles feature similar to your button-card #16

Closed ktownsend-personal closed 3 years ago

ktownsend-personal commented 3 years ago

Is your feature request related to a problem? Please describe. I have a need for a vertical-stack inside a picture-elements card, but unfortunately picture-elements card can't use native elements directly. As a possible solution I tried to use your stack-in-card. The problem is that I can't style the background-color appropriately. I'm attempting to use rgba(0,0,0,0.4) in the style property that picture-elements uses for child elements, but that only applies to the outer element of your card and you have an inner element inside a shadow root that is forcing the background color to be --card-background-color (ha-card.type-custom-stack-in-card). In my case, I need that to be transparent so that the styles applied by the picture-elements card on the parent element can be effective.

I don't need any of the features of your stack-in-card, so maybe there is a better way to use native cards in the picture-elements card. Ideally the picture-elements card would get updated someday to allow native cards directly, but a next-best option would be a simple custom wrapper card that can contain a native or custom card. My 2nd workaround below is based on that idea and works well, but it seems heavier than necessary to use a custom:button-card in that way. I'm interested to know if you happen to be aware of a simpler custom card to wrap a native card.

Describe the solution you'd like The styles config feature you have in your custom button card seems like a reasonable way to expose styling for the elements in the shadow root. Another option would be making the background-color of ha-card.type-custom-stack-in-card transparent by default so that background styling applied to the outer element can be effective.

Describe alternatives you've considered There are 2 workarounds that I found:

  1. use card-mod to reach into the shadow root and set background-color:transparent on ha-card.type-custom-stack-in-card
  2. use a custom:button-card as a container for the native vertical-stack so that I can control the styles more easily (instead of using stack-in-card at all)

Additional context I'm currently using the 2nd workaround because I already have a "container" template for the custom:button-card.

RomRider commented 3 years ago

Did you try with type: custom:hui-vertical-stack-card ?

ktownsend-personal commented 3 years ago

I was not aware of that name syntax to reference the vertical stack card. I will have to try it and see. Interestingly, I seem to have completely forgotten what I was trying to do when I asked this question. I'll have to remember to put more context for myself the next time 🙂

ktownsend-personal commented 3 years ago

I finally got a chance to try out your suggestion, and it works perfectly, I'm going to make a note of that technique. Thanks!