Works for me!
Before:
After:
1 Like
At the moment I cant get card-mod to behave like I want, must be doing something wrong:
I want them like this:
FIXED - see code below
My code:
cards:
- entities:
- input_boolean.heaterstatus_kia
- sensor.departuretime_kia
- input_number.heater_kia_hour
- input_number.heater_kia_minutes
- switch.qubino_zmnhadx_flush_1_relay_switch
- sensor.qubino_zmnhadx_flush_1_relay_power
show_header_toggle: false
style: |
ha-card {
--ha-card-background: rgba(50,50,50,0.0);
background-repeat: no-repeat;
background-image: url("/local/lovelace/carheater/kia.png");
background-size: 100% 100%;
border: solid 2px rgba(100,100,100,0.5);
border-radius: 20px;
box-shadow: 3px 3px rgba(0,0,0,0.4);
--primary-text-color: #999999;
overflow: hidden;
}
type: entities
- entities:
- input_boolean.heaterstatus_subaru
- sensor.departuretime_subaru
- input_number.heater_subaru_hour
- input_number.heater_subaru_minutes
- switch.qubino_zmnhadx_flush_1_relay_switch_2
- sensor.qubino_zmnhadx_flush_1_relay_power_2
show_header_toggle: false
style: |
ha-card {
--ha-card-background: rgba(50,50,50,0.0);
background-repeat: no-repeat;
background-image: url("/local/lovelace/carheater/subaru.png");
background-size: 100% 100%;
border: solid 2px rgba(100,100,100,0.5);
border-radius: 20px;
box-shadow: 3px 3px rgba(0,0,0,0.4);
--primary-text-color: #999999;
overflow: hidden;
}
type: entities
- entities:
- sensor.qubino_zmnhadx_flush_1_relay_temperature
show_header_toggle: false
style: |
ha-card {
--ha-card-background: rgba(50,50,50,0.0);
background-repeat: no-repeat;
background-size: 100% 100%;
border: solid 2px rgba(100,100,100,0.5);
border-radius: 20px;
box-shadow: 3px 3px rgba(0,0,0,0.4);
--primary-text-color: #999999;
overflow: hidden;
}
type: entities
Not sure if anyone had a chance to share yet, but Iâve used the latest update to modify my badges color and text color, and to add state specific colors:
This is my config for customizing badges and their colors:
It took me a while to wrap my head around the root elements overriding but itâs there now.
I think next step is to extract all of this with the declutter card
3 Likes
BumpâŠ
Is anyone there that can help with this? Or at least say that itâs impossible 
Read the text about advanced configuration again. Youâll have a shadowroot to deal with.
Thanks. I did it
- type: entities
entities:
- type: 'custom:secondaryinfo-entity-row'
entity: switch.hot_water_tank
name: "ResistĂȘncia elĂ©trica"
secondary_info: "Pode ter gastos muito elevados<br>de energia"
style:
hui-toggle-entity-row:
$:
hui-generic-entity-row:
$:
state-badge:
$: |
:host {
border-radius: 0 !important;
}
1 Like
It seems the style tag changed in latest hass. I was using the styling you have mentioned on github page for alarm-panel like below:
type: alarm-panel
card_icon: mdi:bell
name: Alarm Panel
debug_cardmod: true
style:
.: |
ha-card {
--mdc-theme-primary: red;
}
"#keypad mwc-button":
$: |
:host {
background: blue;
}
button {
font-size: 24px !important;
}
"#keypad mwc-button:nth-of-type(12)":
$: |
button {
font-size: 16px !important;
--mdc-theme-primary: green;
}
entity: alarm_control_panel.alarm
But it seems the mwc-button has been renamed to mdc-button
Really puzzled here, because when I copy your exact code, and obviously change the person.name, exactly nothing happensâŠ
was wondering though if thereâs a special reason for this rather oddly syntaxes template:
.: |
:host {
{% if is_state('person.alex', 'home') %} --label-badge-red: #03A9F4; {% endif %};
{% if not is_state('person.alex', 'home') %} --label-badge-red: #fd79a8; {% endif %};
color: #fff;
}
so please let me ask what the color: #fff does. is that for coloring the badge if neither states are true? iow an âelseâ clause?
also, you have double semi-colons on both lines in the template, why is that?
couldnt this be written as:
.: |
:host {
{% if is_state('person.alex', 'home') %} --label-badge-red: #03A9F4;
{% elif not is_state('person.alex', 'home') %} --label-badge-red: #fd79a8;
{% else %} #fff;
}
please forgive my ignorance on this subject, its just that for jinja templates these are really out of the ordinary⊠
thanks
Not sure why it doesnât do anything for ya if you got the same code, did you install the latest version from HACS? (I have version 12)
Regarding your second question, yup, it can be an elif as well, the color #fff just makes the font white because my bg is darker
ok thanks,
in that case the #fff isnât part of the template 
sorry for that.
should have suggested this for the jinja then.
.: |
:host {
{% if is_state('person.alex', 'home') %} --label-badge-red: #03A9F4;
{% else %} --label-badge-red: #fd79a8;
{% endif %}
color: #fff;
}
and no, I donât use HACS, I simply install the resources manually, but I see version 11 listed. Will check to see if that makes a difference.
thanks for reporting back!
You also need an {% endif %}.
And badge modding was introduced in release 12.
duhâŠ
should have checked that
in the manual install, do we need save all file in the resources, or only the card-mod.js
I ask specifically because I tried the mod-card before, of which I believed it to be inside the card-mod.js I now see a separate file mod-card.js though, so wonder if we need to install the too, and also add it to the resources.yaml file?
update
this works for me:
badges:
- entity: person.marijn
style:
ha-state-label-badge:
$:
ha-label-badge:
$: |
.label-badge .label span{
color: white;
}
.: |
:host {
{% if is_state('person.marijn','home') %} --label-badge-red: green;
{% else %} --label-badge-red: grey;
{% endif %}
}
the color: #fff had no effect in my config, so I tok I out for now, as the !important in the label, without which the color sets nicely in the font too.
Now have to find the badge background color and the top circle, to have all I had before when customizing in the old way
this is most welcome!
thanks once again!
Only card-mod.js.
Everything else is just stuff to create card-mod.js
1 Like
The changes to support modding fold-entity-row are much appreciated! Iâm using it like this to dynamically change the icon color for a group and it works great:
- type: entities
entities:
- type: 'custom:fold-entity-row'
head: group.downstairs_lights
style: |
:host {
--paper-item-icon-color:
{% if states('group.downstairs_lights') == 'on' %}
red
{% else %}
green
{% endif %}
;
}
group_config:
style: *color
This is the color anchor that I use in a few other places:
color: &color |
:host {
--paper-item-icon-color:
{% if states(config.entity) == 'on' %}
red
{% else %}
green
{% endif %}
;
}
Hi,
How can I just change the title background?
Thx!
- type: entities
title: .....
show_header_toggle: false
style: |
.card-header {
background-color: red;
}
entities:
- entity: ......
Hello @thomasloven, first of all great work for this community, thank you , I have a cenĂĄrio almost working
This works ok and Iâm able to change the background image:
- type: custom:more-info-card
entity: light.hallway_tablelight
title: Luz Mesa
style:
"more-info-controls":
$:
"paper-dialog-scrollable more-info-content":
"more-info-light":
$:
"div div.color_temp":
"ha-labeled-slider":
$: |
ha-paper-slider{
background-image: -webkit-linear-gradient( right, rgb(255,121, 0) 0%, rgb(255,254, 250) 100% );
}
My question is, at the same level of the âdiv div.color_tempâ I have âdiv div.brigtnessâ, and I would like to add a style to that element, but
if I do This:
style:
"more-info-controls":
$:
"paper-dialog-scrollable more-info-content":
"more-info-light":
$: |
div div.brightness{
background-color: blue !important;
}
"div div.color_temp":
"ha-labeled-slider":
$: |
ha-paper-slider{
background-image: -webkit-linear-gradient( right, rgb(255,121, 0) 0%, rgb(255,254, 250) 100% );
}
It applies the style to â.brightnessâ, but ignores the drill of â.color_tempâ
If I do This:
style:
"more-info-controls":
$:
"paper-dialog-scrollable more-info-content":
"more-info-light":
$: |
div div.brightness{
background-color: blue !important;
}
$:
"div div.color_temp":
"ha-labeled-slider":
$: |
ha-paper-slider{
background-image: -webkit-linear-gradient( right, rgb(255,121, 0) 0%, rgb(255,254, 250) 100% );
}
It ignores the style to â.brightnessâ, drills â.color_tempâ and applies the stype to âha-paper-sliderâ ok.
If I try:
style:
"more-info-controls":
$:
"paper-dialog-scrollable more-info-content":
"more-info-light":
$: |
- div div.brightness{
background-color: blue !important;
}
- "div div.color_temp":
"ha-labeled-slider":
$: |
ha-paper-slider{
background-image: -webkit-linear-gradient( right, rgb(255,121, 0) 0%, rgb(255,254, 250) 100% );
}
Ignores both.
Can I do this? While drilling into roots, fill styles in the middle.
Thank You
Yes, you can.
To put something inside a root, and also continue drilling, you can use .:, which means âhereâ.
So in your case it would be something like:
"more-info-light":
[...]
$:
# Put those styles in the shadowRoot element
.: |
div div.brightness{
background-color: blue !important;
}
# but also keep going into div div.color_temp...
"div div.color_temp":
"ha-labeled-slider":
$: |
ha-paper-slider{
background-image: -webkit-linear-gradient( right, rgb(255,121, 0) 0%, rgb(255,254, 250) 100% );
}Is it possible to have the title background part transparent ?
- type: entities
title: Date & Time
show_header_toggle: false
entities:
- sensor.date
- sensor.time
- sensor.season
- sun.sun
- sensor.next_sunrise
- sensor.next_sunset
try
style: |
.card-header {background-color: rgba(0, 0, 0, 0.0);}