How to describe nested elements in mod-card?

Configuration Frontend
1

I am trying to use @thomasloven mod-card in order to style a button-card

This is the element I want to style (the text “date here”):

image
image1040×463 29.6 KB

Its position in the DOM is

image
image1034×42 3.59 KB

My understanding is that I have, starting from <button-card>, the following structure:

  • (it does not matter until <ha-card>)
  • <ha-card> with a shadow-root, so I need to address it as ha-card$
  • a <div>
  • another nested <div> that contains the text I want to style

The code I imagined would work:

          - type: custom:button-card
            name: >
              [[[
                return "date here"
              ]]]
            view_layout:
              grid-area: date
            card_mod:
              style:
                ha-card$:
                  div: |
                    div {
                      font-size: 100px;
                      color: red;
                    }

Well, it does not :roll_eyes:, the style is not applied. Is this how I am expected to code nested elements?

Note: a basic

card_mod:
  style: |
    ha-card {
      color: red;
    }

works fine, so mod-card is correctly installed.

2
  1. Regarding using card-mod:
    I suggest you to post this question in the already present dedicated card-mod thread in the Community:
  • info is kept in one place;
  • you will get answers faster;
  • sharing answers with other people is for good.
  1. Regarding your issue: before keeping moving towards card-mod - think again, may be it is not necessary since button-card has it’s own possibility to style elements (surely, not as powerful as card-mod - but it could be enough).
3

I am a bit surprised because such threads are hardly searchable. But of course I will follow the tradition over here :slight_smile: (and repost the question there)

button-card is just an example, I will have other cards I will need to style so I am looking for a uniform way to do it.

4

Answered here.

1 Like