Merry Christmas everyone! I need a bit of help 
Iām trying to create a custom theme and use the card mod to style the .primary span inside a ha-tile-info component thatās inside the ha-card component.
I can achieve this by editing the tile card directly and add the following:
type: tile
entity: switch.bedroom1_switch1_btn1
card_mod:
style:
ha-tile-info$: |
.info .primary {
color: red;
}
How can achieve the same thing inside a theme? I tried creating a custom theme and adding the card-mod-card styles as shown bellow but itās not working.
frontend:
themes:
custom:
card-mod-theme: custom
card-mod-card: |
ha-card {
ha-tile-info$: |
.info .primary {
color: red;
}
}
Please ask in card-mod-theme thread.
thanks. i reposted there
Good morning, Iām trying to make a glance card with a larger font than standard. As others posted, when the font gets too large, the overflow setting cuts off the text. Also as mentioned here, I can manually deselect overflow: hidden in the inspector, but adding overflow: visible to the card has no effect. I also tried increasing the card size, but that doesnāt change the size at all in HA.
The previous overflow questions had no solution. Has anyone figured a way around this? Is there a better card (such as custom button card) that would work here? I want a large, color-coded temperature to let us know if itās time to add wood to our outdoor wood boiler. Code and screenshot below:
show_name: false
show_icon: false
show_state: true
type: glance
entities:
- entity: sensor.heatmor_temperature
card_mod:
style: |
:host {
color:
{% if states(config.entity) | int <= 110 %}
blue
{% elif states(config.entity) | int <= 120 %}
yellow
{% elif states(config.entity) | int >= 110 %}
red
{% endif %}
;
}
title: HeatMor
card_mod:
style: |
ha-card {
font-size: 3em;
cardHeight: 900px; # no effect
overflow: visible; # or overflow: visible !important, no effect
}
Because cardHeight is not css propertyā¦ 
}
use line-height: 100%;
I use line-height: 100%;
but I still want to move it a bit down
What exactly do you mean? Do you mean the state or the whole ha-card? Does line-height work for you?
sameā¦
use
ine-height: 100%;
That did the trick, thank you! Now I need to go add wood since itās in the yellow!
Another CSS selector questionā¦
Iām trying to make the grid width in the built-in grid card smaller. Iāve narrowed down this value:
grid-template-columns: repeat(var(--grid-card-column-count,2),minmax(0,0.5fr)) !important;
As being what I need to set. The DOM navigation here seems simple, but I cannot get it to work.
div ID ārootā is what I want, as you can see here:
Assuming that hui-grid-card is the base, the following code should work:
card_mod:
style:
hui-grid-card $: |
#root {
grid-template-columns: repeat(var(--grid-card-column-count,2),minmax(0,0.2fr)) !important;
}
But it doesnāt. Iāve tried .:, and just going for #root, and several other variations. It seems that it has to be either hui-grid-card, or #root. What else would the selector be?
[sneaky edit: Also happy holidays everyone 
, I swear I have a lifeā¦this is what I do for fun. 
]
Congratulations on noticing something I missed. After a long time trying a bunch of different solutions and reading different threads for hours, itās reassuring to be reminded that Iām actually a moron who just needed to āread the documentation firstā.
But in a roundabout way, youāve answered my question, so thank you for responding and helping.
Nobody said that you are a moron, that was your own conclusion. And yes, users must read Docs.
gettting back to the 2025.1 changes in the card mods, I can confirm that setting a generic background here:
type: entities
card_mod:
style:
hui-sensor-entity-row:
$: |
hui-generic-entity-row {
height: 25px;
padding: 0px 16px;
border-radius: var(--ha-card-border-radius);
border: 1px groove var(--primary-color);
background: green;
}
does work (albeit for all generic-entity-rowās of course)
still figuring out why a mod on the individual row does notā¦
and its getting worse:
- entity: script.intercom_text_message
name: Speel bericht
card_mod:
style: |
:host {
--card-mod-icon-color:
{% set state = states(config.entity) %}
{{'var(--alert-color)' if state == 'on' else 'var(--success-color)'}};
--card-mod-icon:
mdi:{{'stop' if state == 'on' else 'play'}};
}
has completely lost itās functionalityā¦ many more. like this:
- entity: input_text.message
name: Bericht
card_mod:
style:
hui-generic-entity-row $: |
state-badge {
display: none;
}
o dear. weāre in for a surprise next weekā¦
all we know is they āchanged some attributesā ā¦
opened this issue in card_mod
cold this be relatedā¦? Update hui-generic-entity-row.ts Ā· dhoeben/frontend@6e810d4 Ā· GitHub
But I really think you didnāt read the documentation, maybe you just copied the first example from the repoā¦ then you modified the style according to yourself, regardless of how card_mod works. The creator of the plugin didnāt write the readme just for funā¦ so, RTMFā¦ 
I am still having a cosmetic issue with this glance card:
show_name: false
show_icon: false
show_state: true
type: glance
entities:
- entity: sensor.heatmor_temperature
card_mod:
style: |
:host {
font-size: 4em;
line-height: 100%;
color:
{% if states(config.entity) | int <= 110 %}
blue
{% elif states(config.entity) | int <= 120 %}
yellow
{% elif states(config.entity) | int >= 110 %}
red
{% endif %}
;
}
title: HeatMor
Frequently the mobile app displays the number with no formatting as shown below. Changing to a different tab and back to home or editing and saving (without changes) the card will once again display the larger, color-coded font. Is there something else I need to change so that what you see below doesnāt happen?
HI, having searched for a few hours, I cannot find a way to change an element in SVG.
The basis is a apexcharts which shows so-called āextremasā, here 15.9 and 12.1
I have been able to change the font size by referring to the class
card_mod:
style: |
ha-card
.apexcharts-point-annotation-label {
font-size: 20px
}
What I want to achieve is to change the height/background of the <rect> elements but I just cannot find the path to it. This main class .apexcharts-point-annotations has two ārectā and both need to follow the same sizing and coloring.
Any idea on how to address this?
EDIT: for those that did not come to the conclusion yetā¦ I have very limited āskillsā in this area
I donāt think youāre able to target elements with an SVG tag, so your only real option is to manipulate existing classes used within that SVG element. So, you need to do something similar you did for the font size, but thereās no class on the rect element.