šŸ”¹ Card-mod - Add css styles to any lovelace card

Then you didnā€™t get the problem. :sunglasses: Anyhow, Iā€™m happen now with my setup and I have optimized it, to not having any card-mod now needed for this case. Card mod has unfortunately the problem, that it is sometimes assigned too late and then I have the stuttering, etc. (In some browser, devices, situations) And in this special case it was not pretty, neither to remove gaps or to add them. As said, no improvements here needed.

Replacing this may cause glitches (may give different results on different devices).
Seriously - sometimes it is better to create a template sensor.

  - entity: sensor.memory_free
    name: replaced unit
    card_mod:
      style:
        ha-state-label-badge $ ha-label-badge $: |
          .badge-container .label-badge .label span::after {
            content: "xxx";
            color: blue;
            letter-spacing: normal;
          }
          .badge-container .label-badge .label span {
            color: transparent;
            letter-spacing: -8px;
          }

ŠøŠ·Š¾Š±Ń€Š°Š¶ŠµŠ½ŠøŠµ

maybe :wink: just to be clear what I meant there:

#type: custom:stack-in-card
#card_mod:
#  style: |
#    ha-card {
#      margin: -16px;
#      box-shadow: none;
#    }
#keep:
#  background: true
#cards:
type: custom:mod-card
card_mod:
  style: |
    ha-card {
      margin: -16px;
      box-shadow: none:
    }
    :host {
      --stack-card-margin: 0px;
    }
card:
  type: custom:hui-element
  card_type: vertical-stack
  cards:

and no further mods required. It tightly knits all enclosed cards together. No gaps. very clean.
if this be done cleaner, Id be interested for sure.

Ill have to lookup you card solution though, because its not easy to find the final card config you ended up with in all posts aboveā€¦

note the margin and box-shadow here are only used because this card is included in an auto-entities card.

meaning, if youā€™d use this as a stand alone card, all modding of the core vertical-stack card would be the

    :host {
      --stack-card-margin: 0px;
    }

This

was the problem. Everything else is clear. So from there I was going to have a someting which is looking as the standard vertical stack but with ha-card-element and without mod-card. And this was solved by the vertical-stack-in-card.

I only referenced you, because I didnā€™t have any problems with vertical-stack-in card but with stack-in-card I have. And somewhere you have written the opposite, that you are not using vertical-stack-in card because you had several problems with vertical-stack-in card, and you are only using only stack-in-card because of this. Curious to read, that this is not the case anymore, and you removed stack-in-card because of problems (I had always). :joy:

BTW, not related to my topic, but only saw this in your example.

is redundant. You can card vertical-stack directly. This is the clue from mod-card. :wink:

A yes, I see.

I donā€™t see the changed order in cards. So never bothered to look into that aspect.

Maybe because I have a layout set on the view.

As for the hui-element: I need that because the card is used inside another card, but will check once again. Thx.

update

can confirm that using:

type: custom:mod-card
card_mod:
  style: |
    ha-card {
      margin: -16px;
      box-shadow: none:
    }
    :host {
      --stack-card-margin: 0px;
    }
card:
  type: vertical-stack
  cards:

works nicely too, thanks for the correction.
apparently we can list core vertical-stack in a core entities card. Never realized that. cool. will clean up possible other cards too :wink:

@arganto so you know I tested vertical-stack-in-card too: it still needs both the hue-element and the card_mod styling to embed it correctly in my auto-entities card:

type: custom:hui-element
card_type: custom:vertical-stack-in-card
card_mod:
  style: |
    ha-card {
      margin: -16px;
      box-shadow: none:
    }
cards:

or:

type: custom:mod-card
card_mod:
  style: |
    ha-card {
      margin: -16px;
      box-shadow: none;
    }
card:
  type: custom:vertical-stack-in-card
  cards:

which are essentially the same. Though the mod-card is officially wrong, since the vertical-stack-in-card has a ha-element ;-0

so, returning to the mod-card on vertical-stack has my preference, it will never be out of sync with the core Frontend.

fyi, the auto-entities does:

  - type: custom:auto-entities
    card:
      type: entities
    show_empty: false
    filter:
      include:
        - entity_id: media_player.plex_*
          state: /playing|paused|'on'/
          options:
            !include /config/dashboard/includes/include_plex_playing.yaml

Using card-mod to compare mini-graph-card & history-graph

I am having an issue after the most recent update where the text size isnā€™t being respected. When I open HA, the text increases on my one markdown but if I leave the tab and return, it goes back to normal. I have had this setup for a year or so and no issues until the most recent update. Here is my yaml

       - cards:
                - content: |
                    # Living Area
                  style:
                    .: |
                      ha-card {
                        --ha-card-background: none !important;
                        box-shadow: none !important;
                        height: 20px !important;
                        margin-top: 15px;
                        color: {% if states('input_text.living_area_helper') | float > 0 %} gold {% endif %};
                      }
                    ha-markdown:
                      $: |
                        h1 {
                          font-size: 20px;
                          font-weight: bold;
                          font-family: Helvetica;
                          letter-spacing: '-0.01em';
                        }
                  type: markdown

