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.
What type of card is that?
true that, but then I get yellow icons when it is on… I would really want red icons…
I tried some things… and am partial succesfull
code:
type: glance
entities:
- entity: binary_sensor.laadpaal_jc_l
style: |
:host {
--paper-item-icon-color:
green;
}
- entity: binary_sensor.laadpaal_jc_r
style: |
:host {
--paper-item-icon-color:
{% if states('binary_sensor.laadpaal_jc_r') == 'on' %}
red;
{% else %}
{% endif %}
}
- entity: binary_sensor.laadpaal_jc_r
style: |
:host {
--paper-item-icon-color:
{% if states(config.entity) == 'on' %}
red;
{% else %}
{% endif %}
}
result:
What is wrong?
If you want to change all the icons active colour just change the them variable state-icon-active-color to red.
like this?:
type: glance
entities:
- entity: binary_sensor.laadpaal_jc_l
- entity: binary_sensor.laadpaal_jc_r
- entity: sensor.netatmo_huiskamer_reachability
style: |
:host {
--state-icon-active-color:
red;
}
(Netatmo is 100% sure active)
this is the result… no red icon 
No, like this:
That will change for all cards the icon color? I just want for that particular card the icon colors changed.
So this is to rigid 
This works for the “off” (green) and unavailable (gray) state, but the “on” state it is yellow again
type: glance
entities:
- entity: binary_sensor.laadpaal_jc_l
style: |
:host {
--paper-item-icon-color:
{% if states(config.entity) == 'on' %}
red;
{% elif states(config.entity) == 'off' %}
green;
{% else %}
gray;
{% endif %}
}
- entity: binary_sensor.laadpaal_jc_r
style: |
:host {
--paper-item-icon-color:
{% if states(config.entity) == 'on' %}
red;
{% elif states(config.entity) == 'off' %}
green;
{% else %}
gray;
{% endif %}
}
show_state: false
title: Laadpalen J
1 Like
Try adding state_color: false so that the default logic for setting the colour doesn’t get applied. That seems to work for me.
2 Likes
That did the trick!
Anyone can help me with this?
Try !important
hi
Where ? In the code? or you mean here in the post?
IF you mean in the code… where do i place it