1st post ā bla bla bla, you know the rest, and your point is:
1 Like
Fantastic. Only took me 3 minutes this time - getting used to it and therefore hopefully faster - (very) slowlyā¦ 
This is my final working snippet
- entity_id: number.motion_*_duration
options:
secondary_info: last-changed
card_mod:
style:
.: |
:host {
--ha-textfield-input-width: 50px;
/* --text-field-padding: 0px; */
}
hui-generic-entity-row $: |
.info {
flex: 1 1 50% !important;
}
Since you provided no minimal code, I tested with this:
- type: markdown
content: |
<div class="tg-wrap">
<table width=100%>
<tbody>
<tr>
<td><ha-icon icon="mdi:bell"></ha-icon></td>
<td>long long long long long long long long long long long long long long long long long long long long</td>
<td>xxxxxxx</td>
</tr>
</tbody>
</table>
</div>
The āha-iconā & text elements need to be in different ātdā, otherwise with this
<td><ha-icon icon="mdi:bell"></ha-icon>long long long long long long long long long long long long long long long long long long long long</td>
you will see this:
With these examples I found a bit tricky to get stable results.
This was unstable:
card_mod:
style:
ha-markdown:
$: |
table tbody tr td {
vertical-align: top;
}
and this (contrary to my expectations) was stable:
card_mod:
style:
ha-markdown $: |
table tbody tr td {
vertical-align: top;
}
This one may be used as well:
card_mod:
style:
ha-markdown $: |
:first-child {
vertical-align: top !important;
}
2 Likes
Hi, I would like to change the title and sensor text color of this card, but already playing with it for hours and canāt find it, some css guru here that can help with this?
Thanks in advance!
Kind regards, D
Can you show your current yaml/card_mod, what you have tried and what is the status quo and what is not working as expected?
Iām new to Home Assistant and on a steep learning curve and in need of some help please.
I have this sensor card with large font setup but the header is cutting the text.
Here is the code-
graph: line
type: sensor
entity: sensor.heating_hot_water_tank_735
name: Hot Water Tank
style: |
ha-card
{
--accent-color: red;
}
.header .name {
color: #959595;
font-size: 12px;
font weight: bold
}
.header .icon {
color: #red;
--mdc-icon-size: 28px;
}
.info .value {
color: white;
font-size: 68px;
font-weight: light
}
.info .measurement {
color: white;
font-size: 12px;
}
detail: 2
Is there a way the free header space can be reduced?
Thanks Steve
(unrelated) this is wrong, use simply this
color: red;
or - if you need to comment:
/* color: red; */
1 Like
code
type: vertical-stack
cards:
- type: sensor
entity: sensor.xiaomi_cg_1_co2
graph: line
hours_to_show: 1
detail: 1
card_mod:
style: |
.info .value {
font-size: 74px;
}
- type: sensor
entity: sensor.xiaomi_cg_1_co2
graph: line
hours_to_show: 1
detail: 1
card_mod:
style: |
.info .value {
font-size: 74px;
}
.info {
line-height: 60px !important;
}
1 Like
Thank you thatās great. Much appreciated
Hi, I tried searching online, using the chrome inspect option, but I can only find these values, no option to change the title, subtitle color, that said Iām no dev guy and all this template, CSS stuff is quite hard for me, but with the help of the community, trial and error Iām getting there
Thanks in advance!
card_mod:
style: |
ha-card {
font-size: 1em;
height: 300px;
font-size: 2cm !important;
font-family: Helvetica;
line-height: 50px;
text-transform: capitalize;
font-style: italic;
font-weight: 900 !important;
letter-spacing: 0.20em !important;
word-spacing: 3px;
--mdc-icon-size: 50px;
}
The white is just, well, too white :-P, so I would like to change it more to the font, color like the top bar title colors
hi, Iām trying to change the font-weight of the value in a auto-entities card, but for some reason I canāt get it to work. What am I missing here? The
ha-card .entities .entity:
$: |
div:not(.name) {
font-weight: bold;
}
in:
type: custom:auto-entities
card:
type: glance
card_mod:
style: |
ha-card {
padding: 0px;
}
ha-card .entities {
padding: 0px;
}
ha-card .entities.no-header {
padding: 0px;
}
ha-card .entities .entity:
$: |
div:not(.name) {
font-weight: bold;
}
filter:
include:
- entity_id: sensor.afvalwijzer_*
attributes:
days_until_collection_date: <= 10
options:
tap_action:
action: none
sort:
attribute: days_until_collection_date
method: attribute
numeric: true
isnāt working.
pff stupid me, this works! well hopefully I can help other people with it
Color and size title
card_mod:
style: |
ha-card .box .card-header {
font-size: 1em;
color: grey;
}
Answering my own problem here.
It seems the inconsistent behaviour of card-mod is corrected if I use it as a frontend module, and not a lovelace resource. So, since I installed it via HACS, I added this to my configuration.yaml:
frontend:
extra_module_url:
- /hacsfiles/lovelace-card-mod/card-mod.js
So, all good at last 
OMG! Thank you so much! This is exactly what I was looking for. You even provided different variations to help me understand/learn CSS styling better. I always learn better with real-world examples like this that I can relate to.
I need a little help, I have this page for bus departures in an iframe card: VƤsttrafik AvgƄngstavla
I want to hide the rows with departures from platform (LƤge) B.
Hereās my card yaml so far:
type: iframe
url: https://avgangstavla.vasttrafik.se/?stopAreaGid=9021014005070000
aspect_ratio: 50%
card_mod:
style: |
div#root iframe {
--skala: 0.5;
--procent: calc(100%/var(--skala));
transform: scale(var(--skala));
transform-origin: 0 0;
width: var(--procent);
height: var(--procent);
}
tr:has(td:contains("B")) {
display: none;
}
Any tips to get the last part working?
Does anyone know if itās possible to use card-mod for thisā¦
When I specify color/transparency for my card background color via: card-background-color, it is also forcing its color/transparency onto unrelated ādrop-down menu backgroundā:
All Iām trying to do is turn off transparency for drop-down menu backgrounds without turning off transparency for card backgrounds. Iām surprised that they are even linked together in the first place.
I canāt even use Developer tools to select the drop-down menu background to see whatās going on. When I try to use the element selector in my web browserās Developer Tools, the drop-down menu loses focus. 
I believe the popular ios-themes theme also has this issue since they have transparent card backgrounds.
I would appreciate any guidance that can help me achieve this. Iāve already spent a lot of time on this without any progress.
The one should not fore the other. You are only manipulating/setting the variable which is most probably used by both places. Just donāt manipulate the variable, which is used, but the background of the card directly instead. So where the variable is used before, set the values, you want to have.
Thanks for the quick reply.
Iām using the below color and respective transparency specifically for my card backgrounds (hence the name). I canāt change this or my cards wonāt look the way I want:
card-background-color: 'rgba(115, 115, 115, 0.1)'
However, the transparency from this is directly affecting the drop-down menu background in the screenshot.
Iām not sure I understand what youāre asking me to do, Iām not manipulating a variable.
You do.
card-background-color is the variable.
And this one is assigned to the background then.
But now I see, you set it globally in your theme. Try to set ha-card-background instead. But I fear it will not help either.
So the question is, do you want the transparency everywehre in HA or only in your cards?
Hi. Iām trying to combine both a background colour depending on a state, but at the same time have it so it blinks if an automations is running. I have both the codes working individually, but I canāt combine them together. Help please!
I have it so if the number of days before recycling is due to go out is 0 (today), the background is red. If it is 1 day (tomorrow), the background is orange. That works fine.
I also want it so if I have a notification on my phone telling me to put the recycling out, it flashes red. But once I dismiss the notification, the flashing red stops.
These are the two bits of working code I have - please help me to combine them
card_mod:
style: >
:host {
--mush-icon-symbol-size: 1.8em;
}
ha-card {
background-color:
{% if is_state('sensor.recycling_days', '0') %} red !important
{% elif is_state('sensor.recycling_days', '1') %} darkorange
!important
{% else %} rgba(0.0.0.0);}
{% endif %};
}
card_mod:
style: |
ha-card {
animation: {% set status = state_attr('automation.recycling_notification','current') %}
{% if status == 1 %} blink 3s linear infinite;
{% else %} none
{% endif %}
}
@keyframes blink {
50% {background: red;}
}