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

[andypnz (Andrew Palmer)]

Trying to remove units label from entities… The right hand cell here I would like no ‘W’ or ‘Wh’… I have removed the icon (badge) and description (info), but could not find any documentation / examples as to how to remove the units, so tried a few random things with no error but no success…

type: horizontal-stack
cards:
  - show_name: true
    show_icon: true
    type: button
    tap_action:
      action: none
    entity: binary_sensor.phase_3_grid_1800
    icon_height: 30px
    hold_action:
      action: none
  - show_name: true
    show_icon: true
    type: button
    tap_action:
      action: none
    entity: binary_sensor.phase_3_this_hour
    icon_height: 30px
  - show_name: true
    show_icon: true
    type: button
    tap_action:
      action: none
    entity: binary_sensor.phase_3_next_hour
    icon_height: 30px
  - type: entities
    entities:
      - sensor.phase_3
      - sensor.solcast_pv_forecast_forecast_this_hour
      - sensor.solcast_pv_forecast_forecast_next_hour
    show_header_toggle: false
    state_color: false
    card_mod:
      style:
        '#states div':
          hui-sensor-entity-row $:
            hui-generic-entity-row $: |
              state-badge {
                display: none;
              }
              .info {
                margin-left:0 !important;
                display: none;
              }
              .state {
                margin-left:0 !important;
                justify-content: right;
                label: none;
              }      
              .state-label {
                display: none;
              } 

[Ildar_Gabdullin]

@andypnz

remove units label from entities

Just use multiple-entity-row with “unit: false” or template-entity-row.

[andypnz (Andrew Palmer)]

Thanks… I don’t suppose you could show me how to use - type: custom: multiple-entity-row in my YAML? I have been searching, but don’t really see where to add this and what else needs changing…

[Ildar_Gabdullin]

@andypnz

  - type: entities
    entities:
      - sensor.phase_3

  - type: entities
    entities:
      - type: custom:multiple-entity-row
        entity: sensor.phase_3
        unit: false

[andypnz (Andrew Palmer)]

That worked great thank you… but it made the icons (badges) visible… I had thought this may work, but it does not…

  - type: entities
    entities:
      - type: custom:multiple-entity-row
        entity: sensor.phase_3
        unit: false
        style:
           hui-generic-entity-row:
             $: |
               state-badge { display: none !important; }

[Ildar_Gabdullin]

Because you are taking a code which was made for card_X and then trying to apply to card_Y.
Actually, you are missing a syntax for card-mod 3.4.0.

[andypnz (Andrew Palmer)]

Thank you! Is there code for card_x to hide the icon / badge?

[andypnz (Andrew Palmer)]

Thank you for your help… and for anyone looking for similar, this removes the units, icon and info:

  - type: entities
    entities:
      - type: custom:multiple-entity-row
        entity: sensor.phase_3
        unit: false
        card_mod:
          style:
            hui-generic-entity-row:
              $: |
                state-badge {
                  display: none;
                }
                .info {
                  margin-left:0 !important;
                  display: none;
                }

[Ildar_Gabdullin]

If you need to show only states w/o names & icons - use markdown.
Otherwise it’s just a waste of resources…

[kosmaluk]

Hi. I need help with the custom:logbook-card.
I have a card in which I use the state_map option to arrange icons based on the entity state and it works.
But I use this card for entities whose states are different, but the entity has a constant attribute.
I want to change the color of the icon in this tab when the attribute state changes.
I’ve been trying to do this for several days via card-mod, but it doesn’t work. I only managed to change the color using the state-badge value, but the color changes for all units.
How to set it so that the color of the icon changes depending on the attribute value.
Thanks for all your help

this is a code:

