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);
}
}
1 Like
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.
The code:
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 
It is described there, try using this:
style: |
ha-card .card-header {
...
}
Iām searching for a solution with card-mod to get cards with better look.
The first step is a markdown card,
font-size is to small, text-align should be center.
I tried different things, but nothing works in browser.
Can somebody help me to understand the working of this mod?
On my phone, but have a look at this post of mine to see how I styled a markdown table. Should get you going. Then, it always helps to post at least one of the things you tried ā then we can see a real attempt and it gives people some YAML to work with you.
I tried this and styles with ha-markdown, ha-markdown-element and p, but there were no changes.
In the Inspector i can enter this and it works.
cards:
- type: custom:layout-card
layout_type: custom:vertical-layout
cards:
- type: custom:layout-card
layout_type: custom:horizontal-layout
layout:
width: 400
cards:
- type: markdown
content: 'Harmony Wohnzimmer'
style: |
ha-card {
font-size: 24px;
text-align: center;
}
- type: custom:layout-card
layout_type: custom:grid-layout
title: Harmony Wohnzimmer
layout:
grid-template-columns: 33% 34% 33%
grid-template-rows: 60px
grid-gap: 0px 0px
cards:
card-mod wasnāt in ressources,
this is working:
cards:
- type: custom:layout-card
layout_type: custom:horizontal-layout
layout:
width: 420
cards:
- type: markdown
content: 'Harmony Wohnzimmer'
card_mod:
style:
ha-markdown:
$:
ha-markdown-element: |
p {
font-size: 24px;
text-align: center;
margin-bottom: auto;
}
Can anyone help me changing the line-height for all card titles inside a custom:grid-layout ? Iāve tried alooot of things but Iām totally lost ā¦
I tried to change a cards title. Tried for over one hour and something.
It seems to simply be impossible. I tried every approach, last two promising were
type: custom:mod-card
card:
type: grid
columns: 1
square: false
title: Welcome Home
cards:
- type: vertical-stack
cards:
- type: button
tap_action:
action: navigate
navigation_path: home
name: Home
icon: mdi:home-circle
hold_action:
action: none
icon_height: 100px
show_state: false
- type: custom:simple-clock-card
use_military: true
hide_seconds: false
font_size: 2rem
padding_size: 10px
card_mod:
style: |
ha-card {
letter-spacing: 3px;
border: 0px;
padding: 3px;
background: default;
}
card_mod:
style: |
ha-card .card-header {
margin-left: auto;
color: red;
margin-right: auto;
}
and
type: custom:mod-card
card:
type: grid
columns: 1
square: false
title: Welcome Home
cards:
- type: vertical-stack
cards:
- type: button
tap_action:
action: navigate
navigation_path: home
name: Home
icon: mdi:home-circle
hold_action:
action: none
icon_height: 100px
show_state: false
- type: custom:simple-clock-card
use_military: true
hide_seconds: false
font_size: 2rem
padding_size: 10px
card_mod:
style: |
ha-card {
letter-spacing: 3px;
border: 0px;
padding: 3px;
background: default;
}
card_mod:
style: |
.name {
margin-left: auto;
color: red;
margin-right: auto;
}
Changed exactly nothing. Summary: changing card titles is impossible. Everyone trying to do this on a per card basis: donĀ“t waste your time (like I did).
What do you want exactly?
Could you provide a picture describing your intentions?
I want to center a cardĀ“s title. Nothing more, nothing less 
See š¹ Card-mod - Add css styles to any lovelace card - #1951 by e-raser
To be more visual:
Currently:
Desired (mock-up):
Mission impossible according to what IĀ“ve gone through so far.
+++ UPDATE +++
Solution provided by @MaestroMetty at š¹ Card-mod - Super-charge your themes! - #864 by MaestroMetty.
This is not a solution. This is just another approach.
Okay 
Well itĀ“s working (basically) for me. Even the need for using the custom:mod-card is not nice but I can completely live with that.
Would you propose another approach for the same result?