Check with a standard card first:
type: entities
entities:
- entity: sun.sun
card_mod:
style: |
ha-card {
color: red;
}
The row height workaround is clipping the text.
type: entities
entities:
- entity: sensor.lumi_lumi_weather_temperature_6
name: Kitchen Temperature
card_mod: &ref_0
style: |
hui-generic-entity-row {
height: 100px;
font-size: 36px;
}
- entity: sensor.lumi_lumi_weather_temperature_4
name: Bedroom Temp
card_mod: *ref_0
- entity: sensor.lumi_lumi_weather_temperature
name: Living Room Temp
Ofc it will clip - since out of 2 proposed ways (“clipping”, “not clipping”) you have chosen the 1st way.
Yes. I just figured out that there is a second way.
“line-height” not “height”
type: entities
entities:
- entity: sensor.lumi_lumi_weather_temperature_6
name: Kitchen Temperature
card_mod: &ref_0
style: |
hui-generic-entity-row {
line-height: 100px;
font-size: 36px;
}
- entity: sensor.lumi_lumi_weather_temperature_4
name: Bedroom Temp
card_mod: *ref_0
- entity: sensor.lumi_lumi_weather_temperature
name: Living Room Temp
card_mod: *ref_0
@Mariusthvdb Thank you very much for the answer!
Do I understand this right, so if my entity has the name binary_sensor.kodi1_vpn then the theme variables to override it’s color based on it’s state would look something like:
my_theme:
...
google-red-500: "#dc322f" # Solarized Red
google-green-500: "#859900" # Solarized Green
state-binary_sensor-kodi1_vpn-off-color: "var(--google-red-500)"
state-binary_sensor-kodi1_vpn-on-color: "var(--google-green-500)"
...
I tried this and it did not change the color of the sensor.
It works only if I use either attributes.icon_color property (because it’s a template sensor) or a custom-ui…
Any idea what am I doing wrong with Theme variables? (I am pretty sure that I just don’t understand the concept of theme variable naming)
Described here
Variables must be
--state-binary_sensor-on-color
--state-binary_sensor-off-color
If you define these changed CSS variables in a custom theme:
– all binary_sensors in all cards & in more-info windows will become cyan/magenta.
If you define these changed CSS variables in a particular card:
– only in THIS card ALL binary_sensors will be cyan/magenta:
type: entities
entities:
- entity: binary_sensor.service_on_value
- entity: binary_sensor.service_off_value
state_color: true
card_mod:
style: |
ha-card {
--state-binary_sensor-on-color: cyan;
--state-binary_sensor-off-color: magenta;
}
If you define these changed CSS variables in a particular card for particular element (hence - for a particular entity):
– only in THIS card THIS binary_sensor will be cyan/magenta:
type: entities
entities:
- entity: binary_sensor.service_on_value
- entity: binary_sensor.service_off_value
- entity: binary_sensor.service_on_value
card_mod:
style: |
:host {
--state-binary_sensor-on-color: cyan;
--state-binary_sensor-off-color: magenta;
}
- entity: binary_sensor.service_off_value
card_mod:
style: |
:host {
--state-binary_sensor-on-color: cyan;
--state-binary_sensor-off-color: magenta;
}
state_color: true
2 Likes
@Mariusthvdb
Please ignore my previous reply.
I got it! Thank you so much!
I added device_class: connectivity to my binary_sensor definition:
template:
- binary_sensor:
- name: Kodi1 VPN
device_class: connectivity
and then added this to the theme:
google-green-500: "#859900" # Solarized Green
google-red-500: "#dc322f" # Solarized Red
state-binary_sensor-connectivity-off-color: "var(--google-red-500)"
state-binary_sensor-connectivity-on-color: "var(--google-green-500)"
And it works!
I see now, that the entity names ARE NOT understood by themes, but the device_classes ARE!
1 Like
Youre right, in standard card it works! Thank you
Do you have any idea why it is not working in multiple entity row or as a mushroom card? HA is last version, both are mushroom cards and multiple enitity rows
In general, style from card_1 may not work for card_2.
Working examples for m-e-r: go to 1st post of the thread → link at the bottom → multiple-entity-row
Not using.
you could also just use the right device_class everywhere, as HA has default colors for all of those, and you might just like them.
Only need to change them if you want different colors
Hello. Can anyone help me? I am a beginner and card-mod is still difficult for me.
My card-mod version is the latest, 3.4.3, and the ha-core version is 2024.7.4.
I am working in Chrome.
I am trying to pull out the more-info using the card from GitHub - thomasloven/lovelace-more-info-card: 🔹 Display the more-info dialog of any entity as a lovelace card on my dashboard.
There is a lot of unnecessary information that I don’t want to display.
The header and state are working well,
but I can’t figure out how to set the display of div class current and the controls under div class controls to none.
I just wish only the temperature control section would be visible.
type: custom:more-info-card
entity: climate.ac_stand
card_mod:
style:
$: |
h1 {
display: none !important;
}
.: |
h1, state-card-content {
display: none !important;
}
.card-content {
padding: 1.5em 0 0 0.7em;
}
more-info-content$more-info-climate:
.: |
.current {
display: none !important
}
When I copy the JS path of the div.current from the above image and paste it into card-mod-helper, I get this value.
body>home-assistant$home-assistant-main$ha-drawer>partial-panel-resolver>ha-panel-lovelace$hui-root$#view>hui-view>hui-masonry-view$#columns>div:nth-child(1)>hui-card-options>hui-card>more-info-card$ha-card>div>more-info-content$more-info-climate$div.current
I really can’t figure it out.
I would really appreciate it if anyone could help me. Thank you, and sorry for my poor english.
Hello,
when I embed this code, it works for about 1 second, then returns to normal state without considering the modification:
1 seconde later:
should I change something else?
thanks 
I’m using that all the time as I don’t like the space (too big for my liking)
Here is my code:
card_mod:
style:
.entities:
.entity:
$: |
.name {
margin-top: -15px;
}
state-badge {
margin-top: 0px;
margin-bottom: -25px;
}
But what you want is more, not less, and if I put 100px instead of 0px, I have this
Which is what you want I think.
Hi,
thank you for your feedback
the 100px was to concretely show my problem,
namely that the code works (the spacings take the indicated size), and in the next second, returns to its default state (return to default spacings).
in this case, with your code (I like the fact that we can also change the top margin!), only the top margin remains taken into account.
The second (concerning the state-badge), returns to its standard state in the following second: (again with 100px to show that this is not taken into account 
)
REEE
I have found !
—
Cool mais c’est un forum en anglais, tu risques la peine de mort
Next time, use English only 
oh thank you!
with automatic translation, I don’t pay attention and get fooled regularly! (I corrected it!)
Hello,
I am trying to style the thermostat fan and swing modes. But i can not get it done in card_mode style.
I can change it in the chrome DevTools but when i set it in the card mod it does not do anything.
Does someone know how to proper set this?
Only hui-card-features has affect but on a 3 rows at once, i would like to place the swing modes and fan modes next to each other.
Did you find a solution to this? It is driving me insane!
Sadly no, I still didn’t update because of this and the developer has gone radio silent sadly, so no responses. On Github issue someone did mention there was a workaround with a different variable, but it has some other caveats. You could try that, the issue is created on the Github page.
I saw the issue, but the only solution I found was using a fixed position (which doesn’t really fix my issue).
I also saw something about the hui-card, but I have no clue where to put that in card-mod.