Perfect, thanks 
Hi, any idea why styles are so unstable? Iām using card-mod currently like this in a theme.
card-mod-theme: main_dark
card-mod-view-yaml: |
.: |
#view, hui-view {
background: none !important;
}
vertical-layout $: |
#columns{
margin: 0 !important;
}
vertical-layout$layout-card:
$:
.: |
grid-layout{
display: block !important;
}
grid-layout $: |
#root{
margin: 0 !important;
}
grid-layout $ button-card:
$: |
ha-card{
padding: 0 !important;
}
grid-layout $ hui-markdown-card:
$:
.: |
ha-markdown{
height: 100% !important;
padding: 0 !important;
}
ha-markdown $: |
ha-markdown-element{
height: 100% !important;
font-family: 'Young Serif', serif !important;
font-size: 35px !important;
}
Video showing the error:
Video explanation: Styles load only when i tilt the screen or update it somehow. Reloading doesnāt work.
Itās also not cache related apparently, so pressing f5 doesnāt solve anything.
Card-mod resource is imported through HACS and yaml as recommended. Lovelace is in storage mode.
Hi everyone
I am trying to create an animated border and am succeeding in codepen (https://codepen.io/AleXSR700/pen/PoXroNK) but failing in HA.
In the editor preview I can see the hover effect, so it is not all broken. I am thinking that the problem might be that the effect is outside the visible area of the editor and/or card.
Test 1 (only hover working)
show_name: true
show_icon: true
type: button
tap_action:
action: toggle
entity: sun.sun
card_mod:
style: |
ha-card::before,
ha-card::after,
ha-card {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
ha-card {
width: 200px;
height: 200px;
margin: auto;
background: no-repeat 50%/70% rgba(0, 0, 0, 0.1);
color: #69ca62;
box-shadow: inset 0 0 0 1px rgba(105, 202, 98, 0.5);
}
ha-card::before,
ha-card::after {
content: "";
z-index: -1;
margin: -5%;
box-shadow: inset 0 0 0 2px;
animation: clipMe 8s linear infinite;
}
ha-card::before {
animation-delay: -4s;
}
@keyframes clipMe {
0%,
100% {
clip: rect(0px, 220px, 2px, 0px);
}
25% {
clip: rect(0px, 2px, 220px, 0px);
}
50% {
clip: rect(218px, 220px, 220px, 0px);
}
75% {
clip: rect(0px, 220px, 220px, 218px);
}
}
ha-card:hover::after, .ha-card:hover::before {
background-color: rgba(255, 0, 0, 0.3);
}
Test 2 where I tried to use relative positioning (only hover working)
show_name: true
show_icon: true
type: button
tap_action:
action: toggle
entity: sun.sun
card_mod:
style: |
ha-card {
position: relative;
width: 200px;
height: 200px;
margin: auto;
background: no-repeat 50%/70% rgba(0, 0, 0, 0.1);
color: #69ca62;
box-shadow: inset 0 0 0 1px rgba(105, 202, 98, 0.5);
}
ha-card::before,
ha-card::after {
content: "";
position: absolute;
z-index: -1;
top: -5%;
bottom: -5%;
left: -5%;
right: -5%;
box-shadow: inset 0 0 0 2px;
animation: clipMe 8s linear infinite;
}
ha-card::before {
animation-delay: -4s;
}
@keyframes clipMe {
0%,
100% {
clip-path: polygon(0% 0%,100% 0%,100% 2%,0% 2%);
}
25% {
clip-path: polygon(0% 0%,2% 0%,2% 100%,0% 100%);
}
50% {
clip-path: polygon(98% 100%,100% 100%,100% 2%,98% 2%);
}
75% {
clip-path: polygon(0% 100%,100% 100%,100% 98%,0% 98%);
}
}
ha-card:hover::after, .ha-card:hover::before {
background-color: rgba(255, 0, 0, 0.3);
}
Test 3 (there is actually an animation inside the card
show_name: true
show_icon: true
type: button
tap_action:
action: toggle
entity: sun.sun
card_mod:
style: |
ha-card::before,
ha-card::after,
ha-card {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
ha-card {
width: 200px;
height: 200px;
margin: auto;
background: no-repeat 50%/70% rgba(0, 0, 0, 0.1);
color: #69ca62;
box-shadow: inset 0 0 0 1px rgba(105, 202, 98, 0.5);
}
ha-card::before,
ha-card::after {
content: "";
z-index: -1;
margin: -5%;
box-shadow: inset 0 0 0 2px;
animation: clipMe 8s linear infinite;
}
ha-card::before {
animation-delay: -4s;
}
@keyframes clipMe {
from {
clip-path: polygon(0% 100%,100% 100%,100% 100%,100% 100%);
transform-origin: bottom left;
transform: rotate(0deg);
}
to {
clip-path:polygon(0% 100%,100% 100%,100% calc(100% - 2px),0 calc(100% -2px));
transform-origin: bottom left;
transform: rotate(360deg);
}
}
ha-card:hover::after, .ha-card:hover::before {
background-color: rgba(255, 0, 0, 0.3);
}
Test 3 animation:
Hi @Mariusthvdb
I have encountered, the similar error as you mentioned.
card-mod.js:561 Uncaught (in promise) TypeError: Failed to execute 'observe' on 'MutationObserver': parameter 1 is not of type 'Node'.
at CardMod._connect (card-mod.js:561:28)
_connect @ card-mod.js:561
await in _connect (async)
(anonymous) @ card-mod.js:484
await in (anonymous) (async)
set styles @ card-mod.js:485
closeDialog @ browser_mod.js:66
handleEvent @ browser_mod.js:1
emitNotification @ mwc-dialog-base.ts:134
notifyClosed @ mwc-dialog-base.ts:223
(anonymous) @ foundation.ts:200
setTimeout (async)
e.close @ foundation.ts:197
e.handleClick @ foundation.ts:281
I tried with the modification you suggested in the post, but I did not clear the error.
Maybe you have some suggestions?
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: Security
timeout: 300000
style: |
--popup-max-width: calc(385px + 495px);
--primary-color: transparent; /* hide timeout progress */
card_mod:
style:
# card divider border
layout-card$grid-layout$: |
#root {
margin: 0 0 !important;
}
hui-vertical-stack-card {
border-right: 1.5px solid rgba(0, 0, 0, 0.2);
border-radius: 0;
transition: none;
}
/* phone */
@media screen and (max-width: 800px) {
hui-vertical-stack-card {
border-right: none;
border-bottom: 1.5px solid rgba(0, 0, 0, 0.2);
}
}
content:
type: custom:layout-card
layout_type: custom:grid-layout
layout:
margin: 0
grid-template-columns: 385px 495px
grid-template-rows: 1fr
grid-template-areas: |
"camera info"
mediaquery:
#phone
"(max-width: 800px)":
grid-template-columns: 1fr
grid-template-rows: repeat(2, 1fr)
grid-template-areas: |
"camera"
"info"
cards:
- type: vertical-stack
view_layout:
grid-area: camera
cards:
- type: custom:alarmo-card
entity: alarm_control_panel.home_security
Thanks
David
Some (useless?) styles for history-graph - Styling a tooltip
code
- type: history-graph
entities:
- entity: sun.sun
card_mod:
style:
state-history-charts $:
div :first-child $:
ha-chart-base $: |
.chartTooltip {
background: lightgreen !important;
}
.chartTooltip .title {
color: red;
}
.chartTooltip .beforeBody {
color: magenta;
}
.chartTooltip li {
color: yellow;
}
code
- type: history-graph
entities:
- entity: person.ildar
card_mod:
style:
state-history-charts $:
div :first-child $:
ha-chart-base $: |
.chartTooltip .beforeBody:after {
content: "";
background-image: url("/local/images/persons/ildar.png");
background-position: center;
background-repeat: no-repeat;
background-size: contain;
height: 100px;
display: block;
}
Note that you may place a more useful picture instead of my photo here - like a generated route āfrom A to Bā, or a position of a person on a map ! (update: no, it is not great to show the LATEST state instead of a state for a particular timeā¦ So, we may show only same image for all time pointsā¦ )
1 Like
I have a very simple problem.
I am using a grid card as my outermost card and use it as Panel (1 card).
Visually the grid card has no padding and has its own border.
Iād like to remove that.
I can simply do that by āwrappingā my content in
type: custom:mod-card
style: |
ha-card {
padding: 8px;
border: 0px;
}
card:
...
But this effectively disables the visual editor saying:
āNo visual editor available for type ācustom:mod-cardā.ā
How can I remove the border/add padding WITHOUT custom:mod-card?
Not that I care about not using it, I just want to keep the visual editor.
Or would it be hard to support a visual editor for custom:mod-card? Does not seem to have much functionalityā¦
End of days.
You need to choose if you need visual editor or a functional UI.
Is it possible to use Card mod style inside āmore-info-cardā?
I am trying to remove the title/head but i can not get it done in the style:
tried :host to
You should address it via element and not try to address it via a class, where there is no class. In short remove the dot and try again.
Same error in ha-card.
1 Like
try:
style: |
state-card-content { display: none }
itās a shame that the more-info-card does not resize with other cards
1 Like
How did you got a slider on 2 sides with different colors?
I also was trying to shrink the size of the thermostat, but no succes yet.
Do you have a custom thermostat card? i only get this one when using the default card:
the ones on the left are āBetter Thermostat UIā just search for it in HACS.
1 Like
thanks, will find it 
I found the line to resize the circle, itās in the svg, but again, no idea how to place it as css.
yeah, Iām hoping they update the thermostat card to this new layout.
Question i want to set opacity to the mushroom chip card. If the person has the state not_home or unknow i want to set the opacity to 0.1. This is what i have. But it doesnt work.
type: custom:mushroom-chips-card
chips:
- type: entity
entity: person.xxxx
content_info: none
use_entity_picture: true
- type: entity
entity: person.xxxxx
content_info: none
use_entity_picture: true
card_mod:
style:
opacity: |
[[[
if (state === 'not_home' || state === 'unknown') return 0.1;
else return 1;
]]]
hi guys, I have a problem with this button card, I would like if a state is different from zero (so every time it changes and is different from zero) the state flashes for a time set by me. can anyone help me? I really donāt know where Iām going wrong
this is the code:
type: custom:button-card
entity: sensor.bilancia_xiaomi_vins
show_units: false
show_state: true
show_icon: false
show_name: false
state:
- value: '0'
operator: '>'
styles:
card:
- animation: blink 2.5s ease
extra_styles: |
@keyframes lamp {
0% {
opacity: 0;
}
50% {
opacity: .5;
}
100% {
opacity: 1;
}
}
styles:
card:
- border-width: 0px
- font-size: 35px
card_mod:
style: |
ha-card {
color: white;
text-align: center;
font-family: digital;
text-shadow: 1px 1px 0px white, 0 0 0.2em white;
}
I tried this too but it doesnāt work for meā¦
type: custom:button-card
entity: sensor.bilancia_xiaomi_vins
show_units: false
show_state: true
show_icon: false
show_name: false
styles:
card:
- border-width: 0px
- font-size: 35px
state:
- animation: |
[[[
if (states['sensor.bilancia_xiaomi_vins'].state !== 0)
return 'blink 5s';
]]]
card_mod:
style: |
ha-card {
color: white;
text-align: center;
font-family: digital;
text-shadow: 1px 1px 0px white, 0 0 0.2em white;
}
Did you find only one example here in this thread where a button-card-JS worked in card-mod instead of jinja2? 
1 Like
Good morning.
It has become very complex to read this whole post.
I have a problem with a simple gaugeā¦
My goal is to have it the same size as the button next to it (120x70px).
Thanks to the contribution of another user in this thread I managed to get here:
type: gauge
entity: sensor.lastricosolare_temperaturaacqua
name: Temperatura acqua
card_mod:
style:
.: |
.name {
font-size: 10px !important;
background-color: ;
position: absolute;
bottom: 25px;
padding-bottom: 0px;
padding-top: 0px;
padding-left: 0px
padding-right: 0px
}
ha-gauge$: |
svg {
transform: scale(0.9) translateY(-20px);
overflow: visible;
}
svg text {
transform: scale(0.4) translateY(-290px);
}
unit: Ā°C
needle: true
min: -5
max: 50
segments:
- from: -10
color: '#FF0000'
- from: 10
color: '#FFD700'
- from: 15
color: '#43a047'
- from: 30
color: '#FFD700'
- from: 40
color: '#FF0000'
What I canāt do is:
- size the gauge to the desired dimensions;
- change the font size of the temperature value and its position;
- change the color of the text and the temperature value
- change the sensor background
- add the border.
Thanks for your attention!