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.
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 %}
}
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;
}
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-cardif 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,
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
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.
1 Like
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
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.
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 %}
}
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.
This has become a challenge for me 
Iām gonna solve it
:)) 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.
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
Getting closerā¦ we can record the RGB state of the sensor possibly use that to color the log.
But in the templates sensor configuration there is no icon_color option.
If it was, that would be the end of the matter.
I donāt think history records the colors of the icons.
The colors are probably overwritten in the cards, but I donāt know
I find this in repository in logbook-base-card:
static get styles(): CSSResultGroup {
return css`
.card-content-scroll {
max-height: 345px;
overflow-y: auto;
scrollbar-width: thin;
scrollbar-gutter: stable;
}
.item {
clear: both;
padding: 5px 0;
display: flex;
line-height: var(--paper-font-body1_-_line-height);
}
.item-content {
flex: 1;
}
.item-icon {
flex: 0 0 4rem;
color: var(--paper-item-icon-color, #44739e);
display: flex;
justify-content: center;
}
.entity {
color: var(--paper-item-icon-color);
cursor: pointer;
}
state-badge {
line-height: 1.5rem;
}
.state {
white-space: pre-wrap;
}
there is a .item-icon section here, but it doesnāt work in card-mod
I looked at that. Itās using color: var(āpaper-item-icon-color, #44739e) witch is the active color. 
I made a separate color sensor, but how to use it in this logbook card?
No way
- sensor:
- name: Notify last redmi all attr kolor ikony
unique_id: Notify_last_redmi_all_attr_kolor_ikony
state: >-
{% 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 %}#1E90FF {% endif %}
