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

parautenbach · December 6, 2021, 8:21pm

Were you referring there to this change where one should explicity use a card_mod: section?

  - entity: binary_sensor.internet_connection
    card_mod:
      style:

I did some updates over the weekend and only tonight I noticed my badge icon colours not working anymore, similar to the user you replied to. I’ve searched quite a bit, but I’m struggling to find an answer. I’ve tried to retrace my steps.

This used to work:

  - entity: binary_sensor.internet_connection
    card_mod:
      style:
        ha-state-label-badge:
          $:
            ha-label-badge:
              $:
                .value: |
                  ha-icon {
                    color: {{ "var(--state-icon-active-color)" if is_state(config.entity, 'on') }} !important;
                  }

The one change I made was the one referred to in the README, which is to include card-mod in the frontend section to get the performance improvements (I’ve installed via HACS):

frontend:
  themes: !include_dir_merge_named themes
  extra_module_url:
    - /local/custom.js
    - /hacsfiles/lovelace-card-mod/card-mod.js

I’ve removed the old module definition from resources:, I’ve cleared my cache and checked that I can reach card-mod.js via the browser, so that all seems to be working fine.

I don’t know what I’m missing and would appreciate any help.

Ildar_Gabdullin · December 6, 2021, 10:01pm

HA is changing, I am trying to keep my posts updated - see this post, it was updated a month ago.
If you open Code Inspector you will see that there is no ha-icon element an the value anymore.

Here are your solutions:
1st - your example, does not work
2nd, 3rd - from the post,
4th - one more, new solution.

type: custom:badge-card
badges:
  - entity: binary_sensor.net_is_available_internet
    card_mod:
      style:
        ha-state-label-badge:
          $:
            ha-label-badge:
              $:
                .value: |
                  ha-icon {
                    color: {{ "var(--state-icon-active-color)" if is_state(config.entity, 'on') }} !important;
                  }
  - entity: binary_sensor.net_is_available_internet
    card_mod:
      style: |
        :host {
          --label-badge-text-color: magenta;
        }
  - entity: binary_sensor.net_is_available_internet
    card_mod:
      style:
        ha-state-label-badge:
          $:
            ha-label-badge:
              $: |
                .badge-container .label-badge .value {
                  color: red;
                }
  - entity: binary_sensor.net_is_available_internet
    card_mod:
      style:
        ha-state-label-badge:
          $: |
            ha-state-icon {
              color: cyan;
            }

Please, for everyone:
These posts were made for a GOOD START, not to replace a self-learning and self-exploration )).

kimus · December 7, 2021, 12:56am

incredible work man… really impressive
thank you for the example…

about custom:numberbox-card…
I tried to change with card-mod the default red value when I press + o -.
If I try to color the unit, this value will be always colored… but I can’t change only the “set value”… i’m trying to have default color and a var-primary-color when press + o -.
can anyone try to do that?
thank you again

kaylasiemon · December 7, 2021, 3:02am

Hi everyone! I haven’t updated anything in my code but noticed today that my colors are not changing per state as they usually do. Does anyone know what I need to change to fix this? I’ve been working just fine for months

This is all within a picture-element for my floorplan dashboard:

  - type: picture-elements
    image: /local/ui/floorplan/Floors/NightNoOne.png
    style: |
        ha-card:first-child {
          background: rgba(42, 46, 48, 1)
        }
          ha-card {
          --my-icon-color: {% if states('sensor.garbage_waste')|int <= 1 %} #A36733 {% else %} darkgrey {% endif %}
          }
          ha-card {
          --my-recycle-color: {% if states('sensor.recycling')|int <= 1 %} #5C7AD3 {% else %} darkgrey {% endif %}
          }
          ha-card {
          --my-yard-color: {% if states('sensor.yard_waste')|int <= 1 %} #2A8059 {% else %} darkgrey {% endif %}
          } 

        - type: state-icon
          entity: sensor.recycling
          style:
            "--iron-icon-height": 1.7vw
            "--iron-icon-width": 1.7vw
            "--paper-item-icon-color": "var(--my-recycle-color)"
            align-items: center
            display: flex
            height: 3vw
            justify-content: center
            left: 56%
            margin-left: "-1.5vw"
            margin-top: "-1.5vw"
            top: 5%
            transform: scale(1.2)
            width: 3vw
          tap_action:
            action: none

Ildar_Gabdullin · December 7, 2021, 4:34am

Se the updated post, section “Changed “on-edit” color”.

Ildar_Gabdullin · December 7, 2021, 7:23am

Disable a door control conditionally:

type: entities
title: Locked cover
entities:
  - entity: input_boolean.test_boolean
    name: Lock the door
  - entity: cover.garage_door
    tap_action:
      action: none
    card_mod:
      style: |
        :host {
          {% if is_state('input_boolean.test_boolean','on') %}
            color: var(--disabled-text-color);
            --paper-item-icon-color: var(--disabled-text-color);
            pointer-events: none;
          {% endif %}
        }

And similarly for other input controls, like for:

More examples are described here.

kimus · December 7, 2021, 12:08pm

