/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
height: 128px !important, if youāre willing to help reduce forum load try reading the last 25 replies and see if you can learn basic CSS.