You are right. This was only to help him understand the DOM navigation.
And with the refresh you are right as well, but this is happeing only in some cases of loading order, etc. MY way is to go as detailed as possible and go only more general, if there are problems as described by you.
Although your question was to Arganto, I will answer:
Hi There, can anyone please assist with why the spacing has changed since the Dec HA update? I have everything updated including card_mod via HACS. Before and after plus code 
you have the wrong indentationā¦
card_mod: null
style: |
ha-card {
use this
card_mod:
style: |
ha-card {
}
Hey everyone,
I paused working on my dashboard for nearly 3 months now. After I installed missing updates for HA and the frontend modules I noticed that the styling for āhui-elementā-cards are not working anymore.
Did something change besides starting with ācard_mod:ā and then adding the styles?
These lines used to work but are not anymore:
- type: custom:hui-element
card_type: custom:mushroom-template-card
icon: mdi:arrow-left
icon_color: white
tap_action:
action: navigate
navigation_path: /dashboard-test/2
card_mod:
style: |
ha-card: {
padding: 0px;
--icon-size: 800px;
height: 50px;
width: 50px;
--mush-chip-icon-size: 80px;
}
:host {
left: 50px;
top: 35px;
--icon-color: white;
--icon-animation: none;
--shape-color: none;
--shape-color-disabled: rgba(var(--rgb-disabled), 0.2);
--shape-animation: none;
--shape-outline-color: transparent;
--mush-chip-icon-size: 80px;
}
what for do you need to wrap a custom card into hui-element?
Also, hui-element do not have ha-card.
Thanks for the advice. I fixed that, just some copy paste issue.
As it seems are the style elements now different. I never noticed the ā.elementā and āelement.styleā.
I am wrapping elements into a picture elements card to freely move my cards around. So I need the hui-element to make them work and the left, right, top commands to move them around.
But I have no clue how to find out where to put the values now. Any quick tip?
Fixed what? Custom card inside hui-element (there is no sense to do it)?
Thatās what I meant by fixing. It is no hui-element anymore.
If you really want to be helped - then consider helping people to help you.
In this particular case suggest to post the FINAL code w/o any already fixed errors with which (i.e. code) you have some issues.
Hi! Iām really interesting in ajdusting slider thickness as described in your post. Iām curious if you successfully got the correct code working?
And for @Stefan2 as well.
I did it and this is my code
card_mod:
style:
hui-card-features$:
hui-cover-position-card-feature$: |
ha-control-slider {
--control-slider-thickness: 20px !important;
}
If you want to adjust the button as well, add:
hui-cover-open-close-card-feature$: |
ha-control-button-group {
--control-button-group-thickness: 20px !important;
}
As a result:
em instead of px, better on mobile but Iām happy with my result.
This is exactly what Iām looking for! I have tried the code string on different levels, but canāt get it working. Do you see whatās wrong?
hui-cover-position-card-feature is because it is a cover.
you probably have to replace that part with something related to light
I see on you screenshot
hui-light-brightness-card-feature
Thanks for helping! I got it working! Cheers!
Iāve gone through the last few weeks of posts and noticed that quite a few people have noticed that there have been elements that have stopped working since the most recent updates. Like many others, Iāve updated to card-mod 3.4.0 & 3.4.1 (along with HA 2024.1)
I have previously had a bunch of glance cards inside a vertical stack in card that were too high for my tablet due to the excessive spacing, so to combat this I have used card-mod to reduce the spacing/margins using the following code:
type: custom:vertical-stack-in-card
view_layout:
column: 2
cards:
- type: glance
card_mod:
style:
.entities:
.entity:
$: |
state-badge {
margin-top: 20px;
margin-bottom: -5px;
}
.name {
margin-top: 0px !important;
margin-bottom: -10px !important;
}
div:not(.name) {
margin-bottom: 0px !important;
}
entities:
- entity: camera.frontroad
name: Front 1
show_state: false
- entity: camera.frontdoor
name: Front 2
show_state: false
- entity: camera.frontdriveway
name: Front 3
show_state: false
- type: glance
show_name: false
card_mod:
style:
.entities:
.entity:
$: |
state-badge {
margin-top: -20px;
margin-bottom: 0px;
}
.name {
margin-top: 0px !important;
}
div:not(.name) {
margin-bottom: 0px !important;
}
entities:
- entity: binary_sensor.frontroad_person_occupancy
show_name: false
name: Motion
show_last_changed: true
- entity: binary_sensor.frontdoor_person_occupancy
show_name: false
name: Motion
show_last_changed: true
- entity: binary_sensor.frontdriveway_person_occupancy
show_name: false
name: Motion
show_last_changed: true
- type: glance
card_mod:
style:
.entities:
.entity:
$: |
state-badge {
margin-top: 20px;
margin-bottom: 0px;
}
.name {
margin-top: 0px !important;
margin-bottom: -10px !important;
}
div:not(.name) {
margin-bottom: -10px !important;
}
entities:
- entity: camera.garage
name: Garage
show_state: false
- entity: camera.sidegarage
name: Side
show_state: false
- entity: camera.backdoor
name: Back 1
show_state: false
- entity: camera.backyard
name: Back 2
show_state: false
- type: glance
show_name: false
card_mod:
style:
.entities:
.entity:
$: |
state-badge {
margin-top: -20px;
margin-bottom: 0px;
}
.name {
margin-top: 0px !important;
margin-bottom: -10px !important;
}
div:not(.name) {
margin-bottom: 0px !important;
}
entities:
- entity: binary_sensor.garage_person_occupancy
show_name: false
name: Motion
show_last_changed: true
- entity: binary_sensor.sidegarage_person_occupancy
show_name: false
name: Motion
show_last_changed: true
- entity: binary_sensor.backdoor_person_occupancy
show_name: false
name: Motion
show_last_changed: true
- entity: binary_sensor.backyard_person_occupancy
show_name: false
name: Motion
show_last_changed: true
This resulted in this card:
However, the problem now, is that when HA automatically updates the cards, it changes the spacing and removes those reduced margins and I end up with this instead after a few seconds:
I hope the explanation makes sense and someone can see something obvious I am missing or have done incorrectly.
Likewise, I am happy for feedback if there is an easier/better way to achieve the same result. Thanks
I used to have a card that blinked, but none of the CSS seems to work anymore.
card:
entity: sensor.dagen_papier
default: 0
states:
'1':
type: custom:mushroom-entity-card
entity: sensor.dagen_papier
layout: horizontal
icon_type: entity-picture
hide_state: true
name: morgen papier!
style: |
ha-card {
border-radius: 12px;
box-shadow: 0 4px 6px 0 rgba(0,0,0,0.2);
--card-primary-font-size: 35px !important;
animation: blink 1s 4;
text-align: center;
padding: 15px;
background-color: var(--card-background-color);
}
@keyframes blink {
50% {
background-color: var(--primary-color);
}
what could I be doing wrong? it worked fine for months.
I need help!
Repository āthomasloven/lovelace-card-modā exists in the store.
Itās in folder /homeassistant/www/lovelace-card-mod/card-mod.js.
Why donāt I see it in hacs?