There is no need to use card-mod to set a static color for secondary entities (i.e. entities on the right side of the row). Use “styles” option with a required style.
Wrong indentation in your code. Check card-mod examples for a correct indentation.
So, first remove useless and wrong code. Then come back to add that “state-badge thing”.
The problem is, that I don’t know how to combine the style: | with your state-badge thing, which does not have a | after style:. If I omit the |, I get the error message “can not read a block mapping entry; a multi line key may not be an implicit key”.
Card-mod code starts with “style”.
You should at least read card-mod docs on GitHub.
Indentation problem also remains.
Also, read about a “styles” option for multiple-entity-row.
I see, I thought you meant the exact card_mod: line. I did read the GitHub docs for card-mod, but the wiki there leads to a nice, extensive post from you.
I olny reduced my card to this example with a single color, so it is easier to read. My original card has 10 different colors depending on a temperature sensor. Here is a simple example.
First - let’s call the “left” entity as the “main entity” (for which we may display a state on the last right column), all right entities - “secondary entities”.
You got ONE secondary entity - but you specified card-mod styles for FOUR secondary entities.
For secondary entities you may use a “styles” option (no card-mod required) to set a color and some other CSS properties:
entities:
- entity: sensor.xxxxxxx
styles:
width: 80px
text-align: left
color: red
or
styles:
--paper-item-icon-color: red
This is a good choice if styles (colors etc) are static. If they are dynamic (depend on some conditions) then you should either place the whole row inside config-template-card (supports JS) or use card-mod (supports jinjia2).
If you need to color the main entity’s state you may use the “styles” option:
Only to complete/add: … or with lovelace-card-templater, which supports jinjia2 as well. But I didn’t try this for styles/ in multiple entities row yet.
Thank you very much for your thorough explanation! I now understand what you meant by with “card-mod” and without. I simply assumed it would do the same thing.
I wanted to add more entities and simply left it there, sorry.
Yes, that is easier, done.
Will do that.
Same as 1.
Thanks for the hint, added a “else” path.
& 3. I am still struggling to combine a conditional color for the “main entity” and the state-badge { display: none; } thing.
But if I add my if-loop from above to the styles part at the end, it does not work. Nor was I able to combine the state-badge { display: none; } part to the .state.entity { color: magenta; } part from you number 3. Is it possible to combine them without the config-template-card?
One last question, is there a disadvantage to combine card-mod style with the styles from multiple-entity-card? Because you commented it out. I want only one of the entities to have a specific color, but the position of it is not always the same, so div.entity:nth-child(1) state-badge is not a good way to achieve this, but styles under the entity does work or is there a way to specify div.entity:nth-child(1) state-badge to a specific entity?
I commented the “styles” stuff since the same styling was made by card-mod.
When combining card-mod and “styles” you should apply each method to different elements to avoid conflicts.
This is a case when you should use the “styles”.
Suppose the 1st secondary entity is not displayed since “hide_if” works - then the index of some entity is changed - so only fixed “styles” works.
nth-child(1) means “the 1st child element”. There are some other methods, in SOME cases they may help to select the needed element. But I would choose “styles” in this case.
Once again, “styles” MAY be used instead on card-mod (which may be used to access ANY element) in some limited scope and only for static CSS properties. In most cases “styles” are quite enough.
I have lots of battery operated sensors and would like to see a red battery icon appear next to its value when the battery is below a certain threshold. I am able to show the actual battery percentage only when its value is below 35 but I don’t know how to replace that with an icon. I am hoping to avoid using templates in configuration.yaml (if that is even a viable solution) as that would require quite a few of them.
Is there a way to replace “Battery xx%” with a red battery empty icon keeping the code within this card?
I am having trouble figuring out how to change the icon and color based on the battery entity of the motion sensor.
If I could use the code below, I should be able to display the icon only when the battery is below 35% as I’ve read mdi:blank should be what is says… blank.
I now understand what you meant by with “card-mod” and without. I simply assumed it would do the same thing.
