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

[sira87]

Hi i’m trying hard to vertically center the battery percentage to the phone image on its left with no success.

Here’s the YAML of the glance card I’m using (sorry if it’s a mess, I’m not a pro lol):

type: glance
show_name: false
show_state: true
style:
  div.entity:
    $: |
      state-badge {
        width: 75px;
        height: 75px;
        margin: 4px;
        background-color: rgba(47, 189, 79, 0.4)
      }
  .: |
    div.entity {
      margin-bottom: 0px;
    }
    div.entities {
      padding: 8px 8px 8px 8px;
    }
    div.entities.no-header {
      padding-top: 8px;
      padding-bottom: 0;
    }
    ha-card {
      box-shadow: none;
      backdrop-filter: blur(20px) saturate(150%);
    }
entities:
  - entity: person.carlo
    image: /local/carlo.png
    style: |
      div {
        display: table;
        white-space: pre;
        line-height: 0.5;
        padding: 8px 0 16px 0;
        align-items:center;
        vertical-align: middle;
      }
      div::after {
        content: "\a" url(/local/cellphone-charging_18px_padded.png) "{{ states('sensor.iphone_di_carlo_battery_level') }}%";
        font-size: 12px;
      }
  - entity: person.martina
    image: /local/marty.png
    style: |
      div {
        display: table;
        white-space: pre;
        line-height: 0.5;
        padding: 8px 0 16px 0;
        align-items:center;
        vertical-align: middle;
      }
      div::after {
        content: "\a" url(/local/cellphone-charging_18px_padded.png) "{{ states('sensor.iphone_di_martina_battery_level') }}%";
        font-size: 12px;
      }

Any help will be much appreciated!

Thank you.

[DrewXT (Andrew)]

@Ildar_Gabdullin

You’re welcome, learn it step by step))

very small steps in my case…

EDIT: had a typo… if anyone cares, this code produces this card, with rotating fan, for AC control and visual status

title: Sewing Room
mode: vertical
cards:
  - type: custom:simple-thermostat
    entity: climate.sewing_room_air_conditioner
    step_layout: row
    show_header: false
    name: study
    control: false
  - type: custom:stack-in-card
    mode: horizontal
    cards:
      - type: glance
        show_name: false
        state_color: false
        entities:
          - entity: switch.sewing_room_zone
            icon: mdi:fan
            tap_action:
              action: toggle
            card_mod:
              style: |
                state-badge {
                  {% if is_state('switch.sewing_room_zone', 'on') %}
                    color: green;
                    animation: rotation 1.5s linear infinite;
                  {% endif %}
                  }
                  @keyframes rotation {
                    0% {
                      transform: rotate(0deg);
                    }
                    100% {
                      transform: rotate(359deg);
                    }
                  }
      - type: custom:mini-graph-card
        entities:
          - entity: sensor.sewing_room
            name: Temperature
            smoothing: true
            show_fill: true
          - entity: sensor.sewing_target_temp
            name: Target
            smoothing: true
          - entity: switch.sewing_room_zone
            y_axis: secondary
            color: orange
            show_line: false
            show_points: false
            show_legend: false
            aggregate:func: max
            smoothing: false
        hours_to_show: 24
        points_per_hour: 4
        line_width: 2
        font_size: 90
        animate: true
        show:
          name: false
          icon: false
          state: false

[parautenbach (Pieter Rautenbach)]

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]

@parautenbach

This used to work:

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 (alessandro)]

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]

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]

@kimus

I tried to change with card-mod the default red value when I press + o -.

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

[Ildar_Gabdullin]

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:

• input_select
• input_number (slider)
• input_number (box)
• input_text
• input_boolean, switch
• custom:numberbox-card

---

More examples are described here.

[kimus (alessandro)]

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]

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]

@sira87

Hi Ildar, would you mind taking a look at my post?

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

[kaylasiemon]

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

@kaylasiemon

If you have a chance, could you review my post as well?

1. Your code is too long. You should better provide a short MWE (google it) to people to simplify the work.
2. 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.
3. First what I see in you code - wrong indentations:
   
   

[Ildar_Gabdullin]

@kimus

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

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]

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.

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]

@sira87

I’ve solved it by splitting the original glance card in 2

Would be good to post your solution here.

[sira87]

You’re right, I’ve updated my post

[Kabala (Cata)]

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 (Marius)]

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 (alessandro)]

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

yes, thank you