I have been consulting the forum, chatGPT and Google for some time today.
I have about 30 custom:bubble-cards in one view, and I want to style them with card-mod. I can style every single one (this works, not problem - but a lot of pasting the same code and not easy to change things later).
Hence I want to style one card “centrally”, and then want the style to be applied to all cards in the same view.
Where is my mistake? Thanks for help!
type: custom:mod-card
card:
type: horizontal-stack
cards:
- type: vertical-stack
cards:
- type: custom:bubble-card
card_mod:
style: |
:host .separator-container {
div:first-child {
position: relative;
left: 4px;
border: 1px solid red;
ha-icon {
display: none;
}
}
div:last-child {
height: 2px !important;
}
}
card_type: separator
name: GUEST ROOM 1
- type: custom:mushroom-light-card
entity: light.simonofficelights
- type: custom:mushroom-light-card
entity: light.simonofficelights
- type: custom:bubble-card
card_type: separator
name: STYLE ME!
- type: vertical-stack
cards:
- type: custom:bubble-card
card_type: separator
name: GUEST BATH
- type: custom:mushroom-light-card
entity: light.simonofficelights
- type: custom:mushroom-light-card
entity: light.simonofficelights
