Got thatâŚstill odd that you cannot see that outside of the yaml viewâŚanyhow, thanks again for responding 
May be worth a initiating a feature request. You can delete it via the GUI, just above the first card.
1 Like
What am I doing here to not get the color to change:
entity: sensor.bed
card_mod:
style: |
:host {
--card-mod-icon-color:
{% if states(config.entity)=='In' %}
gold
{% endif %}
none
}
If I change it to this:
card_mod:
style: |
:host {
--card-mod-icon-color:
{% if states(config.entity)=='Out' %}
none
{% endif %}
gold
}
The colour works but the colour stays even when. âoutâ:
The capitilsation is right:
So I am unsure why it wonât work
Itâs If Else Endif
card_mod:
style: |
:host {
--card-mod-icon-color:
{% if states(config.entity)=='Out' %}
none
{% else %}
gold
{% endif %}
}
1st post of this thread - link at the bottom (titled âfantastic post bla blaâ) - heading card
Nothing in there about aligning the text.
These examples are not supposed to cover all possible needs. Use them as a starting point to LEARN.
Iâm fairly confused?? You didnât post an example of your actual card code. Instead you simply piggybacked off an aged post from November of last year to complain the info provided didnât resolve an answer to YOUR specific issue?
We are here to help, but help us help you!
Show your workings
If you turn up with a post that suggests youâve put in no effort, youâre less likely to get quality help, and your post may even be ignored. Explain a bit of what youâve done so far, such as:
- Link to some other threads that youâve found, and tried, and explain why they didnât help you
- Describe what youâve tried, and what the problems were
Showing that youâve put effort in will help demonstrate that youâre not simply looking for others to do all the work for you.
2 Likes
Hi folks.
Any chance of applying custom colors to history-graph? My mower has same gray color for multiple states - docked, charging, rain delay, I want to separate them. Currently only different are error (red) and mowing (turquise).
Tried some tricks with card mod style but cant figure it out.
The post he directs to has this code example:
type: vertical-stack
cards:
- type: heading
icon: mdi:fan
heading: some long long long long long long title
heading_style: title
badges:
- type: entity
entity: sun.sun
icon: mdi:fan
- type: entity
entity: fan.kitchen
card_mod:
style:
.badges hui-heading-badge:nth-child(1) hui-entity-heading-badge $: |
ha-heading-badge {
--icon-color: red;
}
state-display {
color: magenta;
}
ha-state-icon {
animation: rotating 2s linear infinite;
}
@keyframes rotating {
0% {transform: rotate(0);}
100% {transform: rotate(359deg);}
}
.badges hui-heading-badge:nth-child(2) hui-entity-heading-badge $: |
ha-heading-badge {
--icon-color: orange;
}
state-display {
color: red;
}
ha-state-icon {
animation: rotating 2s linear infinite;
}
@keyframes rotating {
0% {transform: rotate(359deg);}
100% {transform: rotate(0);}
}
.: |
ha-card {
background-color: lightgreen !important;
border-radius: var(--ha-card-border-radius, 12px);
border-width: var(--ha-card-border-width, 1px);
border-style: solid;
}
.title > p {
color: red;
white-space: break-spaces !important;
}
.title ha-icon {
--icon-primary-color: yellow;
--mdc-icon-size: 32px;
animation: rotating 2s linear infinite;
}
@keyframes rotating {
0% {transform: rotate(0);}
100% {transform: rotate(359deg);}
}
- type: entities
entities:
- entity: sun.sun
- entity: sun.sun
So, I tried:
card_mod:
style:
.: |
ha-card {
text-align: center !important;
}
andâŚ
card_mod:
style:
.: |
.title > p {
text-align: center !important;
}
and about 20 other variations. There were tons of great examples for badges, which Iâm not looking for.
Please donât think Iâm not appreciative of the effort you guys put in to contribute to the community. But after two days of reading examples, reading yaml tutorials, googling possible solutions, I was like âI just want to center some fucking text!â 
and gave up.
Canât test with lawn mower myself. So you will do it:
- Create Entities card with state_color: true.
- Add your lawn_drawer entity onto it.
- Add card mod code for the whole card like:
ââstate-lawn_mower-docked-color: cyan. - Then check with a docked lawn mower is the icon is cyan.
The question is I have no idea is the âlawn_mowerâ domain is supported for css variables.
Easier to open source code but I cannot do it, no access to PC.
So, if it is supported - then you will be able to define custom colors for lawn mower.
What is more productive - open Code inspector (F12 in Chtome) or whatever it is called in your browser, define a proper DOM path by yourself to the element you wish to style. Use my example as a starting point to understand how code is defined.
Or keep waiting and using ready solutions made by other people.
There quite a few ways but his example helps to understand what to target
.title > p {
color: red;
white-space: break-spaces !important;
}
If you target the actual title text, I believed you would have to use margin-left: 50px !important or text-indent: 50px !important;
or target the container of the text and use justify-content: center !important;
type: vertical-stack
cards:
- type: heading
heading: some long long long long long long title
heading_style: title
card_mod:
style: |
.container{
justify-content: center !important;
border: 1px solid red;
}
1 Like
I suppose it doesnât work:
But anyway I wanted to have 14hour history bar with separate states, just custom colored so it doesnât blend between states.
This what You proposed can be achieved (and works because I tested it) with this:
type: entity
entity: lawn_mower.landroid
name: Lawn Mower Status
icon: mdi:robot-mower
card_mod:
style: |
ha-card {
background-color: {% set state = states('lawn_mower.landroid') %}
{% if state == 'mowing' %}
#E8F5E9 /* Light green */
{% elif state == 'docked' %}
#E3F2FD /* Light blue */
{% elif state == 'charging' %}
#FFF3E0 /* Light orange */
{% elif state == 'rain relay' %}
#F5F5F5 /* Light gray */
{% else %}
#FFEBEE /* Light red for unknown/error */
{% endif %};
transition: background-color 0.5s ease;
}
You tested with Entity card, not Entities with state_color.
I did not propose to change a background.
card_mod:
style: |
.container{
justify-content: center !important;
border: 1px solid red;
}
Nailed it!
I had tried text-align: center in the .container element but when inspecting the DOM I failed to notice it had justify-content: space-between;.
Greatly appreciate your help!!
2 questions
- I want the green item a little more to the right
- Why are the numbers not on the same height ?
- type: horizontal-stack
cards:
- type: custom:mushroom-template-card
primary: Filterdagen
icon: mdi:air-filter
icon_color: "#8A9977"
card_mod:
style:
.: |
ha-card {
width: 180px;
}
- type: custom:mushroom-template-card
primary: "{{ states('sensor.zehnder_comfoair_q_filter_replacement_remaining_days') }} "
card_mod:
style:
mushroom-state-info$:
|
.container {
margin-left: 50px;
}
card_mod:
style:
mushroom-state-info$:
|
.container {
margin-left: 20px;
}
- type: horizontal-stack
cards:
- type: custom:mushroom-template-card
primary: Verbruik
icon: mdi:flash-triangle-outline
icon_color: "#8A9977"
card_mod:
style:
.: |
ha-card {
width: 180px;
}
- type: custom:mushroom-template-card
primary: "{{ states('sensor.zehnder_comfoair_q_power') }} W"
card_mod:
style:
mushroom-state-info$:
|
.container {
margin-left: 50px;
}
card_mod:
style:
mushroom-state-info$:
|
.container {
margin-left: 20px;
}
solution:
- type: horizontal-stack
cards:
- type: custom:mushroom-template-card
primary: Verbruik
icon: mdi:flash-triangle-outline
icon_color: "#8A9977"
card_mod:
style:
.: |
ha-card {
width: 180px;
padding-left: 20px;
}
- type: custom:mushroom-template-card
primary: "{{ states('sensor.zehnder_comfoair_q_power') }} W"
card_mod:
style:
mushroom-state-info$:
|
.container {
margin-left: 50px;
}
.: |
ha-card {
margin-top: 8px;
}
Check again my recommendation, you composed a variable (which may not work anyway) in a wrong way.
@Ildar_Gabdullin this syntax is tough. And tougher as it has changed over time so some things I read are too outdated to still work. But after half a day, and a zillion variations, I sorted out conditional colors in multiple-entity-rowsâŚ
Looks pretty straight-forward once you see it⌠but so did so many of the variations along the way that did not work. You are right, this tutorial, with its section on multiple-entity-row cards helped a lot, but I still had to fuse a few concepts together to find just the right sauce.
Thanks again for the pointers and patience.
PeteDD
- type: custom:multiple-entity-row
entity: input_boolean.dryer_started
name: Laundry
state_header: Dryer
icon: mdi:tumble-dryer
card_mod:
style: |
.entities-row div.entity:nth-child(2) {
{%- if is_state('input_boolean.dryer_started', 'on') -%}
color: lawngreen;
{%- else -%}
color: var(--primary-text-color);
{%- endif -%}
}
.entities-row div.entity:nth-child(1) {
{%- if is_state('input_boolean.washer_started', 'on') -%}
color: lawngreen;
{%- else -%}
color: var(--primary-text-color);
{%- endif -%}
}
entities:
- entity: input_boolean.washer_started
name: Washer