But what is your card-mod code you have tried and which is not working?
Thank you.
I made the lamp orbiting a black hole:
type: vertical-stack
cards:
- type: entities
entities:
- input_boolean.test_boolean
- type: entities
entities:
- sun.sun
- type: conditional
conditions:
- entity: input_boolean.test_boolean
state: 'on'
row:
entity: sun.sun
icon: mdi:desk-lamp
name: NƤhlicht Lampe
style:
hui-simple-entity-row$:
hui-generic-entity-row $: |
state-badge {
{% if is_state('input_boolean.test_boolean', 'on') %}
text-indent: 45px;
color: red;
animation: rotation 4s linear infinite;
{% endif %}
}
@keyframes rotation { 0% { transform: rotate(0deg); }
100% { transform: rotate(359deg); } }
- entity: sun.sun
(Itās spinning normally without the indentation.)
If the row contains a timer it has to be:
style:
hui-timer-entity-row$:
hui-generic-entity-row $: |
Nicely done! A light cannot leave a dark domain )
Hello!
I have just updated to the latest home assistant version. But now my navigation bar is up top instead of at the bottom. Can someone help me with what I should write in the theme file to move it back down?
dont cross post please. i already answered your question on the mushroom thread.
1 Like
Hi everyone, can anyone please help me to solve my problem? I would like to eliminate the 8px margin of each state-badge element of the card but I canāt figure how. Thanks in advance!
There is already posted style for Glance with changed margin.
1st post ā link at the bottom
If you have some āentity-filterā inside - just try to adapt it, and post what you tried and where you failed, it will be a good start.
Hi, is there a way to remove or make transparent these input_datetime lines in entities card? Thanks
Hi, this should work. its pretty easy to figure out if you look through ildarās posts.
type: entities
entities:
- entity: input_datetime.test
card_mod:
style:
ha-time-input $ ha-base-time-input $:
ha-textfield:
$: |
.mdc-line-ripple::before {
border-bottom-width: 0px !important;
}
ha-date-input $:
ha-textfield:
$: |
.mdc-line-ripple::before {
border-bottom-width: 0px !important;
}
1 Like
1st post ā link at the bottom ā input_datetime
1 Like
a bit more customized version here:
thanks.
Any idea how I can remove the unit of measurement from these please āStepsā so it just shows the figure, thank you
type: custom:layout-card
layout_type: masonry
layout: {}
cards:
- type: horizontal-stack
cards:
- type: custom:mushroom-entity-card
entity: sensor.iphone_steps
name: None
primary_info: none
icon_type: none
fill_container: false
icon: none
card_mod:
style: |
ha-card {
/* Set padding of card */
margin-left: -15px;
/* Move card up to match header card */
margin-top: -35px !important;
padding: -35px;
background: none;
- type: custom:mushroom-entity-card
entity: sensor.sophieiphone_steps_2
name: None
primary_info: none
fill_container: false
icon: mdi:walk
icon_type: none
card_mod:
style: |
ha-card {
/* Set padding of card */
margin-left: -130px;
margin-right: 0px;
/* Move card up to match header card */
margin-top: -35px;
padding: -80px;
background: none;
This should work.
it replaces the value with the direct output of the state using the pseudo element ::before
card_mod:
style:
mushroom-state-info$: |
.secondary {
color: transparent !important;
}
.secondary::before {
content: '{{states(config.entity)}}';
color: var(--secondary-text-color) !important;
}
.: |
ha-card {
/* Set padding of card */
margin-left: -15px;
/* Move card up to match header card */
margin-top: -35px !important;
padding: -35px;
background: none;
}
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