And then here is what it looks like vs normal.


Not related to your issue, anyway - do you understand what happens to the style when your condition is FALSE?

Itā€™s just white, which is what Iā€™m after. Or are you saying that the false is messing up the text size?

This is up to a browser to decide how to handle errors.
Check this.

As for your card - what do you expect to see here:
image

Thanks, Iā€™ll add in that portion about the error.

As for your question, I am expecting to see the Living Area text, which shows up, just in variable sizes. Is that what you mean?

I just wanted to note that this set of ā€œheightā€ & ā€œmargin-topā€ causes the card to look strange.
Check a small example - your card is placed in a stack between two cards:

type: vertical-stack
cards:
  - type: entity
    entity: sun.sun
  - type: markdown
    content: Living Area
    card_mod:
      style:
        ha-markdown $: |
          h1 {
            font-size: 20px;
            font-weight: bold;
            font-family: Helvetica;
            letter-spacing: '-0.01em';
          }
        .: |
          ha-card {
            --ha-card-background: none !important;
            box-shadow: none !important;
            height: 20px !important;
            margin-top: 15px;
            color: red;
          }
  - type: entity
    entity: sun.sun

image

image

Without those 2 cards:

image

image

P.S. Do not bother that I removed ā€œ#ā€ for a ā€œcontentā€, my post is about ā€œheightā€ & ā€œmargin-topā€ only.
Nothing is changed with ā€œ#ā€ (except font etc for the content):
image

Like many of us, Iā€™m using nested vertical/horizontal-stack cards, stack-in-cards, and mushroom cards (mostly chip and template) to assemble an overview, wellā€¦view.

Is there a way to make a CSS setting apply to all elements within a dashboard or does every card-mod block have to be inserted into each separate card? My understanding is that CSS is hierarchical, but not sure how to translate that for efficient use of card-mod (e.g. place a single card-mod block in a vertical-stack that increases the font size of all elements it containts).

No variable font size there. Seems to work fine. Whatā€™s strange is that only one of the markdown cards increases in text size, the other doesnā€™t

I do not understand you.
Please post a code for this card.

Here is the yaml for the card that I posted above. The Living Area text changes in size since the most recent update, where the There are currently.... text remains the same in terms of text size

             - cards:
                    - content: |
                        # Living Area
                      style:
                        .: |
                          ha-card {
                            --ha-card-background: none !important;
                            box-shadow: none !important;
                            height: 20px !important;
                            margin-top: 15px;
                            color: {% if states('input_text.living_area_helper') | float > 0 %} gold {% endif %};
                          }
                        ha-markdown:
                          $: |
                            h1 {
                              font-size: 20px;
                              font-weight: bold;
                              font-family: Helvetica;
                              letter-spacing: '-0.01em';
                            }
                      type: markdown
                    - content: >
                        There {% if is_state('input_text.living_area_helper',
                        '0') %} are currently no lights on {% elif
                        is_state('input_text.living_area_helper', '1') %}   is
                        currently {{states('input_text.living_area_helper')}}
                        light on  {% else %} are currently
                        {{states('input_text.living_area_helper')}} lights on 
                        {%
                               endif %}
                      style:
                        .: |
                          ha-card {
                            --ha-card-background: none !important;
                            box-shadow: none !important;
                            color: {% if states('input_text.living_area_helper') | float > 0 %} gold {% endif %};
                          }
                        ha-markdown:
                          $: |
                            h1 {
                              font-size: 15px;
                              font-weight: thin;
                              font-family: Helvetica;
                              letter-spacing: '-0.01em';
                            }
                      type: markdown

Your code is not properly formatted to be analysed.

Sorry. I had it as block code. I adjusted.

Btw, you keep posting this. As I told you - it causes errors.

I do not see any ā€œh1ā€ text here.

Also, regarding your construction:

                      style:
                        .: |
                          ha-card {
                          }
                        ha-markdown:
                          $: |
                            h1 {
                            }

I do not think it is right.
Check these examples:

type: vertical-stack
cards:
  - type: markdown
    content: |
      # ha-markdown $
    card_mod:
      style:
        ha-markdown $: |
          h1 {
            font-size: 10px;
          }
        .: |
          ha-card {
            background-color: red;
          }
  - type: markdown
    content: |
      # ha-markdown:
      # $:
    card_mod:
      style:
        ha-markdown:
          $: |
            h1 {
              font-size: 10px;
            }
        .: |
          ha-card {
            background-color: red;
          }
  - type: markdown
    content: |
      # ha-markdown $
    card_mod:
      style:
        .: |
          ha-card {
            background-color: red;
          }
        ha-markdown $: |
          h1 {
            font-size: 10px;
          }
  - type: markdown
    content: |
      # ha-markdown:
      # $:
    card_mod:
      style:
        .: |
          ha-card {
            background-color: red;
          }
        ha-markdown:
          $: |
            h1 {
              font-size: 10px;
            }

image

2 Likes

Thank you. I will review and try and modify per your example. Also, I didnā€™t update the code, because I wanted to keep the base case, so thatā€™s why you kept seeing the aforementioned error. But thank you for the patience and help and I will try and work through based on your example