Check “padding” property in docs.
Hi All,
I‘ve read the whole thread (I must admit that I didn‘t understand everything), but I didn’t find a solution to define a card-mod that applies to all entities (head and entities).
Currently I use the following code to define it for each entity separately:
type: entities
entities:
- type: custom:fold-entity-row
head:
entity: cover.alle_markisen
card_mod:
style: |
:host {
{% if is_state(config.entity,'open') %}
--paper-item-icon-color: red;
}
{%else%}
--paper-item-icon-color: green
{%endif%}
}
entities:
- entity: cover.markise_links
card_mod:
style: |
:host {
{% if is_state(config.entity,'open') %}
--paper-item-icon-color: red;
}
{%else%}
--paper-item-icon-color: green
{%endif%}
}
- entity: cover.markise_mitte
card_mod:
style: |
:host {
{% if is_state(config.entity,'open') %}
--paper-item-icon-color: red;
}
{%else%}
--paper-item-icon-color: green
{%endif%}
}
- entity: cover.markise_rechts
card_mod:
style: |
:host {
{% if is_state(config.entity,'open') %}
--paper-item-icon-color: red;
}
{%else%}
--paper-item-icon-color: green
{%endif%}
}
Is there a way to define only one card-mod that applies to all entities (head and entities)?
main card-mod thread → 1st post → link at the bottom → f-e-r
hmm, not really fantastic, but yes, this one
well, it could be not obvious from posted examples - but here is your way:
type: entities
entities:
- type: custom:fold-entity-row
head:
entity: sun.sun
padding: 15
open: true
entities:
- entity: sun.sun
- entity: sun.sun
card_mod:
style: |
:host {
--paper-item-icon-color: red;
}
But what I completely missed - you need to check a state…
My fault, let me think a bit.
Check this one:
type: entities
entities:
- type: custom:fold-entity-row
head:
entity: input_boolean.test_boolean
padding: 15
open: true
state_color: true
entities:
- entity: input_boolean.test_boolean_2
- entity: input_boolean.test_boolean_3
card_mod:
style: |
:host {
--state-input_boolean-on-color: red;
--state-input_boolean-off-color: green;
}
This is an example for input_boolean, you will need to write a similar code for covers like:
:host {
--state-cover-open-color: red;
--state-cover-closed-color: green;
--state-cover-closing-color: cyan;
}
Thank you very much, that helped!
Now this code is working:
type: entities
entities:
- type: custom:fold-entity-row
head:
entity: cover.alle_markisen
entities:
- entity: cover.markise_links
icon: mdi:dock-left
- entity: cover.markise_mitte
icon: mdi:dock-top
- entity: cover.markise_rechts
icon: mdi:dock-right
state_color: true
card_mod:
style: |
:host {
--state-cover-open-color: red;
--state-cover-closed-color: green;
--state-cover-closing-color: cyan;
}
Can I ask another question related to this kind of code? How can I hide the state („Aus“ and „Geschlossen“)?:
show_state: false doesn’t work:
- type: custom:fold-entity-row
head:
entity: binary_sensor.alle_fenster
show_state: false
state_color: true
card_mod:
style: |
:host {
--state-binary_sensor-on-color: red;
--state-binary_sensor-off-color: green;
}
Do not invent options ).
You may try using “custom:template-entity-row” for customizing/not showing a state.
Also, you may hide a state for a standard entity row by card-mod, there should be a ready example on the link I provided above.
I didn‘t invent „show_state: false“, I‘ve found it in other posts! 
Can you give me a closer hint where to find that example?
Someone did not read Docs & posted smth, another guy took it “as is” - this is how fake news are spread)).
No, cannot, sorry, follow the link I gave you, it is there…
This option may belong to many cards - & may be absent for some card, it is normal.
Now I‘ve found that one…
…and it hides the state with this code:
type: entities
entities:
- entity: binary_sensor.alle_fenster
card_mod:
style:
hui-generic-entity-row:
$: |
.text-content:not(.info) {
display: none;
}
But when I add „ type: custom:fold-entity-row“…
type: entities
entities:
- entity: binary_sensor.alle_fenster
type: custom:fold-entity-row
card_mod:
style:
hui-generic-entity-row:
$: |
.text-content:not(.info) {
display: none;
}
… it’s back again:
How can I hide the state in this card type?
Do not have a ready example.
Go to card-mod thread → 1st post → that link
Find there examples for fold-entity-row & adapt for your needs.
I‘ve found a solution: I set the the type of the head and the entities to custom:multiple-entity-row and then can use card_mod for them:
- type: custom:fold-entity-row
open: true
head:
entity: binary_sensor.alle_fenster
type: custom:multiple-entity-row
show_state: false
state_color: true
card_mod:
style: |
:host {
--state-binary_sensor-on-color: red;
--state-binary_sensor-off-color: green;
}
entities:
- entity: binary_sensor.fenster_gastebad_contact
type: custom:multiple-entity-row
show_state: false
- entity: binary_sensor.fenster_bad_contact
type: custom:multiple-entity-row
show_state: false
- entity: binary_sensor.fenster_schlafzimmer_contact
type: custom:multiple-entity-row
show_state: false
- entity: binary_sensor.fenster_lilli_contact
type: custom:multiple-entity-row
show_state: false
- entity: binary_sensor.fenster_marie_contact
type: custom:multiple-entity-row
show_state: false
I have another question: Shouldn’t child elements of a group that are group parents themselves automatically be expandable as well (without listing them as entities)?
Like with this code:
type: entities
entities:
- type: custom:fold-entity-row
head:
entity: light.alle_lichter
I only get this, although all of the children are group parents:
Hi, I’m trying to move everything to the left, and I have to remove the icons, why doesn’t the style work?
type: custom:fold-entity-row
head:
type: section
label: Aperture
style: |
:host div#items {
margin: -100px -200px -200px -20px;
}
entities:
- entity: sensor.conteggio_aperture_posta_giornaliere_lettura
name: Aperture giornaliere
- entity: sensor.conteggio_aperture_posta_mensili_lettura
name: Aperture mensili
- entity: sensor.conteggio_aperture_posta_annuali_lettura
name: Aperture annuali
Firstly, left padding on this card is managed via an inbuilt setting. See the documentation for details on the padding: key.
Secondly, it looks like you are trying to apply changes via the custom frontend component card-mod: do you actually have it installed? And which version? Since version 3.4.0, all styles need to be under an explicit card_mod key.
If wanting to remove the display of icons from entities for example, then you are probably better off asking this in the dedicated thread for card-mod, where you find detailed explanations and examples, especially in this excellent post by community member Ildar_Gabdullin.
1 Like
trying to edit the resource to fix some styling details I want in all cards, Ive managed to decrease the size of the fold icon and set the color to my primary color.
Ive also managed to move the padding of the items to 0.
this way I dont have to set that in all (400+) template-entity-row card configs, nor do I need to card-mod that, which makes it a lot faster.
there are 2 things I want to change still:
move the label heading to the left which I now do with a card_mod:
style: |
.label {
margin-left: 0px !important;
}
second, instead of the hardcoding of the padding with
style=${`padding-left: 0;`}
id like to make that conditional wit something like
style=${this._config.padding ? `padding-left: ${this._config.padding}px;` : `padding-left: 0;`}
meaning to say, if there is a padding set in the config, use that, if no padding is set, use 0.
however, no matter what I try, that never works and the items are moved to the right…
this is what I have it look like right now
more subtle icon size and color, and better aligning for my themes of both head label and items.:
If there is a JS guru around, please dont hesitate…
current yaml:
- type: custom:fold-entity-row
# card_mod: !include /config/dashboard/card_mods/fold_arrow_icon.yaml #&toggle #!secret style_toggle_icon
# style:
# ha-icon:
# $: |
# ha-svg-icon {
# color: var(--primary-color);
# width: 24px;
# }
head:
type: section
label: Details
card_mod: !include /config/dashboard/card_mods/label.yaml
group_config:
secondary_info: last-changed
# padding: 0
entities:
- input_boolean.hide_card_overflow
- input_number.active_icon_size
- input_boolean.weer_view_background