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

[maxym]

Hellow, thank you for your response.

Please see the image below.
While I can use picture-elements for the image itself and sensor values, I’m playing with idea to draw lines like for odometer. But I don’t want to bake those lines into the picture. I would like to plot them over the picture.

There are several methods how to achieve that in html and/or JS. In HA options are rather limited. But with custom button card, I can render any HTML. I succeeded with 1px divs (rotated) as well as with SVG. The result of the latter is seen in the picture. And it seems SVG is easiest way to go.

I figured out those methods (especially using the custom button card) later, after posting to this thread. So answering to not leave your question unanswered.
Now the only issue I have is, that those lines don’t scale their position together with responsive size changes. But it’s another -not card-mod related - case.

[bluk]

Can you apply CSS styling to events from a particular calendar entity? I’d like all events from my ‘family calendar’ to have a unique background-color. The below allows me to set the background color for all events to green.

type: grid
columns: 1
square: false
cards:
  - type: calendar
    entities:
      - calendar.family
      - calendar.garbage
      - calendar.birthdays
      - calendar.compost
    initial_view: dayGridMonth
    card_mod:
      style:
        ha-full-calendar:
          $: >
            .fc-daygrid-event {
              background-color: green !important; 
            }

[parautenbach (Pieter Rautenbach)]

@maxym

But I don’t want to bake those lines into the picture. I would like to plot them over the picture.

Right, that’s how I understood you.

@maxym

And it seems SVG is easiest way to go.

Just a clarification from my side: What I originally meant was that if you wanted to draw over existing on SVG canvas, that it will be problematic with card-mod, but drawing with SVG would’ve been possible (at the time of writing, but you’ve since got it going).

@maxym

So answering to not leave your question unanswered.

Thanks.

@maxym

those lines don’t scale their position together with responsive size changes

That’s an (unsolvable) problem with the picture elements card I’ve seen many times here, especially from people using it for floorplans. The best you can do is to design for one interface/device, or pick something other than the picture elements card.

@maxym

with custom button card, I can render any HTML

I happen to have done the same thing recently due to limitations because of all the UI changes the past few months (not a rant statement, just a fact). It’s neat, but took some effort. In fact, I wrote the HTML with JS and then still injected styles with card-mod (to keep structure and styling apart, semantically).

[Martin_Granger]

Hi all - I’m using card mod to show a box that contains tasks from Grocy, but only when there are some taks.
The problem is that I want this box to disappear if tasks are more than 3 days away. currently it displays if there are any upcoming tasks.

Any idea how I could do that?
This is my code for the card:

type: custom:grocy-chores-card
entity:
  - sensor.grocy_tasks
title: You have tasks to complete!
show_days: 1
show_quantity: 5
show_assigned: false
show_overflow: true
show_chores_without_due: true
show_tasks_without_due: true
use_icons: true
use_long_date: true
due_in_days_threshold: 7
use_24_hours: true
hide_text_with_no_data: true
show_create_task: false
browser_mod: true
card_mod:
  style: |
    {% if states('sensor.grocy_tasks') == "0" %}
    ha-card {
      display: none;
    }
    {% endif %}
    ha-card {
      background: #edeff2 !important;
      margin: 0 10px 0 10px;
    }
    ha-card .name {
      font-size: 1.3rem;
    }
    ha-card .card-header {
      padding: 10px 15px 0px 15px;
      margin: 0px 0px -20px 0px;
    }

[adrianmak (adrian)]

I have issue to change an icon in mushroom template chip. My goal is to create a animation of a spinning fan using css
For simplicity I just changed the icon color to ensure my code is working

type: custom:mushroom-chips-card
chips:
  - type: template
    double_tap_action:
      action: none
    entity: switch.ac_conditioner
    hold_action:
      action: none
    icon: mdi:fan
    content: Adrian
    tap_action:
      action: toggle
    icon_color: ''
  - type: template
    double_tap_action:
      action: none
    entity: switch.ac_conditioner
    icon: mdi:fan
    tap_action:
      action: none
    hold_action:
      action: none
card_mod:
  style:
    mushroom-template-chip:nth-child(2)$: |
      ha-icon {
       color: green;
      }

My test is to change the second icon to green but it didnt work.

[Ildar_Gabdullin]

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]

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 (Pieter Rautenbach)]

You need to post in English and format your config.

[salgari]

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]

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

[elementoulis (George)]

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]

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