Have a look at Customize fold-entity-row
Don’t forget that, for a while now, you have to add card_mod: before the style: tag.
Hi , is there a way to get de background black and the corners right angel.
https://gist.github.com/smytangel/a7ed7be2c01162d0072b4ab4bb60ecdf
Do you think so?
card_mod:
style: |
ha-card {
background: black;
border-radius: 0;
}
Hi, where do i put that code in the in the existing code ?
Same place you added the rest. Just place it in front of or behind the rest of the mod.
I hope someone can help me out, please 
I am playing with some CSS styling of my card and in the HA frontend editor/preview, the animation with box-shadow works just fine. But when I close the editor, the animation is gone.
I can only assume that this has something to do with me linking it to :host, but I could not get it to work with ha-card.
Summary
show_name: true
show_icon: true
type: button
tap_action:
action: toggle
entity: sun.sun
card_mod:
style: |
:host::before {
content: '';
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
animation-name: gradient-shadow;
animation-timing-function: ease;
animation-duration: 8s;
animation-iteration-count: infinite;
}
@keyframes gradient-shadow {
...
And also tried
card_mod:
style:
hui-button-card $: |
:host::before {
content: '';
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
animation-name: gradient-shadow;
animation-timing-function: ease;
animation-duration: 8s;
animation-iteration-count: infinite;
}
@keyframes gradient-shadow {
...
ha-card:before ist not, what you are looking for?
1 Like
Unfortunately it does not seem to be.
Tried with and without leading : and following ::
card_mod:
style: |
:ha-card:before {
content: '';
EDIT:
Found the issue. The “:before” needed to be removed. I noticed after setting the animation to inset, that the position was just a little off.
He it worked as I gave the example.
How strange!
For me it really does not work. The animation shows as soon as I set to inset, but only the inner shadow is visible. The outer is not.
When I remove the :before it starts working.
If you still have it, would you mind posting your code? Or did you copy mine and just change that one line?
Copied just yours and changed :host:: to ha-card:
type: entities
card_mod:
style: |
ha-card:before {
content: '';
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
animation-name: gradient-shadow;
animation-timing-function: ease;
animation-duration: 8s;
animation-iteration-count: infinite;
}
@keyframes gradient-shadow {
0% {
box-shadow: 0 0 10px 5px darkblue,0 0 30px 10px darkblue;
}
25% {
box-shadow: 0 0 10px 5px blue,0 0 30px 10px blue;
}
50% {
box-shadow: 0 0 10px 5px darkblue,0 0 30px 10px darkblue;
}
75% {
box-shadow: 0 0 10px 5px blue,0 0 30px 10px blue;
}
100% {
box-shadow: 0 0 10px 5px darkblue,0 0 30px 10px darkblue;
}
}
entities:
- sun.sun
Aha, again interesting.
You did not copy mine, you used entities card 
Change it to button and it stops working.
Leave it as entities but remove the :before and it stops working.
So the syntax here is completely card dependent.
I just copied your card_mod. Didn’t see the type before. Thought that you missed it in your copy&paste. Here I always start with the type, so I didn’t look in the third line. 
Yes, saw it now as well. The before is placed before the content of the shadow root. And for entities, there is only one full content div. In button several. So it is place somewhere, where you cannot see it in button card, in entities at the right place with ha-card:before. Just place a xxx in content and you will see, where it is placed.
I tried with setting content to xxx, but it then does not appear.
Here is another puzzle.
As you can see, there is a card/box (black) inside the card (red) that prevents the animation from showing properly (the actual glowing border is missing).
Wrong: 
Right: 
Summary
type: entities
entities:
- sun.sun
card_mod:
style: |
ha-card {
background: red;
}
ha-card:before {
content: '';
position: absolute;
left: 0;
top: 0;
width: 50%;
height: 100%;
box-shadow: 0 0 10px 5px #ffff01,0 0 30px 10px #ffff01;
z-index: -1;
animation-name: half-yellow-shadow;
animation-timing-function: ease;
animation-duration: 10s;
animation-iteration-count: infinite;
border-radius: 5px;
}
ha-card:after {
content: '';
position: absolute;
right: 0;
bottom: 0;
width: 50%;
height: 100%;
box-shadow: 0 0 10px 5px #0ff,0 0 30px 10px #0ff;
z-index: -1;
animation-name: half-cyan-shadow;
animation-timing-function: ease;
animation-duration: 10s;
animation-iteration-count: infinite;
border-radius: 5px;
}
@keyframes half-yellow-shadow {
0% {
top: 0;
left: 0;
height: 50%;
width: 50%;
}
16.66% {
top: 0;
left: 0;
height: 50%;
width: 100%;
}
32.32% {
top: 0;
left: 50%;
height: 50%;
width: 50%;
}
49.98% {
top: 50%;
left: 50%;
height: 50%;
width: 50%;
}
66.64% {
top: 50%;
left: 0;
height: 50%;
width: 100%;
}
83.3% {
top: 50%;
left: 0;
height: 50%;
width: 50%;
}
100% {
top: 0;
left: 0;
height: 50%;
width: 50%;
}
}
@keyframes half-cyan-shadow {
0% {
bottom: 0;
right: 0;
height: 50%;
width: 50%;
}
16.66% {
bottom: 0;
right: 0;
height: 50%;
width: 100%;
}
32.32% {
bottom: 0;
right: 50%;
height: 50%;
width: 50%;
}
49.98% {
bottom: 50%;
right: 50%;
height: 50%;
width: 50%;
}
66.64% {
bottom: 50%;
right: 0;
height: 50%;
width: 100%;
}
83.3% {
bottom: 50%;
right: 0;
height: 50%;
width: 50%;
}
100% {
bottom: 0;
right: 0;
height: 50%;
width: 50%;
}
}
2 Likes
Anybody know if this kind of thing can be used in HA themes?
This one is only a box from the preview-pane of the editor. Not there in dashboard. But it is not working, because of the index, so hidden behind whatever in the dashboard.
Perhaps even better, because there you should can perhaps address the card, here hui-entities-card and add there, instead of the ha-card-child.
1 Like
I have succeeded in putting the ha-card part in a theme. But I have not figured out how to put keyframes in there. The @keyframes syntax is not supported in themes.
Thanks MrThiemann
1 Like