and this is ma trying works state-badge

    card_mod:
        style: |
          h1 { 
          font-size: 18px;
          color: #1E90FF;
          }
          .state {
          font-weight: normal;
          font-size: 14px;
          color: orange;
          }
          .date {
          color: #1E90FF !important;
          font-size:12px !important;
          font-style: italic !important;
          }
          .duration {
          font-size:12px !important;
          font-style: italic !important;
          color: #1E90FF !important;
          }
          .card-content.card-content-scroll {
            max-height: 455px;
          }
          state-badge {
          color: 
            {% set apps_attribute = state_attr('sensor.redmi_12_asia_last_notification', 
            'package') %}
            {% if apps_attribute == 'com.spotify.music' %} green
            {% elif apps_attribute == 'com.whatsapp' %}#3ddc59
            {% elif apps_attribute == 'com.facebook.orca' %}#c743d4
            {% elif apps_attribute == 'com.facebook.katana' %}#207af2
            {% elif apps_attribute == 'com.mi.globalbrowser' %}#3329f2
            {% elif apps_attribute == 'com.google.android.dialer' %} teal
            {% elif apps_attribute == 'com.android.deskclock' %} purple
            {% elif apps_attribute == 'com.instagram.android' %}#fd0186
            {% elif apps_attribute == 'com.google.android.youtube' %} red
            {% elif apps_attribute == 'com.zhiliaoapp.musically' %} white
            {% elif apps_attribute == 'com.google.android.apps.messaging' %} teal
            {% elif apps_attribute == 'pl.pkobp.iko' %}#094689
            {% else %}red {% endif %}
          }

[LiQuid_cOOled]

Please post your code by following #11 in this post. Folks aren’t going to transpose the code from an image.

How to help us help you - or How to ask a good question

Before we begin… This forum is not a helpdesk The people here don’t work for Home Assistant, that’s an open source project. We are volunteering our free time to help others. Not all topics may get an answer, never mind one that helps you solve your problem. [image] This also isn’t a general home automation forum, this is a forum for Home Assistant and things related to it. Any question about Home Assistant, and about using things with Home Assistant, is welcome here. We can’t help you with e…

[Mariusthvdb (Marius)]

this +1, pure core, and very elegant.

if must be button, use custom:button-card and state_display.

[Ubuntubirdy]

I want to change the background color of the tooltip with card-mod. Unfortunately I can’t figure out how to do that…

Can anyone help me? And I would also like to know how I can find out for myself in the future.

[LiQuid_cOOled]

This probably not the correct topic for you question because this one focuses on the standard lovelace cards. I did take a look at the JS and the card is using the paper-item-icon color for each entity.

I just did some simple tests and found some interesting about the how it logs the color state. I’ll dm you.

type: custom:logbook-card
entity: fan.bedroom_fan
custom_logs: true
max_items: 4
history: 1
card_mod:
  style: |
    ha-card {
      {% if states('fan.bedroom_fan', 'off') %}
              --paper-item-icon-color: yellow !important;
            {% else %}
              --paper-item-icon-color: red !important;
             {% endif %}
               }

[digitl]

I have a card that’s doing everything I want it to do except change the colour of the text. Can anyone say where I’m going wrong and/or what is missing please?

type: custom:mushroom-chips-card
chips:
  - type: template
    content: '{{ states(''sensor.wiser_lts_temperature_dining_room'') }} °C Dining room'
    icon: >-
      {% if is_state('climate.wiser_dining_room', 'hvac_action') == 'heating' %}
      mdi:fire  {% else %} mdi:fire-off  {% endif %}
    icon_color: >-
      {% if is_state('climate.wiser_dining_room', 'hvac_action') == 'heating' %}
      red  {% else %} green  {% endif %}
    card_mod:
      style: |
        ha-card {
          color: red;
        }

[Migs]

Hello,
I would like to apply a zoom level to an entire layout. I’ve tried something like that:

views:
  - title: Home
    type: custom:horizontal-layout
    layout_type: custom:horizontal-layout
    badges: []
    cards: ...
    card_mod:
        style: |
          ha-card {
            zoom: 1.5
          }

But it doesn’t work…
I’ve tried using custom:mod-card which only seems to work with standard layouts such as horizontal-stack, the zoom level is applied in this configuration (if I use custom:horizontal-layout the content of the layout is not displayed).

I don’t like this solution because:

• the documentation says you shouldn’t use custom:mod-card if possible
• the visual editor is not supported by custom:mod-card
• I can only use standard layouts in combination with custom:mod-card (it seems…)

Would you know of any way I could achieve this goal without using custom:mod-card while being able to use custom:horizontal-layout, custom:vertical-layout or custom:grid-layout AND apply the custom zoom level ?

Also if possible without having to create a custom theme (I want to keep it as simple as possible).