great man, so many thanks… of course it works…

now i’m triyng to spacing up and down the “+” and “-” in this setting:

  - type: entities
    entities:
      - type: custom:numberbox-card
        entity: input_number.test_parrots
        name: false
        icon: false
        card_mod:
          style: |
            .body .cur-box {
              display: grid;
              place-items: center;
            }

i don’t really understand how I can use padding and .body .cur-box

sira87 · December 7, 2021, 2:08pm

Hi Ildar, would you mind taking a look at my post? It’s a small thing I need to adjust but it’s driving me crazy, maybe you can help me! Thank you.

Ildar_Gabdullin · December 7, 2021, 3:15pm

Working with ::after is not a small issue & it is better to be implemented in other way.

kaylasiemon · December 7, 2021, 4:37pm

@Ildar_Gabdullin If you have a chance, could you review my post as well? Do you know why the ha-card variable is no longer working for me? Maybe there is a new path to do what I have been.

I have a garbage sensor that counts down the days before I need to put the garbages out. Within a day of putting out, it changes the icon to the appropriate color, otherwise, it stays gray. I was accomplishing this by specifying global ha-card: --my-icon-color provided with an if statement then provided “–paper-item-icon-color”: “var(–my-icon-color)” under the state-icon type
but that is no longer working.

Any ideas?

Ildar_Gabdullin · December 7, 2021, 5:03pm

Your code is too long. You should better provide a short MWE (google it) to people to simplify the work.
Please see my accumulative post for picture-elements (1st post of the thread → consolidated post → post for picture-elements), may be it will answer your questions.
First what I see in you code - wrong indentations:

image769×162 4.1 KB

Ildar_Gabdullin · December 7, 2021, 5:36pm

Use Code Inspector & see what should be changed.
Open card-mod page on GitHub, it contains some tutorials.
I am not a CSS expert too))
Probably you should play with top & bottom paddings for buttons.

sira87 · December 7, 2021, 7:57pm

Yeah, I figured. I’ve solved it by splitting the original glance card in 2, and by adding 2 separate markdown cards below them with 0 padding-top.

chrome_GofYRDQZvb

Thank you anyways!

Here’s the updated YAML for this card:

type: custom:mod-card
card_mod:
style: |
  ha-card {
    background: var( --ha-card-background, var(--card-background-color, white) );
    -webkit-backdrop-filter: blur(20px) saturate(150%);
    backdrop-filter: blur(20px) saturate(150%);
  }
card:
  type: horizontal-stack
  cards:
    - type: custom:mod-card
      card:
        type: vertical-stack
        card_mod:
        style: |
          ha-card {
            background: none;
            box-shadow: none;
          }
        cards:
          - type: glance
            show_name: false
            show_state: true
            card_mod:
            style: |
              div.entity {
                margin-bottom: 0px;
              }
              div.entities {
                padding: 8px 8px 8px 8px;
              }
              div.entities.no-header {
                padding-top: 8px;
                padding-bottom: 0;
              }
              ha-card {
                background: none;
                box-shadow: none;
              }
            entities:
              - entity: person.carlo
                image: /local/carlo.png
                style: |
                  state-badge {
                    width: 75px;
                    height: 75px;
                    margin: 4px;
                    background-color: 
                      {% if states('person.carlo') == "not_home" %}
                        rgba(205, 92, 92, 0.4)
                        {% elif states('person.carlo') == "home" %}
                          rgba(47, 189, 79, 0.4)
                        {% elif states('person.carlo') == "redacted_position" %}
                          rgba(255, 228, 181, 0.4)
                        {% elif states('person.carlo') == "redacted_position" %}
                          rgba(240, 128, 128, 0.4)
                        {% elif states('person.carlo') == "redacted_position" %}
                          rgba(0, 255, 255, 0.4)
                        {% elif states('person.carlo') == "redacted_position" %}
                          rgba(218, 165, 32, 0.4)
                        {% else %}
                          rgba(105, 105, 105, 0.4)
                      {% endif %};
                  }
          - type: custom:hui-markdown-card
            style: |
              ha-markdown {
                padding: 0 0 16px 0 !important;
              }
              ha-card {
                background: none;
                box-shadow: none;
              }
            content: >-
              <center><font color={% if
              states('sensor.iphone_di_carlo_battery_state') == 'Charging' %}
              "chartreuse" {% else %} "white" {% endif %}><ha-icon icon={{
              "'mdi:cellphone-charging'" }}></ha-icon> {{
              states('sensor.iphone_di_carlo_battery_level') }}%</center>
    - type: custom:mod-card
      card:
        type: vertical-stack
        card_mod:
        style: |
          ha-card {
            background: none;
            box-shadow: none;
          }
        cards:
          - type: glance
            show_name: false
            show_state: true
            card_mod:
            style: |
              div.entity {
                margin-bottom: 0px;
              }
              div.entities {
                padding: 8px 8px 8px 8px;
              }
              div.entities.no-header {
                padding-top: 8px;
                padding-bottom: 0;
              }
              ha-card {
                background: none;
                box-shadow: none;
              }
            entities:
              - entity: person.martina
                image: /local/marty.png
                style: |
                  state-badge {
                    width: 75px;
                    height: 75px;
                    margin: 4px;
                    background-color: 
                      {% if states('person.martina') == "not_home" %}
                        rgba(205, 92, 92, 0.4)
                        {% elif states('person.martina') == "home" %}
                          rgba(47, 189, 79, 0.4)
                        {% elif states('person.martina') == "redacted_position" %}
                          rgba(255, 228, 181, 0.4)
                        {% elif states('person.martina') == "redacted_position" %}
                          rgba(240, 128, 128, 0.4)
                        {% elif states('person.martina') == "redacted_position" %}
                          rgba(0, 255, 255, 0.4)
                        {% elif states('person.martina') == "redacted_position" %}
                          rgba(218, 165, 32, 0.4)
                        {% else %}
                          rgba(105, 105, 105, 0.4)
                      {% endif %};
                  }
          - type: custom:hui-markdown-card
            style: |
              ha-markdown {
                padding: 0 0 16px 0 !important;
              }
              ha-card {
                background: none;
                box-shadow: none;
              }
            content: >-
              <center><font color={% if
              states('sensor.iphone_di_martina_battery_state') == 'Charging' %}
              "chartreuse" {% else %} "white" {% endif %}><ha-icon icon={{
              "'mdi:cellphone-charging'" }}></ha-icon> {{
              states('sensor.iphone_di_martina_battery_level') }}%</center>

