Deleted as I found answer
Thanks you, and sorry im new to the community, will remember that for the next time.
Currently im using the following code to limit the height of the calendar widget, how can I combine this two? Sorry for the probably dump question but im not very familiar with CSS.
card_mod:
style: |
ha-full-calendar {
height: 295px !important;
overflow: hidden;
}
Go to 1st post of this thread - link at the bottom titled âfantasticâ - other stuff - combining
1 Like
Hello! I am trying to condense the spacing in an entities card. I have seen it done and I am not sure what I am doing wrong, any help would be appreciated! I am able to make changes to the header but changing the height or the color for the entity row doesnât effect the card. Am I referencing it incorrectly?
type: entities
entities:
- entity: sensor.roberto_battery
name: " "
- entity: vacuum.roberto
name: " "
title: Roberto
card_mod:
style: |
hui-generic-entity-row {
height: 20px;
color: red;
}
ha-card .card-header {
display: unset;
text-align: center;
font-size: 20px;
}
Yes.
If you want to learn - use Code Inspector to find a proper path, here âhui-generic-entity-rowâ is located inside shadowRoot.
Examples for reducing a height are here: 1st post â link at the bottom titled âfantasticâ â entities card â rowâs height
I want to learn but what is Code Inspector? I googled it and only job descriptions came up. I tried opening the developer tools console to inspect the code on the website but if that is what you are referring to I donât know where to start.
I tried using
hui-text-entity-row:
$: |
hui-generic-entity-row {
As you mentioned in a different post that also mentioned shadowRoot but that didnât work either
This is my current code:
type: entities
entities:
- entity: sensor.roberto_battery
name: " "
- entity: vacuum.roberto
name: " "
title: Roberto
card_mod:
style: |
ha-card .card-header {
display: unset;
text-align: center;
font-size: 20px;
}
hui-text-entity-row:
$: |
hui-generic-entity-row {
height: 10px;
}
-
Code Inspector - is a dev tool that is shown after pressing F12 (at least in FF & Chrome), it allows you to understand a structure of a particular UI element.
-
Your last code can be presented as
card_mod:
style: |
xxxx {
...
}
zzz:
$: |
yyy {
...
}
where 1st part
card_mod:
style: |
xxxx {
...
}
is what is described in Docs as a âstringâ value for âstyleâ option which can be presented clearly as a string:
card_mod:
style: "xxxx { ... }"
And this part
zzz:
$: |
yyy {
...
}
is what is described in Docs as a âdictionaryâ value for âstyleâ option, can be presented clearly as a dictionary:
zzz:
$: "yyy { ... }"
Check this remark in Docs:
âStringâ values are used when there is no need to go into shadowRoot, dictionaries - otherwise.
If your style contains both of these 2 different parts - they should be âcombinedâ (see here about combining: 1st post â link at the bottom titled âfantasticâ â other stuff â combine â.:â & â$:â).
How can I use card-mod to allow for horizontal scrolling/overflow with the new badges? Would like to switch to these instead of the Mushroom chips and have been searching everywhere but have not been able to figure it out.
Actually, styling a âbadges areaâ (not a particular badge) is a matter of âcard-mod-themeâ & supposed to be discussed in a card-mod-theme thread)))), not in this thread.
Use this as a starting point: 1st post of this thread â link at the bottom â themes â badges â scrolling (how you missed it?)
new discovery of the effect of the changes in HA 2025.1.0 frontend:
# fold-entity-row fold_items
style: |
div#items {
margin: 16px -16px -16px -16px;
}
my fold items no longer expand to the width of the fold, and now all show like this, while before, they were perfectly using the full available space of the items leaving no white border around the camera images
Have you got any feedback from devs or Thomas?
nothing whatsoever⌠other than âwe changed some attributes, but I dont know whichâ
this one is particularly nasty, because we can do
card_mod:
style: |
ha-card {
margin: 16px -16px -16px -16px;
box-shadow: none;
}
on regular picture-entity card, but when using an iframe this does not work at all correctlyâŚ
thats why I wrote âmost reliableâ in the GitHub issue, modding the items in the fold
o heck, the nice âtargetâ circle we made in the move entities in Map also no longer worksâŚ
let me find where I posted that above đš Card-mod - Add css styles to any lovelace card - #7554 by Mariusthvdb
btw, I did ask in the beta channel in Discord, but since I am the only one there apparently using card-mod⌠it does not get enough noise
Cannot use discord thanks to local orcs here. Can we contact Thomas there?
(myself not updated to 2025.1, cannot testâŚ)
I appreciate the time you are taking to help me understand this but I am still not getting it.
The post you referred me to notes the following pattern:
card_mod:
style:
element_1 $: |
element_2 {...}
.: |
element_1 {...}
I can see that the âelement_1â in the pattern aligns with
hui-text-entity-row:
$: |
hui-generic-entity-row {
height: 10px;
}
As element_1 and hui-text-entity-row both refer to the shadowRoot through the â$:â
The âelement_2â aligns with:
ha-card .card-header {
display: unset;
text-align: center;
font-size: 20px;
}
I combine the two in that pattern to get:
type: entities
entities:
- entity: sensor.roberto_battery
name: " "
- entity: vacuum.roberto
name: " "
title: Roberto
card_mod:
style:
hui-text-entity-row $: |
ha-card .card-header {
display: unset;
text-align: center;
font-size: 20px;
}
.: |
hui-generic-entity-row {
height: 10px;
}
But nothing happens and now my header is not longer being effected by the code. I thought that since ha-card .card-header is a string it might be element 1 in the pattern so I switched the order and got:
type: entities
entities:
- entity: sensor.roberto_battery
name: " "
- entity: vacuum.roberto
name: " "
title: Roberto
card_mod:
style:
ha-card .card-header $: |
{
hui-generic-entity-row {
height: 10px;
.: |
ha-card .card-header {
display: unset;
text-align: center;
font-size: 20px;
}
This also didnât work. I next thought to break this down, remove the string see if I can even make changes just to the dictionary value with:
type: entities
entities:
- entity: sensor.roberto_battery
name: " "
- entity: vacuum.roberto
name: " "
title: Roberto
card_mod:
style:
hui-text-entity-row:
$: |
hui-generic-entity-row {
color: red;
}
However not even this works. What am I doing wrong?
type: entities
entities:
- entity: sensor.test_time_sensor
- type: custom:fold-entity-row
head:
type: section
label: All groups
entities:
- type: custom:hui-picture-entity-card
entity: camera.demo_camera_without_stream
card_mod:
style:
fold-entity-row $: |
div#items {
padding: 0px !important;
}
.: |
#states {
padding: 0px;
}
I doubt, that this is the case. For me it seems, that you are mixing too many things at the same time. As long the ingestion of mod is still there (will test after updating to 2025.1) and as long there are only some dom-changes, everything should be possible to adapt to these changes.
But if you are not reducing your problem descriptions to the bare minimum, what is not working anymore with posting the DOM and the problem, it is hard to follow. 
To be honest, even I am used to stop reading the very long post where you are jumping from topic to topic after some time - at the latest when Iâm lost after some time, where your problem is. Example here. Starting from generic line, jumping to fold, back to whatever, adding another example for another thing, ⌠
thanks John.
however, I cant make it behave as I had hoped.
the last
.: |
#states {
padding: 0px;
}
moves the labels
and the first seems to have no effect at all in my entities card.
could you please check if you could find a mod to apply to the individual fold itself, and not to the entities card as generic mod?
yep I can see how this is confusing. sorry for that.
however, I suppose you will be just as confused and surprised after installing 2025.1
and if you would make the effort to check the issue I the Github repo, you would see that while we could set these modes on the rows without problem, no matter what card they were in, in 2025.1 that is no longer the case, and the many variants change the required mod.
And ofc that is not an ideal situation, to put it mildly
As for the marker in the map card, I got a hint by Karwosts where he changed an option for the marker to show the icon. see Ability to show map icons for geolocation sources by karwosts ¡ Pull Request #23247 ¡ home-assistant/frontend ¡ GitHub for that
Hope that PR causes what I noted above, and allows us to rewrite that so it becomes functional again
Hello there!
I love the mod_card, it has helped me heaps when building my new dashboard. Now I ahve hit a brick wall it seems, and maybe you guys here can help me out. It is the Alarmo keypad frontend component. I want to change the appearance of the keypad buttons, replace the input element for the code, make the background transparent. Nothing seems to work, I canât seem to find the right classes or elements shart making modifications. I have spent hours with the Developer tool (F12) , but anything I add to card_mod is ignored. The alarmo integration provides little help on how to style the keypad 
If thereâs not an <ha-card> element, card-mod wonât work. Did you check that?