Thanks a lot,

[lollo78]

Hi guys, I need help about template syntax:

I applied this to customize my badges and seems tò works fine:

  - badges:
      - entity: sensor.broadlink_temperature
        name: Temperatura Casa
        card_mod:
          style: |
            :host {
               --label-badge-red: {% set t = states('sensor.broadlink_temperature') |int %} {% if t < 15 %} #44739e {% elif 15 <= t < 28 %} #43a047 {% elif t > 28 %} #db4437 {% else %} #6f6f6f {% endif %};
             }

But in HA logs I see this error:

Logger: homeassistant.helpers.event
Source: helpers/template.py:569
First occurred: 21:03:14 (2 occurrences)
Last logged: 21:03:19

Error while processing template: Template<template=(:host { --label-badge-red: {% if is_state('sensor.presa_tv_soggiorno_energy_power',)|int != 0 %} #44739e {% else %} #db4437 {% endif %}; }) renders=2>
Error while processing template: Template<template=(:host { --label-badge-red: {% if is_state('sensor.presa_tv_stanzetta_energy_power',)|int != 0 %} #44739e {% else %} #db4437 {% endif %}; }) renders=2>
Traceback (most recent call last):
  File "/usr/src/homeassistant/homeassistant/helpers/template.py", line 567, in async_render
    render_result = _render_with_context(self.template, compiled, **kwargs)
                    ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  File "/usr/src/homeassistant/homeassistant/helpers/template.py", line 2305, in _render_with_context
    return template.render(**kwargs)
           ^^^^^^^^^^^^^^^^^^^^^^^^^
  File "/usr/local/lib/python3.11/site-packages/jinja2/environment.py", line 1301, in render
    self.environment.handle_exception()
  File "/usr/local/lib/python3.11/site-packages/jinja2/environment.py", line 936, in handle_exception
    raise rewrite_traceback_stack(source=source)
  File "<template>", line 2, in top-level template code
  File "/usr/local/lib/python3.11/site-packages/jinja2/sandbox.py", line 393, in call
    return __context.call(__obj, *args, **kwargs)
           ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  File "/usr/src/homeassistant/homeassistant/helpers/template.py", line 2547, in wrapper
    return func(hass, *args, **kwargs)
           ^^^^^^^^^^^^^^^^^^^^^^^^^^^
TypeError: is_state() missing 1 required positional argument: 'state'

The above exception was the direct cause of the following exception:

Traceback (most recent call last):
  File "/usr/src/homeassistant/homeassistant/helpers/template.py", line 693, in async_render_to_info
    render_info._result = self.async_render(
                          ^^^^^^^^^^^^^^^^^^
  File "/usr/src/homeassistant/homeassistant/helpers/template.py", line 569, in async_render
    raise TemplateError(err) from err
homeassistant.exceptions.TemplateError: TypeError: is_state() missing 1 required positional argument: 'state'

What I’m wrong?
Thanks a lot

[arganto]

@lollo78

What I’m wrong?

In comparing the wrong template with another template in the error log. Search for the right one and add in is_state the vale, you want to check against. But his is already in the error message as well.

[kosmaluk]

Hello, thanks for your interest and help.
I tried your code and unfortunately it works the same as my discovery with state-badge. The color of all entities is the same based on the current state of the entity. Does not map historical colors according to a template.

I’m not fluent in card-mod and css code and I can’t find the place where this color is saved.

I will be grateful for your help.

This is ma triing code:

card_mod:
  style: |
    ha-card {
      {% if states('sensor.ostatni_aktywny_czujnik_ruchu', 'biuro') %}
        --paper-item-icon-color: yellow !important;
      {% elif states('sensor.ostatni_aktywny_czujnik_ruchu', 'kuchnia') %}
        --paper-item-icon-color: green !important;
      {% elif states('sensor.ostatni_aktywny_czujnik_ruchu', 'toaleta') %}
        --paper-item-icon-color: orange !important;  
      {% else %}
        --paper-item-icon-color: red !important;
      {% endif %}
    }

and result

[LiQuid_cOOled]

What is your main entity? It will map it if its a light.

It will map what ever HA records, but sensors are a not going to work.

This is one light and you can see the color changes were recorded, but by HA not the card.