🔹 Card-mod - Add css styles to any lovelace card

[e-raser]

@Ildar_Gabdullin

For "multiple-entity-row" it is much tricky:

Is there a way to actually remove the original text (which is still shown just invisible and therefore having a negative effect on the look/layout)?

E. g. I have:

...
      - type: custom:multiple-entity-row
        entity: update.firefox_update
        name: Firefox
        toggle: false
        state_color: true
        show_state: false
        secondary_info: null
        style: |
          :host .entities-row {
            justify-content: flex-start;
            align-items: unset;
          }
          :host .entities-row div.entity:nth-child(1) div::before {
            {% if states('sensor.firefox_cpu_percent') | float(0) > 5 %}
              color: orange;
            {% endif %}
            {% if is_state('sensor.firefox_cpu_percent','unavailable') %}
              color: red;
              content: "❌";
              line-height: var(--mdc-typography-body1-line-height, 1.5rem);
            {% endif %}
          }
          :host .entities-row div.entity:nth-child(1) div {
            color: transparent;
            line-height: 0px;
          }
          :host .entities-row div.entity:nth-child(2) div::before  {
            {% if states('sensor.firefox_memory_percent') | float(0) > 5 %}
              color: orange;
            {% endif %}
            {% if is_state('sensor.firefox_memory_percent','unavailable') %}
              color: red;
              content: "❌";
              line-height: var(--mdc-typography-body1-line-height, 1.5rem);
            {% endif %}
          }
          :host .entities-row div.entity:nth-child(2) div {
            color: transparent;
            line-height: 0px;
          }
          :host .entities-row div.entity:nth-child(3) div::before {
            {% if states('binary_sensor.firefox_running') == "on" %}
              color: green;
            {% else %}
              color: red;
              content: "❌";
              line-height: var(--mdc-typography-body1-line-height, 1.5rem);
            {% endif %}
          }
          :host .entities-row div.entity:nth-child(3) div {
            color: transparent;
            line-height: 0px;
          }
        entities:
          - entity: sensor.firefox_cpu_percent
            name: CPU
          - entity: sensor.firefox_memory_percent
            name: RAM
          - entity: binary_sensor.firefox_running
            name: Status
        state_header: ''
        column: false
...

Giving this not really good looking result:

And that’s obviously because of this original (invisible, but existing) text:

Any possibility to get rid of that / maintain a good look/layout?

[Lunkobelix]

I have an issue since a few weeks where the background of a card doesn’t load occassionally. It issue occurs maybe 25% of the times on my phone and 90% of the times on my laptop.

This is only an issue on the first lovelace tab and the content of the card doesn’t matter, same layout on other cards but they work fine. Changing the order of the tabs still causes the issue only on the first tab. I have simplified it to a markdown card with just a table and the word “Test” and I still get the issue. Hitting Ctrl-F5 solves the issue always.

Before Ctrl-F5:

After Ctrl-F5:

type: markdown
content: |
  <table width="100%" border="0" cellspacing="0" cellpadding="0">
     <tr>
      <td colspan="3">Test</td>
    </tr>
  </table>
card_mod:
  style:
    .: |
      ha-card {
        margin: 17px 15px 0px 15px;
        --ha-card-background: rgba(250, 250, 250, 1.0);
        box-shadow: none;
        font-size: 15px;
        font-family: 'Segoe UI Light';
        color: #404040;
        font-weight: 300;
        text-align: left;
        border-radius: 15px;
        --mdc-icon-size: 35px;
      }

This is kind of a deal breaker to me because the entire Lovelace tab looks weird and I haven’t found a way around it, so all help is appreciated.

[arganto]

I don’t know if this would improve the situation, but why do you set the variable there and not directly the background? At least, this is one assignment iteration, which can be reduced. And secondly (as workaround), you can apply themes per card as well, if the problem will not be solved, where you can overwrite.as well.

[Lunkobelix]

@arganto

why do you set the variable there and not directly the background

Not sure I follow, would you mind explaining or showing an example?

[arganto]

You are assigning your color to the variable --ha-card-background. So here you don’t set the color of the background, but only the variable, which is then only applied in a second step to the background. Possible as well:

          ha-card {
            margin: 17px 15px 0px 15px;
            background: rgba(250, 250, 250, 1.0);
            box-shadow: none;
            font-size: 15px;
            font-family: 'Segoe UI Light';
            color: #404040;
            font-weight: 300;
            text-align: left;
            border-radius: 15px;
            --mdc-icon-size: 35px;
          }

