just as a heads up, be careful to check this out because card_mod seems broken in 2023.10.0b3
its been found in the current beta cycle, and seems to throw various results, some donāt see it, some see the header not move, and I dont see a single working card_mod being effective any longer.
Maybe chime in and report what you see in your specific config? would be helpful in debugging and ofc fixing for the author.Though the main reasons seems to have been pinpointed already
and fixed, by Thomas, so a big thanks is in order!
however, forcing me to move over from 3.1.4 (which has the changing icon in the header still functional) to the new 3.2.3.
This has another effect, namely I can no longer use my trusted mod on history-graph headers, which I used to simply set this class on:
ha-card.class-header-margin .card-header {
background-color: var(--background-color-off);
font-weight: 400;
font-size: 20px;
color: var(--text-color-off);
padding: 0px 12px;
margin: 0px 0px 16px 0px;
}
Ive been looking any the various examples here (and seem to remember a change in headers at some time, but cant find it), but I can not find the fix for this, so please could anyone help me out, how to mod the header and have it look like that again?
top is the class at work on a regular entities, below is the history-graph unmoddedā¦
Iāve also tried the mentioned
- type: history-graph
title: Temperatuur - Verwarming
card_mod:
style:
.: |
.card-header {
color: red;
font-size: 38px;
padding-bottom: 0px;
}
in this thread, without succes
same goed for any of the other graph-card btw, so its a bit of a wider issue for me than this card alone, appreciate a pointer to the change/fix
this mentions the change, š¹ Card-mod - Add css styles to any lovelace card - #3414 by Ildar_Gabdullin but I already applied that, and it doesnt work for the header
I had one spot where I took it into the shadow root with:
card_mod:
style:
$: |
.card-header {
background-color: var(--background-color-off);
font-weight: 400;
font-size: 20px;
color: var(--text-color-off);
padding: 0px 12px;
margin: 0px 0px 16px 0px;
}
and that actually does set the correct background-color, but all off the other properties are untouched, resulting in
and then in dawned on me, need !important:
card_mod:
style:
$: |
.card-header {
background-color: var(--background-color-off);
font-weight: 400 !important;
font-size: 20px !important;
color: var(--text-color-off) !important;
padding: 0px 12px !important;
margin: 0px 0px 16px 0px !important;
}
hardly a streamlined method, but it gets the job done. If anyone can instruct me to do it differently, please dont hold backā¦
leaving me with the ultimate challenge which !important cant solve either: how to change the icon of the view tab:
paper-tab[aria-label='Beweging'] ha-icon$: |
ha-svg-icon {
--card-mod-icon: {{'mdi:motion-sensor' if
is_state('binary_sensor.motion_sensors_all','on') else
'mdi:motion-sensor-off'}};
color: {{'red' if is_state('binary_sensor.motion_sensors_all','on')}};
}
it does set the color alright, heck, it even correctly applies the condition al animation I set.
and it worked up to 3.1.4.
cant make it change the icon though anymore, no matter what I try. And that is really a bummer, because I didnt have to open a view to check the weather, or see how many people are at home. Just a glance at the tab in the menu would disclose this vital info
Can card-mod be used with the button-card HACS? I have an entity that I need word-wrap on (hense card-mod) but I also like the ease of hiding icon and name with button-card.
The color changes but the word-wrap doesnāt work bjut the card-mod wraps with a normal entity card (not button-mod)
type: custom:button-card
entity: sensor.nws_daily_summary
show_name: false
show_state: true
show_icon: false
card_mod:
style: |
:host {
text-overflow: unset !important;
}
ha-card {
color: red;
}
The custom button card has its own style options. Have you tried that?
back again on this, seems that card_mod update changed something in those modsā¦
type: custom:mod-card
card_mod:
style:
tabbed-card $:
.: |
mwc-tab-bar {
background: {{'var(--lovelace-background)'
if states('input_select.theme')|regex_search('(ight|Dark|Matrix)')
else 'var(--primary-color)'}};
}
mwc-tab:
$:
mwc-tab-indicator $: |
.mdc-tab-indicator__content--underline {
border-color: var(--text-color-off) !important;
}
.: |
.mdc-tab {
min-width: 80px;
}
.material-icons {
display: contents !important;
}
.mdc-tab--active {
--mdc-icon-size: {{states('input_number.active_icon_size')}}px;
/*background: var(--text-color-off) !important;*/
}
.: |
tabbed-card {
--mdc-tab-horizontal-padding: 0px;
}
worked just nicely before, amongst others, but now, even mentioning the
mwc-tab:
causes an error of Unhandled Promise Rejection: TypeError: Argument 1 ('target') to MutationObserver.observe must be an instance of Node in inspector:
not sure where to start, but figured since its such a specific error to tabbed cards mods, this would be the best place to begin.
Any thoughts would be appreciated!
this code runs ok:
type: custom:mod-card
card_mod:
style:
tabbed-card $:
.: |
mwc-tab-bar {
background: {{'var(--lovelace-background)'
if states('input_select.theme')|regex_search('(ight|Dark|Matrix)')
else 'var(--primary-color)'}};
}
# mwc-tab:
# $:
# mwc-tab-indicator $: |
# .mdc-tab-indicator__content--underline {
# border-color: var(--text-color-off) !important;
# }
#
# .: |
# .mdc-tab {
# min-width: 80px;
# }
# .material-icons {
# display: contents !important;
# }
#
# .mdc-tab--active {
# --mdc-icon-size: {{states('input_number.active_icon_size')}}px;
# /*background: var(--text-color-off) !important;*/
# }
.: |
tabbed-card {
--mdc-tab-horizontal-padding: 0px;
}
edit/update
I had obviously missed Ildarās note on the change format of the card_mod,
moving it all under that $ like this makes all work, and the error disappear:
card_mod:
style:
tabbed-card:
$:
.: |
mwc-tab-bar {
background: {{'var(--lovelace-background)'
if states('input_select.theme')|regex_search('(ight|Dark|Matrix)')
else 'var(--primary-color)'}};
}
mwc-tab:
$:
mwc-tab-indicator $: |
.mdc-tab-indicator__content--underline {
border-color: var(--text-color-off) !important;
}
.: |
.mdc-tab {
min-width: 80px;
}
.material-icons {
display: contents !important;
}
.mdc-tab--active {
--mdc-icon-size: {{states('input_number.active_icon_size')}}px;
/*background: var(--text-color-off) !important;*/
}
.: |
tabbed-card {
--mdc-tab-horizontal-padding: 0px;
}
Custom button-card doesnāt seem to have a word-wrap option, but I finally was able to get the visual I wanted with card-mod through a bunch of trial and error last night. Thanks.
Not explicitly, but you can inject your own CSS, similar to card-mod: injecting CSS with extra_styles.
But even with styles you just set CSS properties. All the options wonāt be listed.
For example:
styles:
card:
- font-size: 12px
That font-size is CSS.
or this:
Could be another CSS prop - but idea is the same: define styles for a particular element.
It may cover most of userās needs; in other cases card-mod may be used.
found the fix for this, see 3.2.2 does not change icon in views via card-mod-theme Ā· Issue #268 Ā· thomasloven/lovelace-card-mod Ā· GitHub
I donāt know why I canāt wrap my head around figuring out how to navigate the DOM with card mod. If anybody has an ELI5 to help me out (even a link) that would be great.
In the meantime, I want to remove this blank space. Iām a very boring guy, there isnāt much on my calendar 
I believe this is the culprit. When I uncheck it, the card does exactly what I want. Iām not sure why the card is set up with a minimum height in the first place, but I digress.
This is the whole calendar card source.
Gleaning from examples (incorrectly I assume), this is what I tried.
type: calendar
initial_view: listWeek
entities:
- calendar.jazzyisj
- calendar.household
card_mod:
style:
$: |
div.calendar {
min-height: none !important;
}
Can someone point me in the right direction here?
how would i replace the text red here with the current value of an attribute from a sensor? The name of the template sensor is sensor.outside_average and attribute name is color.
- type: weather-forecast
show_current: true
show_forecast: true
entity: weather.home
forecast_type: legacy
state_color: false
style: |
ha-card {
height: 196px !important;
}
:host .content .info .name-state .state {
color: red !important
}
nothing i do seems to work, except for hardcoding the color name there.
thank you.
Show people a code which you tried to use.
Also, what is a reason of using ā:hostā here?
i think i have figured out the color part. its because i also have lovelace-gen. using this solves it:
:host .content .info .name-state .state {
{% raw %}
color: {{ states['sensor.outside_average_temperature'].attributes.color }} !important
{% endraw %}
}
i am a css and card-mod novice. :host seemed to do the trick thatās why itās there. love to learn about when to use :host and not.
thank you.
I am having an issue with card mod that seems to have been addressed previously in this thread, but the solution isnāt working for me.
Console error:
lovelace-card-mod.js:1 Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/html". Strict MIME type checking is enforced for module scripts per HTML spec.
Card-mod has been installed via HACS.
Resource URL: /hacsfiles/lovelace-card-mod/card-mod.js?hacstag=190927524323
config:
frontend:
themes: !include_dir_merge_named themes
extra_module_url:
- /hacsfiles/lovelace-card-mod/card-mod.js
Any ideas what could be wrong?
Having issues with the formatting to hide a specific portion of a card.
Iāve figured out how to hide the card-header, but not having as much luck with figuring out how to hide " div class=āhorizontal justified layoutā
So far this is what I have but I know the bit after the first ādisplay: none !important;ā is wrong and what I could use some help on.
type: custom:more-info-card
entity: climate.thermostat
title: Home
card_mod:
style:
$: |
.card-header {
display: none !important;
.:
.state-card-content
.state-card-climate
.$
.:
.horizontal justified layout {
display: none !important;
}
According to card-mod-helper this is the output.
"body>home-assistant$hui-dialog-edit-card$ha-dialog>div.content>div.element-preview>hui-card-preview>more-info-card$ha-card>div>state-card-content>state-card-climate$div"
Any help is appreciated
Am I the only one here for whom card-mod completely stopped working after upgrade to 2023.10?
Update card mod itself and then clear your app/browser cache.
Any reason why you dont just hide the section like this?
card_mod:
style: |
state-card-content {
display: none;
}
doing the below which i think is what you want, does not work very well to be honest.
card_mod:
style:
.card-content:
state-card-content:
state-climate-content$: |
layout-horizontal {
display: none;
}
I donāt know why you deleted your post! Although it didnāt do exactly what I was looking for it did allow me to kinda work around it. That is the correct syntax to access the #calendar div.
Playing around with the css elements I think I figured out that the front end canāt read the size of #calendar because itās dynamic which is why the min-height was set in the first place and why your deleted suggestion didnāt work (the div just disappears). I believe this is also why max-height property doesnāt work here.
Anyway, since there are always at least a couple of events in the calendar this basically works to get rid of the extra space for me.
card_mod:
style:
ha-full-calendar$: |
#calendar {
min-height: 300px !important;
}
Still not quite understanding what element to start with or the significance of ā$ā being at the beginning or end of an element how to translate that to card_mod. Iāll keep banging my head on a wall until I figure that out.
Anway, thank you for your help, at least I got this task out of the way.