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

Ildar_Gabdullin · April 21, 2023, 11:33am

This is an old issue.
Consider this pseudocode:

var b = .....;
abc = foo(abc,b);

or this (which gives the same output):

var a = abc;
var b = .....;
abc = foo(a,b);

Here some “abc” variable is reassigned dependingly of itself (i.e. “abc”) and another “b” variable.
The code is executed line-by-line.

Now consider this card-mod code:

  - type: entities
    entities:
      - sun.sun
    card_mod:
      style: |
        ha-card {
          --paper-item-icon-color: var(--some-variable, var(--paper-item-icon-color));
        }

Here a color of icons ("–paper-item-icon-color") MAY BE reassigned to “–some-variable” if it is defined.
Imagine that user-defined “–some-variable” is defined in a custom theme - then icons will have this “–some-variable” color if this theme selected. If a default theme is used (or this variable is not defined in the selected theme) - then a default “–paper-item-icon-color” is used.

Unfortunately this code does not work - as well as this:

        ha-card {
          {% set COLOR = 'var(--paper-item-icon-color)' %}
          --paper-item-icon-color: var(--some-variable, {{COLOR}});
        }

Seems that a kind of loop occurs here - i.e. code is NOT executed line-by-line.
The only working solution is using an explicit value instead of variable (which is not flexible as it could be):

        ha-card {
          --paper-item-icon-color: var(--some-variable, #44739e);
        }

salgari · April 22, 2023, 5:39am

hola, tengo un icono y no consigo dejarlo sin margenes, es decir ancho y alto misma medida, ¿donde esta mi error?, gracias

show_name: false
show_icon: true
type: custom:button-card
tap_action:
action: toggle
entity: cover.persiana_guillermo
hold_action:
action: call-service
service: cover.close_cover
target: {}
icon: mdi:arrow-down-box
card_mod:
style: |
ha-card {
–ha-card-background: #0A0A0A66;
color: var(–primary-color);
border: solid 3px #85EFED;
transform: scale(0.7,0.7);
margin: 8px -10px 8px 9px;
}

parautenbach · April 22, 2023, 7:12am

You need to post in English and format your config.

salgari · April 22, 2023, 8:06am

Hello, I have an icon and I can’t leave it without margins, that is, the same width and height, the same measurement, where is my mistake? Thank you

show_name: false
show_icon: true
type: custom:button-card
tap_action:
action: toggle
entity: cover.persiana_guillermo
hold_action:
action: call-service
service: cover.close_cover
target: {}
icon: mdi:arrow-down-box
card_mod:
style: |
ha-card {
–ha-card-background: #0A0A0A66;
color: var(–primary-color);
border: solid 3px #85EFED;
transform: scale(0.7,0.7);
margin: 8px -10px 8px 9px;
}

salgari · April 22, 2023, 8:58am

actually i want to do this but with all the custom buttons
shutter

elementoulis · April 22, 2023, 12:15pm

Hello, I am trying to put some CSS using card-mod into two custom cards combined within each other.

The custom cards are:

button card (the templated one that minimalist ui offers)
swipe card

My issue is that the button card being inside the swipe card does not allow me to swipe as the container of elements inside the button-card is almost as big as the swipe area. To avoid double-posting my issue can be seen here in the swipe thread: Lovelace: Swiper card - #625 by elementoulis

I ended up realizing that card-mod could help me shrink down the container of elements allowing me some more “un-tappable” room for my finger to swipe. But for the love of God I can’t figure out how to target it properly. I’ve discovered that I need to introduce some padding-right: 70px; as seen in the picture below.

Any help would be greatly appreciated.

e-raser · April 23, 2023, 2:53pm

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 · April 24, 2023, 1:25pm

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 · April 24, 2023, 2:04pm

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 · April 24, 2023, 2:10pm

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

arganto · April 24, 2023, 2:32pm

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 · April 24, 2023, 8:52pm

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.
Clipboard01

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 · April 25, 2023, 4:09am

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 · April 25, 2023, 5:22am

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 · April 25, 2023, 5:42am

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

tom_l · April 25, 2023, 5:50am

Ah ok. So how would I reference it?

arganto · April 25, 2023, 6:43am

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 · April 25, 2023, 7:29am

Perfect. Thanks.

Mariusthvdb · April 25, 2023, 8:12am

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 · April 25, 2023, 9:56am

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?