Ildar_Gabdullin · December 7, 2021, 8:03pm

Would be good to post your solution here.

sira87 · December 7, 2021, 10:00pm

You’re right, I’ve updated my post

Kabala · December 8, 2021, 5:34am

Hi everyone,
since i made the new custom card update (3.1.1) i got the following error message.
Do you have a solution?
I reinstalled it exactly according to the instructions.
Thanks.

Logger: frontend.js.latest.202111090
Source: components/system_log/init.py:190
First occurred: 7. Dezember 2021, 19:51:50 (4 occurrences)
Last logged: 06:27:02

http://xxx.xxx.xxx.xxx:8123/lovelace/home:0:0 Uncaught

Mariusthvdb · December 8, 2021, 1:20pm

using

    entities:
      - input_select.origin
      - input_select.destination
#      - sensor.origin
#      - sensor.destination
      - sensor.here_origin
      - sensor.here_destination
      - entity: script.update_routeplanner_dynamic
        action_name: Update
      - type: custom:waze-card
        card_mod:
          style: |
            .header {
              background-color: var(--background-color-off);
              color: var(--text-color-off);
              padding: 8px 16px 8px 16px;
              margin: 0px -16px 0px -16px;
            }
            ha-card {
              box-shadow: none;
              margin: 0px -16px 0px -16px;
            }
        title: Itinerary
        entities:
          - entity: sensor.here_route_planner

gives me a quasi desired result in Safari:

but wont place the header correctly in Chrome:

somehow the custom:waze-card is a bit odd, because it also doesn’t show the exact correct color for the header:

ofc the margin to the first line of text is a bit too small also, but thats nitty-gritty…

any thoughts on how to fix the position in Chrome, (and the color in both?)
thanks for having a look!

kimus · December 8, 2021, 1:53pm

    card_mod:
      style: |
        .body .padl {
          padding-bottom: 20px;
        }
        .body .padr {
          padding-top: 20px;
        }

yes, thank you

Mariusthvdb · December 8, 2021, 2:04pm

on the Waze card:
it was the css values in the card itself, which I had completely forgotten to look at… sorry bout that. Ive adapted that in the resource to:

    /*ha-card {
        padding: 0px;
    }*/

    .header {
        font-family: var(--paper-font-headline_-_font-family);
        -webkit-font-smoothing: var(--paper-font-headline_-_-webkit-font-smoothing);
        font-size: var(--paper-font-headline_-_font-size);
        font-weight: var(--paper-font-headline_-_font-weight);
        letter-spacing: var(--paper-font-headline_-_letter-spacing);
        line-height: var(--paper-font-headline_-_line-height);
        text-rendering: var(--paper-font-common-expensive-kerning_-_text-rendering);
        /*opacity: var(--dark-primary-opacity);*/
        padding: 8px 16px;
    }

    table {
        padding: 8px;
        font-size: 1.1em;
    }

    th {
        padding: 0px 15px 0px 0px;
        text-transform: capitalize;
    }

    .waze-card-pointer {
        cursor: pointer;
    }

    td {
        padding-top: 10px;
        padding-bottom: 10px;
    }

so the lovelace card config only needs:

      - type: custom:waze-card
        card_mod:
          style: |
            .header {
              background-color: var(--background-color-off);
              color: var(--text-color-off);
            }
            ha-card {
              box-shadow: none;
              margin: 0px -16px 0px -16px;
            }
        title: Itinerary

and make it appear identical, correctly positioned, and in the correct color in both Chrome and Safari

andrewjswan · December 9, 2021, 6:29pm

@Ildar_Gabdullin Is it possible to replace the main picture in the weather card with your own?