Trying to git gud at this, but super confused. I’m breaking apart my super bloated dashboard to reuse code and make it easier to modify by creating a theme around it with variables.
So for example, I have entities cards that wrap many others at the top level, to give them a title mostly and I do it like this:
type: entities
card_mod:
class: card-wrapper
title: Lampar
show_header_toggle: false
And in the theme file:
card-mod-card: |
.card-wrapper {
width: var(--ha-width) !important;
margin: 0 auto;
font-weight: var(--header-weight);
font-size: var(--header-font-size);
background: none;
border: none;
}
And I guess this is fine? Please correct me if I’m wrong.
But then I get to more complicated cards like our shopping list (todo integration), where I’ve previously styled a lot of different elements with card_mod. Using pretty generic selectors in card_mod was fine, but now I’m sure I’m doing something wrong:
entities:
- type: custom:hui-todo-list-card
entity: todo.innkaupalisti
title: ''
card_mod:
class: todo-list
Ok all good so far? But then on the other side, in the theme file, I have no idea how to explicitly select all of the elements I was styling before, and I’m sure it can’t be right just to paste something super generic like this under card-mod-card:
ha-card.todo-list {
background: var(--list-gradient) !important;
border: none;
padding-bottom: 20px;
}
div.header {
display: none;
}
.divider {
display: none;
}
The first definition is fine, ha-card.todo-list, it’s this list and no other, but then I have no idea how to select the other two properly. I hope I’m making myself clear. The very short documentation on this and my knowledge are to far apart to gel…