But as said, this will most probably not solve everything here, because in your screenshots the other attributes are missing as well before reload.

[arythm]

Hey guys,
I am struggling with changing the borders of my card as well as animate the icon at the same time. I have tried various combinations of code I found in this thread but as I do not understand how the structure works I cannot find a solution. I only found examples for one or the other. When I copy everything from the example page below, I can get the icon to move. However, the corners do not line up, the background color doesn’t get applied and the border does not show up either.

My goal is to animate the trash can as well as change the color depending on the stat_attr of the calendar. Last but not least everything should fit together nicely. Which I don’t know how to do.

type: custom:stack-in-card
cards:
  - type: custom:mushroom-template-card
    icon: mdi:trash-can
    icon_color: green
    primary: >-
      {% if (states('calendar.muell') == 'on') %} 
        Heute wird die {{state_attr('calendar.muell','message')}}tonne geleert.
      {% else %} Morgen wird die {{state_attr('calendar.muell','message')}}tonne
      geleert. {% endif %}
    secondary: |-
      {% if (states('calendar.muell') == 'on') %} 
        Mülltonne rausgestellt? 
      {% else %} 
       Rausstellen nicht vergessen.
      {% endif %}
    entity: calendar.muell
    card_mod:
      style:
        mushroom-shape-icon$: |
          ha-icon {
            clip-path: inset(26% 0 0 0);
          }
          ha-card {
          height: 80px;
          border-color: {% if is_state_attr('calendar.muell',
          'message', 'Wertstoff')  %} #008000 {% else %} #8B4513 {% endif %};
          border-style: inset; border-width: 5px;  

          background-color: {% if is_state_attr('calendar.muell', 'message',
          'Wertstoff') %} rgb( 31 139 34 / 0.1) {% else %} rgb( 139 69 19 / 0.1)
          {% endif %}; }
          }
          border-style: inset; border-width: 5px; 
  - type: custom:mushroom-template-card
    icon: mdi:trash-can
    icon_color: green
    card_mod:
      style:
        mushroom-shape-icon$: |
          ha-icon {
            --icon-animation: lid 1s ease infinite;
            clip-path: inset(0 0 75% 0);
            transform-origin: 50% 25%;
          }
          @keyframes lid {
            0%, 50%, 80%, 100% { transform: translateY(0); }
            10% { transform: translateY(-5px) rotate(-37deg); }
            20% { transform: translateY(-5px) rotate(31deg); }
            30% { transform: translateY(-5px) rotate(-25deg); }
            40% { transform: translateY(-5px) rotate(19deg); }
            60% { transform: translateY(-3px); }
          }
          .shape {
            --shape-color: none;
            top: 0.3px;
          }
        .: |
          ha-card {
            width: 80;
            top: -66px;
          }
card_mod:
  style: |
    ha-card {
      height: 80px;

     }

I do not know how to differentiate between ha_card and ha-icon. So it is possible the current version doesn’t make any kind of sense to someone who knows what they are doing.

I’d appreciate any kind of help. Thank you.

edit: I also found the page where the is a code example for the animations. But that leads me to the same problem that I do not know how to put it into my existing code.

[tom_l]

Another custom card. What am I doing wrong here?

card_mod:
  class: top-level-card
  style:
    $: |
      ha-card div#current {
        font-size: 20px !important;
        font-weight: 300 !important;
        letter-spacing: 0px !important;
        padding-top: 0px !important;
        padding-bottom: 28px !important;
      }

[Lunkobelix]

Thanks for looking into this, and I see your point which makes sense. I changed the code but unfortunetely the inconcistant behaviour continues.

Edit:
Just realized that this is not background specific but affects all cards in the first tab. A simple text card with a different font is not loaded properly either. As always, a Ctrl-F5 fixes the issue temporarily.

Am I the only one with this issue? Nothing has changed in my code, this started happening a few weeks ago. Have no clue where to start looking or debugging.

[arganto]

Without testing and knowing if it brings a step: current is a class and not (as addressed by you) an id.

[tom_l]

Ah ok. So how would I reference it?

[arganto]

div.current or only .current.

