Fixed,thanks a lot like always 
I wonder how to pass a card-mod style as a variable into Decluttering card.
Let’s imagine that there is a decluttering template:
decluttering_templates:
test_decl_entity_row:
card:
type: entities
entities:
- entity: '[[SENSOR]]'
name: '[[NAME]]'
card_mod:
style: '[[STYLE]]'
And there is a simple example:
type: 'custom:decluttering-card'
template: test_decl_entity_row
variables:
- SENSOR: sun.sun
- NAME: Sun
- STYLE: ':host { color: green; }'
Here I was able to pass a card-mod style as a single-line string variable.
But let’s assume that the style is more complex:
- type: entities
entities:
- entity: sun.sun
style:
hui-generic-entity-row:
$: |
.info.pointer.text-content {
color: cyan;
}
Using card-mode 3.0 syntax, the code can be shorten a bit:
- type: entities
entities:
- entity: sun.sun
card_mod:
style:
hui-generic-entity-row$: |
.info.pointer.text-content {
color: cyan;
}
and a bit more shorter:
- type: entities
entities:
- entity: sun.sun
card_mod:
style:
hui-generic-entity-row$: |
.info.pointer.text-content { color: cyan; }
And then I do not know how to present the style as a single-line string…
Can anyone help me?
Why do you want to do that? Anyway, I think you could just quote it instead of using | (didn’t test it).
Sometimes I wanted to create a decluttering template with different behaviour which can be implemented by using card-mod styling.
Tried this:
- type: 'custom:decluttering-card'
template: test_decl_entity_row
variables:
- SENSOR: sun.sun
- NAME: Солнце
- STYLE: 'hui-generic-entity-row$.info.pointer.text-content { color: green; }'
Does not work.
But this simple styling does work:
STYLE: ':host { color: green; }'
1 Like
Yes, but why do you want to make it short?
This might work:
- type: entities
entities:
- entity: sun.sun
card_mod:
style: {"hui-generic-entity-row$": ".info.pointer.text-content { color: cyan; }"}
I wanted to make it a string - otherwise it will not pass as a variable.
great, thank you so much!!!
Some more working options:
- type: 'custom:decluttering-card'
template: test_decl_entity_row
variables:
- SENSOR: sun.sun
- NAME: colored name
- STYLE:
hui-generic-entity-row$: '.info.pointer.text-content { color: cyan; }'
- type: 'custom:decluttering-card'
template: test_decl_entity_row
variables:
- SENSOR: sun.sun
- NAME: colored name & value
- STYLE:
hui-generic-entity-row$: '.info.pointer.text-content { color: green; }
.text-content:not(.info) { color: orange; }'
decluttering_templates:
test_decl_entity_row:
card:
type: entities
entities:
- entity: '[[SENSOR]]'
name: '[[NAME]]'
card_mod:
style: '[[STYLE]]'
These options I found by chance - Lovelace editor generates that yaml after saving the code in your format.
And I do not understand why does it work - I believed that there must be smth like “|” or “>” after the “STYLE:” word.
More examples are described here.
Because it’s regular YAML. Regular YAML works like that. I didn’t even know that would work until now.
Well, it 's good that we have a possibility to pass a card-mod style as a variable.
Some more examples - styling multiple-entity-row inside decluttering-card:
Applying styles:
- type: custom:decluttering-card
template: test_decl_entities_row_multi_for_style
variables:
- SENSOR: sun.sun
- NAME: color icons
- STYLE: ':host { --paper-item-icon-color: red;}'
- type: custom:decluttering-card
template: test_decl_entities_row_multi_for_style
variables:
- SENSOR: sun.sun
- NAME: color icons
- STYLE:
hui-generic-entity-row:
$: |
state-badge {
color: orange;
}
.: |
div.entity:nth-child(2) state-badge {
color: green;
}
div.entity:nth-child(4) state-badge {
color: red;
}
The template:
test_decl_entities_row_multi_for_style:
card:
type: entities
entities:
- type: 'custom:multiple-entity-row'
style: '[[STYLE]]'
entity: '[[SENSOR]]'
entities:
- entity: '[[SENSOR]]'
name: XXXX
unit: ''
- entity: sensor.service_empty_value
name: false
unit: false
icon: 'mdi:car'
- entity: '[[SENSOR]]'
name: XXXX
unit: ''
styles:
width: 60px
text-align: center
- entity: sensor.service_empty_value
name: false
unit: false
icon: 'mdi:link'
name: '[[NAME]]'
unit: ''
icon: 'mdi:account'
toggle: false
show_state: false
state_header: ''
secondary_info: last-changed
The decluttering template above represents an Entities card with a multiple-entity-row.
That causes a presence of ha-card element necessary for card-mod.
Now I need to apply a style to a decluttering template which is a multiple-entity-row itself (which does not have a ha-card element).
For this I need to use mod-card:
test_decl_multi_for_style:
card:
type: 'custom:mod-card'
style: '[[STYLE]]'
card:
type: 'custom:multiple-entity-row'
entity: '[[SENSOR]]'
entities:
- entity: '[[SENSOR]]'
name: XXXX
unit: ''
- entity: sensor.service_empty_value
name: false
unit: false
icon: 'mdi:car'
- entity: '[[SENSOR]]'
name: XXXX
unit: ''
styles:
width: 60px
text-align: center
- entity: sensor.service_empty_value
name: false
unit: false
icon: 'mdi:link'
name: '[[NAME]]'
unit: ''
icon: 'mdi:account'
toggle: false
show_state: false
state_header: ''
secondary_info: last-changed
Applying styles:
- type: custom:decluttering-card
template: test_decl_multi_for_style
variables:
- SENSOR: sun.sun
- NAME: color icons (mod-card)
- STYLE: ':host { --paper-item-icon-color: red;}'
- type: custom:decluttering-card
template: test_decl_multi_for_style
variables:
- SENSOR: sun.sun
- NAME: color icons (mod-card)
- STYLE:
multiple-entity-row:
$:
hui-generic-entity-row:
$: |
state-badge {
color: orange;
}
.: |
div.entity:nth-child(2) state-badge {
color: green;
}
div.entity:nth-child(4) state-badge {
color: cyan;
}
More examples are described here.
Thank you for the great work in Card-mod.
I am using Glance card with a lock and would like to change the icon color to Red. The icon is still showing as Yellow.
entities:
- entity: lock.front_door
show_entity_picture: true
state:
- icon: 'mdi:door'
style: |
:host {
--paper-item-icon-color: red ;
}
tap_action:
action: toggle
service: lock.lock
service_date:
entity_id: lock.front_door
type: glance
What version of card-mod are you using? Are you sure that’s the right styling?
I am using 3.07 of card-mod. No I am not sure my the styling is right. I have gone through all the forums and tried many things. Happy for any suggestions.
Try using the new format. Also, properly use whitespace, if you can:
:host {
--paper-item-icon-color: red ;
} [END OF THING HERE]
should be
:host {
--paper-item-icon-color: red ;
}[END OF THING HERE]
Of course, these are just minor things.
Thank you. I have tried as below. Still no luck.
entities:
- entity: lock.front_door
show_entity_picture: true
state:
- icon: 'mdi:door'
style: |
:host {
--paper-item-icon-color: red ;
}
tap_action:
action: toggle
service: lock.lock
service_date:
entity_id: lock.front_door
type: glance
No need for the space in between red and the semicolon. Also use card_mod: style: (see README for new syntax).
@KTibow thank you so much for your assistance.
I am sorry to trouble you yet again. I have tried the readme and have made the follwoing changes. Still no luck.
entities:
- entity: lock.front_door
show_entity_picture: true
state:
- icon: 'mdi:door'
card_mod: null
style: |
ha-card {
--paper-item-icon-color:red
}
tap_action:
action: toggle
service: lock.lock
service_date:
entity_id: lock.front_door
type: glance
No, not like that.
entities:
- entity: lock.front_door
show_entity_picture: true
state:
- icon: 'mdi:door'
card_mod:
style: |
ha-card {
--paper-item-icon-color: red;
}
tap_action:
action: toggle
service: lock.lock
service_date:
entity_id: lock.front_door
type: glance
Thank you again for your help.
I think I did as you suggested, but still no luck.
entities:
- entity: lock.front_door
show_entity_picture: true
state:
- icon: 'mdi:door'
card_mod:
style: |
ha-card {
--paper-item-icon-color: red;
}
tap_action:
action: toggle
service: lock.lock
service_date:
entity_id: lock.front_door
type: glance
Styling Glance card:
Check this:
type: vertical-stack
cards:
- type: glance
title: Colored icons
style: |
ha-card {
--paper-item-icon-color: red;
}
entities:
- entity: sensor.cleargrass_1_co2
- entity: sensor.cleargrass_1_co2
- type: glance
title: Colored icon (1st entity)
entities:
- entity: sensor.cleargrass_1_co2
style: |
:host {
--paper-item-icon-color: red;
}
- entity: sensor.cleargrass_1_co2
The code does this:
Update:
The example above is 100% valid for "sensor".
For entities like "sun.sun", "binary_sensor" it it may not work.
Check this:
type: vertical-stack
cards:
- type: glance
state_color: true
title: '--paper-item-icon-color'
entities:
- entity: sensor.cleargrass_1_co2
name: styling OK
style: |
:host {
--paper-item-icon-color: red;
}
- entity: sun.sun
name: styling failed
style: |
:host {
--paper-item-icon-color: red;
}
- type: glance
state_color: true
title: '--paper-item-icon-color: binary_sensor'
entities:
- entity: binary_sensor.service_on_value
name: styling failed
style: |
:host {
--paper-item-icon-color: red;
}
- entity: binary_sensor.iiyama_2_ping_availability_status
name: styling OK
style: |
:host {
--paper-item-icon-color: red;
}
- type: glance
state_color: false
title: '--paper-item-icon-color: binary_sensor'
entities:
- entity: binary_sensor.service_on_value
name: styling OK
style: |
:host {
--paper-item-icon-color: red;
}
- entity: binary_sensor.iiyama_2_ping_availability_status
name: styling OK
style: |
:host {
--paper-item-icon-color: red;
}
- type: glance
title: using long syntax
entities:
- entity: sensor.cleargrass_1_co2
name: styling OK
style:
state-badge:
$:
ha-icon:
$: |
ha-svg-icon {
color: red;
}
- entity: sun.sun
name: styling OK
style:
state-badge:
$:
ha-icon:
$: |
ha-svg-icon {
color: red;
- entity: binary_sensor.service_on_value
name: styling OK
style:
state-badge:
$:
ha-icon:
$: |
ha-svg-icon {
color: red;
}
For
"binary_sensor" the short notation "--paper-item-icon-color" will not work in case:
- the sensor = ON
- state_color: true
But the “long notation” (using DOM) will work.
And this is not a Glance card.
This looks like a ‘custom:button-card’ more; mixed code - something from button-card, but “type: glance”.
If you prefer using the button-card then changing a color may be done by button-card itself without card-mod.
If you prefer using a glance card - remove these extra lines from the code.
Hey! This is good stuff!
If you want, please feel free to add this information to the wiki on github.
1 Like