That reply was for @Vince1024 so Iām confused at your response. Do you need help with a specific issue?
His post was missing data (IMO) so please assist him if you canā¦
Thanks,
@LiQuid_cOOled i have read most of this topic and links you sent but still donāt understand why I canāt access the ha-icon (or ha-svg-icon) in the DOM ?
I think my problem comes from the #shadow-root (open) thing but I donāt understand where/how to put the ā$ā in my code to access it.
Iāve tried many of the solutions proposed in this thread.
From Inspector:
Iāll take a hard lookā¦
1 Like
I need some days-off to read all of that!
Awesome work, mate. A big thank you!!!
1 Like
This may point you in the right direction. Let me know!
You should be able to access the icons when you assign the element.
type: markdown
content: |-
<p> <ha-icon icon=mdi:saw-blade></ha-icon>
<br>
<br>
<u><ha-icon icon=mdi:fan></ha-icon>
card_mod:
style:
ha-markdown $: |
ha-markdown-element p ha-icon{
color: blue;
--mdc-icon-size: 30px;
position: absolute;
animation: spin2 3s linear infinite;
}
ha-markdown-element u ha-icon{
color: green;
--mdc-icon-size: 30px;
animation: spin 1s linear infinite;
position: absolute;
}
@keyframes spin {
100% { transform: rotate(360deg);}
}
@keyframes spin2 {
100% {transform: rotate(360deg);}
}
.: |
ha-card {
padding-bottom: 30px;
}
If you want to use an image and add animation, you can set it up like thisā¦
type: markdown
content: |-
<br>
<u><ha-icon icon=mdi:fan></ha-icon>
card_mod:
style:
ha-markdown $: |
ha-markdown-element img {
height: 40px;
position: absolute;
animation: spin2 3s linear infinite;
}
ha-markdown-element u ha-icon{
color: green;
--mdc-icon-size: 30px;
animation: spin 1s linear infinite;
position: absolute;
}
@keyframes spin {
100% { transform: rotate(360deg);}
}
@keyframes spin2 {
100% {transform: rotate(360deg);}
}
.: |
ha-card {
padding-bottom: 30px;
}
I havenāt worked with a Markdown card so a better method may be available. Honestly the card is painful to work with. 
you are a legend!!
1 Like
Very good to everyone. Any kind soul who can help me change the color of the icons? Thank you very much first of all.
Having an issue that when I edit a card and it opens in visual editor, all my card mod yaml gets deleted, even if I switch to yaml editor. The only way I can edit cards now is with raw config editor. Iāve already done all the fixes after the big update.
There is a registered issue on Github.
1 Like
one failing card_mod setting left, and I cant understand why, or how to fix, please have a look if you can help me out:
trying to scroll the glance card:
type: custom:auto-entities
card:
type: glance
columns: 5
card_mod:
style: |
.entities {
max-height: 450px;
overflow-y: scroll;
}
filter:
exclude:
- domain: binary_sensor
- state: unavailable
include:
- attributes:
device_class: battery
sort:
method: state
numeric: true
wont scroll all the way up to the lowest batteries:
while doing the same in a fold works perfectly:
- type: entities
title: Glance batteries
entities:
- type: custom:fold-entity-row
card_mod:
style: |
#measure {
max-height: 320px;
overflow-y: scroll;
}
head:
type: section
label: Batteries
card_mod:
style: |
.label {
margin-left: 0px !important;
}
padding: 0
entities:
- type: custom:auto-entities
card:
type: glance
columns: 5
state_color: false
card_mod:
style: |
ha-card {
box-shadow: none;
margin: -8px -16px -16px -16px;
}
# .entities {
# height: 500px;
# overflow-y: scroll;
# }
albeit the scroll is set on the fold #measure and not directly on the glance card.
Could anyone see why the glance card doesnt scroll all the way up?
Does it work if you change the glance card mod to ha-card {
With .entities it is probably stopping at the first entities line.
type: custom:auto-entities
card:
type: glance
columns: 5
card_mod:
style: |
ha-card {
max-height: 450px;
overflow-y: scroll;
}
filter:
exclude:
- domain: binary_sensor
- state: unavailable
include:
- attributes:
device_class: battery
sort:
method: state
numeric: true
yesā¦
what was I thinking. works just fine using ha-cardā¦
still does not explain the .entities behavior, as in my case, its stops 6 lines (yes, 6 lines of 6 entities are lost) of entities before it shouldā¦
thx (cant post smilies anymore, so smiling textually)
no, its nothing of those.
its only happening on this glance card with the mod set on the .entities.
All my other scrolls (and I have quite a fewā¦) behave perfectly.
I did have 1 card-mod-theme mod on glance, but that does not interfere (I tested that).
so, this is either a bug, or a user-error combination kind of thing I just dont get yetā¦
but, given the fact I do want to scroll the ha-card, this was also an oversight on my behalfā¦
Nice !
Thank you very much @LiQuid_cOOled, thatās much better now and I understand much better what must be done.
From your example Iām now able to spin my icons but it seem to apply only on the <p> or <u> tags and not on the <ha-icon> itself (works if I delete the ha-icon from the style).
Now i will dig into it because the position: absolute; prevent to place the icon in the middle of a string or goes āoutsideā of the card if right-aligned (in my case).
If I add the <u> tag around the <ha-icon>:
probably because
Iāll see if I can find something that has less impact on the icon position.
Iāll continue to help if needed. I believe margin settings will help. Iām on CST time so Iām calling it a nightā¦lol
1 Like
Yeah !
Works fine by replacing
position: absolute;
by
float: right;
position: relative;
when right aligned.
Than you very much, youāre the boss !
1 Like
Hi Everyone,
I want to use an entities card, but with a reduced margin between entities and with no icons. I know how to change the space between lines, and how to delete the icons but Iām not sure how to do it together 
I have something like that:
type: grid
card_mod: &ref_0
style: |
hui-generic-entity-row {
height: 25px;
}
hui-generic-entity-row {
state-badge {
display: none;
}
.info {
margin-left:0px !important;
}
}
cards:
- type: entities
entities:
- entity: light.wlacznik_swiatla_salon_l1
name: StĆ³Å
card_mod: *ref_0
- entity: light.wlacznik_swiatla_salon_l2
name: Kanapa
card_mod: *ref_0
- entity: light.wlacznik_swiatla_salon_l3
name: TV
card_mod: *ref_0
- entity: light.swiatla_choinkowe
name: Choinka
card_mod: *ref_0
columns: 2
Seeking assistance to modify line-height of the options dropdown list (entities - input_select)
I was able to find the correct parameter with code inspector (below - manually changing it works as expected)
However my multiple attempts failed so far.
these two have no effect
āmdc-deprecated-list-item-height
āmdc-typography-subtitle1-line-height (which is surprising as āāmdc-typography-subtitle1-font-sizeā does work correctly)
entities:
- entity: input_select.winamp_queue_delete_number
card_mod:
style:
ha-select $: |
.mdc-line-ripple::before,
.mdc-line-ripple::after {
border-bottom-style: none !important;
}
.mdc-select__anchor {
height: 4rem !important;
margin-top: 0.2rem !important;
}
.mdc-select__selected-text-container {
height: 4rem !important;
margin: 0rem !important;
}
span#label {
font-size: 0rem;
font-weight: 100;
align-self: end;
height: 1.5rem;
}
span.mdc-select__selected-text {
font-size: 2rem;
font-weight: 500;
align-self: center;
height: 2.5rem;
}
.: |
ha-select {
height: 4rem;
position: absolute;
top: -1.3rem;
}
:host {
--mdc-icon-size: 40px;
--mdc-select-fill-color: transparent;
--mdc-select-ink-color: var(--primary-color);
}
hui-generic-entity-row:
$: |
state-badge {
display: none;
position: absolute;
left: -0.5rem;
top: -0.5rem
}
.: |
.mdc-deprecated-list {
line-height: 3rem !important;
}
style: |
ha-card {
height: 4.5rem !important;
--mdc-typography-subtitle1-line-height: 2.5rem !important;
--mdc-typography-subtitle1-font-size: 2.5rem !important;
--mdc-menu-item-height: 5rem;
--mdc-deprecated-list-item-height: 2rem;
}
I have been struggling with this card. I want to eliminate the 2 white bands on each side of the artwork which does not seem to stretch all the way to fill the card. I tried with the āhostā, which I temporarily put in red for visibility, but that does not accomplish what I need. Any help ?
Second question : is there a way to dynamically change the font of the text to adapt to the artwork. For instance, black text of the artwork is predominantly light (as in this picture), or white text if the artwork is predominantly dark ?
Thank you !
card_mod:
style: |
ha-card {
{% if not is_state(config.entity, 'off') %}
background-image: url( '{{ state_attr( config.entity, "entity_picture" ) }}' );
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
background-blend-mode: overlay;
background-color: rgba(var(--rgb-card-background-color),0.5);
{% endif %};
height: 85px!important;
}
:host {
background-color: red;
}
mushroom-shape-icon {
--card-mod-icon:
mdi:music
}
