Does anyone know if it is possible and how to wrap custom cards in the ha-card element using making use of lovelace-card-mod integration?
It can be done with the integration but this will require to only use yaml.
#Add ha-card element to all the cards
dapper glacier
smoky pasture
I'm not quite following what you're asking for. Are you asking about how to use card_mod with a custom card? You still have to edit the card's YAML via Show Code Editor and add your card_mod.
For example:```yaml
type: custom:mushroom-chips-card
chips:
- type: entity
entity: person.derek
use_entity_picture: true
card_mod:
style: |
ha-card {
border: none;
--chip-box-shadow: none;
--chip-background: none;
--chip-font-size: 24px;
--chip-padding: 0 0.3em;
--text-color: red;
--chip-height: 75px;
--chip-border-radius: 45px;
}
dapper glacier
not really. some custom cards are not wrapped in a ha-card element, which makes them have a different style of the wrapper. I was wondering if anyone know a custom card that will force other custom cards to be wrapped in a ha-card element
or maybe I just don't understand how the ha-card element works
smoky pasture
That, ultimately, is going to come down to the custom card's developer and how they designed the card. You can still use card-mod on non ha-card elements and shadow root sections.
This is an example were I was accessing different portions of a slider. (Sharing as a image and not text because this code is broken and no longer works.)
dapper glacier
yeah, I've been doing this, but it just becomes hard to maintain. I guess it's better to just use as much default ha-cards I can
smoky pasture
True. But not everything is accessible in the ha-card element. Generally, the basic stuff is there but when you want to drill into the design a bit more, that's when you have to be a bit more creative.
This is another example that I was playing with. ```yaml
type: custom:mushroom-media-player-card
entity: media_player.living_room_6
card_mod:
style:
mushroom-shape-icon$: |
.shape {
--shape-color: rgba(0,200,0,0.2) !important;
}
.: |
ha-card {
--card-primary-color: green;
--card-secondary-color: green;
background: rgba(0,200,0,0.1);
}
ha-state-icon {
color: green
}
dapper glacier
here for instance the cards that are wrapped in that ha-card have that nice wrapper with shadow around. if they are not wrapped they don't have which makes them have different paddings, etc
smoky pasture
What card in particular do you mean?
dapper glacier
the titles and the half width cards
smoky pasture
Are you using the Sections view? There's a lot that is still work-in-progress with that view.
dapper glacier
yes, but I doubt it has something to to with it. if I put that title card on a grid view will look the same
smoky pasture
Are you using Mushroom cards?
dapper glacier
yes, but they look fine
smoky pasture
Okay. I don't know what card you're using to show the titles. That's why I keep trying to figure out what specific card you're using.
dapper glacier
see, here the muchroom cards are nicely wrapped in that light gray wrapper. but not the title. what it would be nice is to have control over wrapper. for instance if used alone a mushroom card would look like it does now. if wrapped in a grid or stack card, wrap all those cards in that container
it's bubble card, but again this is the case with other cards as well.
smoky pasture
From the card_mod docs:
NOTE: card-mod only works on cards that contain a ha-card element. This includes almost every card which can be seen, but not e.g. conditional, entity_filter, vertical-stack, horizontal-stack, grid.
Note, though that those cards often include other cards, which card-mod can work on.
See the manual for each card to see how to specify parameters for the included card(s).