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

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

[kosmaluk]

My main unit is a sensor template.
And this sensor is mapped via the built-in “state_map” option

type: custom:logbook-card
show:
  end_date: false
  start_date: true
  separator: true
  duration: true
separator_style:
  color: '#3D3D3B'
entity:
  - sensor.ostatni_aktywny_czujnik_ruchu
title: ''
date_format: DD.MM.YYYY - HH:mm:ss
history: 1
collapse: 2
state_map:
  - value: łazienka
    icon_color: red
  - value: kuchnia
    icon_color: orange
  - value: salon
    icon_color: green
  - value: biuro
    icon_color: blue
  - value: hol
    icon_color: teal
  - value: toaleta
    icon_color: pink
  - value: kris
    icon_color: indigo
  - value: asia
    icon_color: indigo

based on the light entity, it maps something but incorrectly. The “on” state is ok but the “off” state is invalid

card_mod:
  style: |
    ha-card {
      {% if states('light.osw_lampka_gabinet', 'on') %}
        --paper-item-icon-color: green !important;
     {% elif states('light.osw_lampka_gabinet', 'off') %}
        --paper-item-icon-color: red !important;   
      {% else %}
        --paper-item-icon-color: grey !important;
      {% endif %}
    }

[LiQuid_cOOled]

That is exactly what I experienced. The card is changing the color of the on state, but doesn’t record that state of that color if you change to a second color. It appeared to me it grabs the logs from HA which does record light colors in the logbook.

One thought was to create a log of the sensor color then I think it would.

[LiQuid_cOOled]

This has become a challenge for me I’m gonna solve it

[kosmaluk]

:)) I also feel like I have to achieve this, but I’ve already spent dozens of hours, searched the Internet far and wide and haven’t found anything.

That’s why I’m looking for help on the forum.

The built-in “state_map” option maps colors from the state, it’s a pity that you can’t map from the attribute state, that would be the end of the matter.

But if the card creator can map it via card-mod, it’s certainly possible.

[LiQuid_cOOled]

If a template sensor can record the color created and that is mapped, then you can reference that color. We are literally just one step removed from the data you want.

I’m going to test that theory because template sensor history hit the logbook

This is a template sensor that records my fan’s speed and direction and it’s in the logbook