this is what I am trying to replicate with config.entity:
{% if states.binary_sensor.updater is defined %} none {% endif %}
or even better:
{% if states.binary_sensor.updater %} none {% endif %}
both of these work as expected, and likewise with ānot is definedā or is none
Regarding the condition:
if condition = true:
card_mod:
style: |
:host {
display: none
}
if condition = false:
card_mod:
style: |
:host {
display:
}
The 2nd expression will not work if using this construction:
display: {% if config.entity is none %}none{%endif%}
so this works:
style: |
:host {
display: {% if states(config.entity) in ['unknown'] %} none {% endif %}
}
and this:
style: |
:host {
display: {% if states(config.entity) == 'unknown' %} none {% endif %}
}
ā¦ pff now thats a bit of a surprise. I mean, not that these 2 templates do the same. of course they do. but the fact we can not use config.entity, and can not use is none, but need to use the states() of the config.entity, and need to check for 'unknown'
This is anyway wrong conditional check.
A=
if(condition)
123
What if condition is false? The value A becomes undefinedā¦
You should specify āelseā or put āA=ā under the conditionās check.
Seems so:
yes, thats what I wrote here, and as state there, it seems to work just fine. Have just tested it with this full card-mod, and can confirm once more that is shows when the existence check is positive. (the condition isnāt met, iow the states(config.entity) != 'unknown'
yes, of course I understand that, but thatās checking for the states state (as in state of the entity), while I was trying to check for the state (as in entity) itself
compare this js template:
- color: >
[[[ if (entity) return entity.attributes.icon_color;
return 'var(--secondary-text-color)'; ]]]
first check if the entity itself exists, then return an attributes of that entity
seems we should be able to do that with config.entity, unless thereās something in card-mod preventing that.
Well, youāve pointed me to a solution, to thanks again! Hope Thomas will have a look at the issue and see if things can be simplifiedā¦
add this to the top of your lovelace view:
style:
<<: &exist
.: |
:host {
display: {% if states(config.entity) == 'unknown' %} none {% endif %}
}
and simply add it to any other badge with:
style:
<<: *exist
Nice !
btw, with {% else %} guard:
:host {
display: {% if states(config.entity) == 'unknown' %} none
{% else %} inline-block
{% endif %}
or:
card_mod:
style:
<<: &exist
.: |
:host {
{% if states(config.entity) == 'unknown' %} display: none
{% else %} display: inline-block
{% endif %}
}
Do not touŃh it. One day it may be changed in HA code. It is better to simply ādo not change the styleā.
now you lost meā¦ I thought you wanted an else clause? what would you suggest in this case then?
building on this, I tried the same mod on a button-card in the view, but that doesnāt work. It simply shows a button, with all style settings, but without a working entityā¦
That is why I proposed you:
:host {
{% if is_state(config.entity,"none") %} display: none; {% endif %}
}
which is equal to:
:host {
display: none;
}
and
:host {
}
Give me a code for the button & your expectations, I will try to figure it out.
ok I see, thanks. didnāt realize thatās what you implied with that.
the interpreter wonāt choke on an empty {} then? Guess not, it doesnāt choke on the absence of the else either 
no, it will be OK.
you may put a useless style if you like:
--my-invented-variable: red;
yes, Iāve just discovered we can put most anything there, a simple null works too Best leave it out completely then, I donāt really like useless code.
about the entity in the view:
I tried it on a simple button:
- name: Sonorisation
entity: input_boolean.notify_system
show_name: true
icon: mdi:speaker
type: custom:button-card
card_mod:
style:
<<: *exist
using the same test trick (delete the last character of the entity, still shows the card)
maybe this should be done from within the button-card, but for educational purposes of card-mod Ireally like to have a go at it here too.
because, and here comes the full monty, if we can figure it out, it needs to be combined with a rather huge card_mod
maybe even that should be done in the button card with the extra_styles option I now realize.
- name: Sonorisation
entity: input_boolean.notify_system
show_name: true
icon: mdi:speaker
styles:
custom_fields:
wave:
- background-color: rgba(0,0,0,0)
- position: absolute
- right: 5%
- top: 5%
- font-size: 13px
- line-height: 20px
- display: |
[[[
if (states['input_boolean.notify_system'].state == 'on') return '';
else return 'none';
]]]
- '--icon-color': |
[[[
if (states['input_boolean.notify_system'].state == 'on') return 'var(--icon-color-on)';
else return 'var(--primary-color)';
]]]
card:
- border: 2px solid var(--primary-color)
- border-radius: 10px
icon:
- color: var(--primary-color)
name:
- font-variant: small-caps
- color: var(--primary-color)
custom_fields:
wave: |
[[[
return `
<div class="loader-container">
<div class="loader-3">
<div class="item-1"></div>
<div class="item-2"></div>
<div class="item-3"></div>
<div class="item-4"></div>
<div class="item-5"></div>
</div>
</div>`
]]]
type: custom:button-card
card_mod:
style: |
.loader-3{
width: 40px;
height: 40px;
}
.loader-3 div {
height: 100%;
width: 3px;
display: inline-block;
}
.loader-3 div .item-1{
height: 50%;
}
.loader-3 .item-1 {
animation: loader-3-first-div 1.2s infinite linear;
background-color: red;
}
.loader-3 .item-2 {
animation: loader-3-second-div 1.2s infinite linear;
animation-delay: -1.1s;
background-color: darkorange;
}
.loader-3 .item-3 {
animation: loader-3-third-div 1.2s infinite linear;
animation-delay: -1.0s;
background-color: gold;
}
.loader-3 .item-4 {
animation: loader-3-fourth-div 1.2s infinite linear;
animation-delay: -0.9s;
background-color: green;
}
.loader-3 .item-5 {
animation: loader-3-last-div 1.2s infinite linear;
animation-delay: -0.8s;
background-color: DarkOrchid;
}
@keyframes loader-3-first-div {
25%,75% {
transform: scaleY(0.2);
}
0%,50%,100%{
transform: scaleY(0.6);
}
}
@keyframes loader-3-second-div {
25%,75% {
transform: scaleY(0.4);
}
0%,50%,100%{
transform: scaleY(1);
}
}
@keyframes loader-3-third-div {
25%,75% {
transform: scaleY(0.4);
}
0%,50%,100%{
transform: scaleY(1);
}
}
@keyframes loader-3-fourth-div {
25%,75% {
transform: scaleY(0.4);
}
0%,50%,100%{
transform: scaleY(1);
}
}
@keyframes loader-3-last-div {
25%,75% {
transform: scaleY(0.2);
}
0%,50%,100%{
transform: scaleY(0.6);
}
}
There is smth strange with "is_state(config.entity,'unknown')" for "custom:button-card":
Five buttons:
1 - with "is_state(config.entity,'unknown')" - the card is still displayed for wrong entity;
2 - with "is_state('THIS_WRONG_ENTITY', 'unknown')" - the card is still displayed for wrong entity;
3 - with "states(config.entity) in ['unknown']" - the card is NOT displayed for wrong entity;
4 - always "display: none" - the card is NOT displayed;
5 - the card w/o style.
type: vertical-stack
cards:
- type: entity
entity: sun.sun
- name: Sonorisation (with style 1)
entity: input_boolean.test_boolean__non_existing__
show_name: true
icon: mdi:speaker
type: custom:button-card
card_mod:
style: |
:host {
{% if is_state(config.entity,'unknown') %} display: none !important; {% endif %}
}
- name: Sonorisation (with style 2)
entity: input_boolean.test_boolean__non_existing__
show_name: true
icon: mdi:speaker
type: custom:button-card
card_mod:
style: |
:host {
{% if is_state('input_boolean.test_boolean__non_existing__','unknown') %} display: none !important; {% endif %}
}
- name: Sonorisation (with style 3)
entity: input_boolean.test_boolean__non_existing__
show_name: true
icon: mdi:speaker
type: custom:button-card
card_mod:
style: |
:host {
{% if states(config.entity) in ['unknown'] %} display: none !important; {% endif %}
}
- name: Sonorisation (with style 4)
entity: input_boolean.test_boolean
show_name: true
icon: mdi:speaker
type: custom:button-card
card_mod:
style: |
:host {
display: none !important;
}
- name: Sonorisation (w/o style 5)
entity: input_boolean.test_boolean
show_name: true
icon: mdi:speaker
type: custom:button-card
its the !important that is making it work:
card_mod:
style: |
:host {
{% if states(config.entity) == 'unknown' %} display: none !important{% endif %}
}
works too.
Always understood that its considered bad practice using the !important, so Iāve never done that, anywhere in the config yet .
as said, we should probably use the button card options itself:
type: custom:button-card
styles:
card:
- display: >
[[[ if (!entity.state) return none; ]]]
note to self: add this to button_card_templates.yaml
This is not the issue.
The issue is that is_state(config.entity,'unknown') not working as well as is_state('my_wrong_entity_id,'unknown').
In my opinion - this is a BUG.
Have a look at this example:
type: entities
entities:
- entity: sun.sun
card_mod:
style: |
:host {
{% if is_state('input_boolean.test_boolen','unknown') %} color: red; {% endif %}
}
- entity: sun.sun
card_mod:
style: |
:host {
{% if states('input_boolean.test_boolen') in ['unknown'] %} color: red; {% endif %}
}
- entity: sun.sun
card_mod:
style: |
:host {
{% if states('input_boolean.test_boolen') == 'unknown' %} color: red; {% endif %}
}
The 1st style does not work for some wrong entity, the 2nd & 3rd do.
So this is a common behaviour, not only for the "custom:button-card".
And letās look at the āTemplatesā window:
Asked a question here and got a reply from Petro.
Here is my test with your style - 3 buttons:
1 - wrong entity
2 - wrong entity + your style
3 - valid entity
type: vertical-stack
cards:
- name: Sonorisation (wrong entity)
entity: input_boolean.test_boolean___XXX
show_name: true
icon: mdi:speaker
type: custom:button-card
- name: Sonorisation (wrong entity + style)
entity: input_boolean.test_boolean___XXX
show_name: true
icon: mdi:speaker
type: custom:button-card
styles:
card:
- display: >
[[[ if (!entity.state) return none; ]]]
- name: Sonorisation
entity: input_boolean.test_boolean
show_name: true
icon: mdi:speaker
type: custom:button-card
Seems that this style does not workā¦
"entity.state" returns a state. If the entity is undefined then it causes an error.
As for me, I do not know how to check whether an entity is valid or not in the "custom:button-card".
Sorry for an off-topic, this should be discussed in the ācustom:button-cardā thread.
I try to apply some custom style to the title area of a (entities) card. Unfortunately this isnĀ“t working, all style changes are āonlyā applied to the card below the title area.
How to modify a cardĀ“s title? Basically I just want to center a cards title instead of having it aligned left.
Do I need to fake a title somehow to modify it or is there another, more easy way?
yes it checks for a state, and works in my setup. You can even do this (button_card_template):
exist:
styles:
card:
- display: >
[[[ if (!entity) return none; ]]]
and in a card:
- name: Sonorisation
template: exist
entity: input_boolean.notify_syzzzz
show_name: true
icon: mdi:speaker
type: custom:button-card
and (they both) even work if you take out the full entity:
- name: Sonorisation
template: exist
# entity: input_boolean.notify_system
show_name: true
icon: mdi:speaker
type: custom:button-card
or:
- type: custom:button-card
template: exist
entity:
name: Sonorisation
show_name: true
icon: mdi:speaker
back on topic: Thomas replied to the issue I created for this, but though the format of that template seems ok, (and I use that elsewhere in the config templates successfully) I can not get it to work in the card_mod.
Look at the 1st post, there is a link to to another post with many styles for the Entities card.
I did so already. But couldnāt find anything related to title 