Thanks for explaining how to do it for specific elements,
I dont know if you missed my reply above but it seems your original solution worked, the issue was actually firefox specifically (must be the way the CSS is loaded) because there is no problem on Chrome.
Interestingly if i spam refresh FF a few times I CAN get it to work properly until the next refresh. but that is likely a FF issue rather than a HA issue that I probably cant solve
With this force style inject to dialog, you can test firefox whether the problem is the style processing from Theme, or also directly in the dialog element. I donāt know if you have the card_mod plugin via resources, or in the frontend config as extra_module_url. Setting it as extra_module I think sometimes helps with better plugin functionality.
frontend:
extra_module_url:
# - /local/extra_modules/card-mod-35.js # v3.5
- /local//resources/card-mod.js
- /local/extra_modules/sidebar-divider.js
I have
extra_module_url:
- /hacsfiles/lovelace-card-mod/card-mod.js
themes:
tablet:
#enable mode
modes: { dark: { .: . } }
...
in my themes.yaml, is that what you are referring to?
When I CAN get it to load correctly in firefox, it shows 2 of the :host([card]) .content .container , 1 constructed and 1 inline. presumably the one inline is from the themes as it is correct (0px padding) but the constructed one leads nowhere and Im not sure where it actually comes from (if i click the link it opens an empty style editor page wheres the inline shows the themes style info)
Im guessing if there is 2 identical styles and they potentially load in different orders, i get a different result?
OK pretty sure its fixed now, looks like its a known issue with some browsers and there is a fix here by the author to change the loading order
Appreciate the help 
Well, Iām not saying anythingā¦ 
but itās literally the very first note in the docs on how to install card_mod 
oh dear, thatās what i get for not going back and reading the documents isnt it?
and thatās why I askedā¦
dont use 3.5.0, but update, yes, update to 3.4.4
3.5.0 had been retracted
No ideas regarding this issue?
I noticed likewise color brown is not working anymoreā¦
This styling does almost everything I want.
type: custom:mushroom-light-card
card_mod:
style: |
/* Make the card wider */
ha-card {
border: none;
margin-left: -8px;
margin-right: -6px;
}
/* Shrink the Buttons */
mushroom-button:nth-child(2),
mushroom-button:nth-child(3) {
height: 30px !important;
width: 30px !important;
}
/* Light Control heights */
mushroom-light-brightness-control,
mushroom-light-color-control,
mushroom-light-color-temp-control {
height: 20px !important;
}
entity: light.office
use_light_color: true
show_brightness_control: true
show_color_control: true
show_color_temp_control: true
collapsible_controls: false
primary_info: none
secondary_info: none
icon_type: none
And this works but only if I put it in separately.
style:
mushroom-light-brightness-control$:
mushroom-slider$: |
.slider {
height: 20px !important;
}
mushroom-light-color-control$:
mushroom-slider$: |
.slider {
height: 20px !important;
}
mushroom-light-color-temp-control$:
mushroom-slider$: |
.slider {
height: 20px !important;
}
The is very much a duplicate of other syntax questions here but Iām having a hard time figuring it out. Thanks!
Ok. Thanks for you reply. I will downgrade to 3.4.4. and try again.
Warning:
there was a FR about increasing a ātouch areaā for hui-generic-entity-row.
PR was created.
These changes caused this issue which was fixed in this PR.
But this PR caused another glitch, and another fix was made.
So, hopefully instead of these ātouch areasā:
we will have these areas:
I honestly did not care about the initial FR.
But since the 1st PR was made (and approved) - wanted to improve it (or at least to fix glitches). So, this is a new (hopefully better) reality.
Why it is written in this thread?
Thanks Ildar - that would probably explain why template-entity-row with secondary info now have an overlarge gap between primary and secondary lines after upgrade to 2025.2 betas:
The secondary info div seem to inherit a hard-coded line height of 40px.
T-e-rās with just primary info seem to be unaffected.
Yes, exactly same bug.
Is it worth raising an issue with Thomas, or should I just wait for the various PRs to settle first?
1st we must finalize the current design for a standard entity row.
And hopefully none change would be needed for custom cards.
If needed - then weāll inform Thomas.
I have tried for two days to get an icon to change color depending on state of a sensor, and I canāt get it to work. Can someone hint in the right direction?
type: picture-elements
elements:
- type: icon
icon: mdi:ev-plug-type2
entity: sensor.audi_a6_avant_tfsi_e_plug_state
style:
card_mod:
style: |
:host {
--paper-item-icon-color:
{% if states(sensor.audi_a6_avant_tfsi_e_plug_state) == 'connected' %} green
{% else %} red
{% endif %};
}
left: 90%
top: 7%
image: /local/Audi_A6.png
dark_mode_image: /local/Audi_A6.png
I get this result, should be red or green to me.
running beta, hopefully a b3 will see the light of day anytime soon, so we can report back.
Youāre also in Beta now?
and please anyone here, tinkerers united, please join beta, some can find these flukes early on, and not have to FR changes after the actā¦
I donāt use picture-elements card, I donāt know if it works with card_mod. But anyway, this part is definitely wrong
Either:
or:
Noā¦ Unfortunately, cannot afford testing beta.
