Card mod is not required for that. You only need to set state_color to true. See: https://www.home-assistant.io/lovelace/glance/#state_color
Need your help, as card-mode doesnāt work for me ;(
Iāve installed HACS, then from it Iāve installed card-mod - I can see it in HACS frontend.
Next Iāve added in Lovelace Resources card-mode as JS module.
In inspector network I see that itās loaded. But when I add ātestā style there is no difference.
type: entities
style: |
ha-card {
color: red;
}
entities:
... list of entities
Am I missing something?
Did you actually put entities in there? I think that the entities card is a bad example, because each item is under its own shadow-root.
For example I have:
type: weather-forecast
style: |
ha-card {
color: red;
}
entity: weather.domek
Result is the same. No red color ;(
I believe shadow roots are used there as well. Try background-color instead.
I think that this may be an issue, the message in console:
card-mod.js:1 Failed to load module script: The server responded with a non-JavaScript MIME type of ātext/htmlā. Strict MIME type checking is enforced for module scripts per HTML spec.
chunk.50aa61d1621a20ca8a1a.js:575 Uncaught (in promise) http://192.168.1.200:8123/config/www/community/lovelace-card-mod/card-mod.js
Any ideas?
Yup, you downloaded the whole HTML page instead of just the raw JS.
I was not downloading itā¦ I installed it via HACS.
When I do cat card-mod.js I see that it starts with !function(e) ā¦ so itās pure JS file.
What did you include in your resource file? I think you should check the magic numbers (thatās how Linux dictates file type.)
Nope, HACS didnāt add that resource automatically. Itās /local/, not /config/www/.
Iāve removed and installed it once again via HACS and once again it was put in that place. On the HACS page I can see that this is the default place of installed modules.
Should i move it to local? (I donāt have this path either)
/config/www/ on your file system maps to /local/ on the web browser, for example myhome.duckdns.org/local/community/lovelace-card-mod/card-mod.js, but HACS should auto-add it at /hacsfiles/lovelace-card-mod/card-mod.js.
Once replaced /config/www/ by /local/ it works like a charm! I own you a beer 
Thanks
If you used HACS it SHOULD be /hacsfiles/button-card/button-card.js
1 Like
Hello
can you tell me why this doesnā work ?((((
Background color = OK, but āheightā is ignoredā¦
type: entities
entities:
- entity: sun.sun
title: height
style: |
ha-card {
height: 500px;
background: rgb(0,255,0);
}
Should I tag people?
Generally, no.
It comes across as bad manners, youāre demanding somebody answers you. Itās different if youāre thanking somebody, obviously.
1 Like
I finally updated from HA 116.4 to 117.1. I see that markdown has yet again changed stuff. I canāt set the card height anymore with card mod. I used to have this:
now it shows as this:
I created this by putton two markdown cards inside a vertical-stack. The āheaderā has this style:
.: |
ha-card {
height: 20px;
--ha-card-background: none !important;
box-shadow: none !important;
left: -2.5%;
width: 100vw;
}
ha-markdown:
$: |
h1 {
font-size: 20px;
font-weight: bold;
font-family: Helvetica;
letter-spacing: '-0.01em';
}
And the āsubā has this stile:
.: |
ha-card {
height: 30px;
--ha-card-background: none !important;
--primary-text-color: var(--sensor-accent-color);
box-shadow: none !important;
left: -1.2%;
}
ha-markdown:
$: |
h1 {
font-size: 15px;
font-weight: thin;
font-family: Helvetica;
letter-spacing: '-0.01em';
}
It looks like the height code has changed? Does anyone know how I can fix this again?
Edit:
I see a second style (constructed stylesheet) option with height: 100%, that one disables my height setting. If i uncheck that one, all works. I tried setting that, but I have no clue how to change that and what to put for card-mod to use it. Any idead?
This part breaks my entire setup since I use markdown all over the place. Removing the line solves everything. Anyone know what I can do to make sure HA ignores that line in my entire UI?
For the time being I fixed it by using !important everywhere, which now overrides the new variable. Though this is very hacky and doesnāt look nice when reloading (starts spaced then applies the height). I really hope some has a decent global solution for this.
Edit: I created a ticket at HA Frontend. If someone else uses markdown this way, stay up to date here -> https://github.com/home-assistant/frontend/issues/7578#issuecomment-720539351
Has something changed with this mod card?
My center buttons with picture entity card in it, is now bigger than the rest, although the code is the sameā¦ (this used to work, but something changed and they arent equal size anymore
Has something changed with this mod card?
My center buttons with picture entity card in it, is now bigger than the rest, although the code is the sameā¦ (this used to work, but something changed and they arent equal size anymore
The code:
- card:
name: Alarm
type: button
show_label: false
icon: mdi:shield-off
tap_action: !include popup/alarm.yaml
style: |
ha-card {
height: 128px;
text-align: center;
}
type: 'custom:mod-card'
- entity: person.stijn
image: /local/stijn.jpg
tap_action: !include popup/persoon1.yaml
style: |
ha-card {
height: 128px;
}
type: picture-entity
- card:
name: Verlichting
type: button
icon: mdi:lightbulb-outline
tap_action: !include popup/verlichting.yaml
style: |
ha-card {
height: 128px;
}
type: 'custom:mod-card'Any ideas on which level I should put style to be able to modify div with columns?
I put it like that:
- icon: 'hass:chart-line'
title: Charts
path: charts
panel: false
style: |
#columns {
justify-content: end !important;
}
badges: []
cards:
- type: history-graph
but itās not taken into account.