And: I don’t think (if I can see it correctly from the path (btw, there you can always find how to address as well, here div.current) on bottom of your screenshot, as the tree is not complete, that you have to go in the shadow, so try .: | instead of $: |

[tom_l]

Perfect. Thanks.

[Mariusthvdb (Marius)]

so what did you end up with Tom?
Also having my share of issues here (on another card btw, the new horizon-card) , and hope to find some help in your solution…

[parautenbach (Pieter Rautenbach)]

@Lunkobelix

Am I the only one with this issue?

I’ve had issues with styling the markdown card since the December update.

Also take note of this in the card-mod docs:

NOTE 2: Following on the note above; due to the high level of load order optimization used in Home Assistant, it is not guaranteed that the #shadow-root or the mwc-button actually exists at the point in time when card-mod is looking for it. If you use the second method above, card-mod will be able to retry looking for #shadow-root at a later point, which may lead to more stable operation.

In short; if things seem to be working intermittently - try splitting up the chain.

I previously made this with a markdown card, which is what broke.

After asking here, I subsequently logged this issue, because I could see the <style> wasn’t being injected at all levels. I then later on spotted that some elements are dynamically reloaded, the the style appears shortly before disappearing. I fear there’s nothing card-mod can do about this.

Can you see a <style> element at all levels?

[Lunkobelix]

Thank you for your reply, so this is an issue that is not isolated to my environment. Not sure if that’s good or bad

I set up a super simple tab in Lovelace and looks to me that the style tag is empty, is that what you mean?

[parautenbach (Pieter Rautenbach)]

In my case it was absent from a specific point downwards. If you have the tag, it means card-mod should work. You just need to get the path right.

[Lunkobelix]

How do you mean with getting the path right? This worked perfectly for months and then all of a sudden it stopped working but works occasionally and a Ctrl-F5 always works and on my phone it works almost all the time. So feels like it should be OK code wise?

Getting a bit desperate here since that background is very important for my way of designing HA dashboards

How are you resonating around this, waiting for a fix or trying to solve it?

Summare of devices:

• Android phone (app). Works fine 9/10 times
• iPad, tried a few times and worked just fine
• Firefox on my laptop, seems to work fine
• Chrome on laptop: Works 1/10 times. hard refresh solves the issue.

[cody0303 (Cody Clemons)]

I need to figure out how to address this image using card-mod. I want to set a max height. I just can’t seem to figure out what to put in front of the curly brace. What I have below is effectively what I want, but it’s obviously not working. What do I replace “img” with?

          - type: picture-entity
            entity: camera.apod_nasa_gov
            show_name: false
            show_state: false
            card_mod:
              style: |
                ha-card {
                  border-radius: 0px;
                  border: none;
                  box-shadow: none;
                  background: rgba(0,0,0,0);
                }
                img {
                  max-height: 250px;
                  width: 100%;
                  object-fit: scale-down !important;
                }

[parautenbach (Pieter Rautenbach)]

@Lunkobelix

How do you mean with getting the path right?

The keys in your card-mod config that’s basically a CSS selector (the path).

@Lunkobelix

This worked perfectly for months and then all of a sudden it stopped working but works occasionally and a Ctrl-F5 always works and on my phone it works almost all the time. So feels like it should be OK code wise?

You showed that you had an empty <style> element, so what’s in your config isn’t ending up where it should or where you are expecting it to be. I can’t say what the answer is, besides that you need to investigate the path (see above). Something could be sitting at a different level in the HTML than where it used to be.

@Lunkobelix

How are you resonating around this, waiting for a fix or trying to solve it?

Honestly, I hate to admit this, but I gave up on my old solution. I tried every CSS trick known to me but couldn’t get anything reliable working. I didn’t want to install another custom card (there are cards for rendering HTML or your custom tables), so I just coded it with HTML and some JS to construct my table, and then CSS to style it, all in a fake custom button card. I’m not posting my solution here as it’s would be off topic, but I can DM it to you or you can start a new thread and tag me.

[Lunkobelix]

Sorry to hear, makes me realize that I might have to reconsider my entire layout since it heavily relies on card-mod and CSS being applied. Initally thought it was the background that was the issue but now I know it’s the applying of CSS to markdown cards that is the issue.

Please share your workaround in a PM and I’ll see if I can use it.

@thomasloven, should I create a github issue on this or do you have any ideas why we have this issue? My original post about this issue is here.